diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index f5caaf2..8c56bfa 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -3,16 +3,16 @@
 @tailwind utilities;
 
 :root {
-  --shell-background: #f4efe7;
+  --shell-background: #f8fafc;
   --shell-surface: rgba(255, 255, 255, 0.9);
   --shell-panel: #ffffff;
-  --shell-muted: #f8f4ed;
-  --shell-border: #d8cfc1;
-  --shell-ink: #16212b;
-  --shell-subtle: #5d6873;
-  --shell-accent: #0f5e5b;
-  --shell-accent-soft: #dce9e8;
-  --shell-warm: #8a6249;
+  --shell-muted: #eef2f7;
+  --shell-border: #d7dde5;
+  --shell-ink: #0f172a;
+  --shell-subtle: #475569;
+  --shell-accent: #0f766e;
+  --shell-accent-soft: #ccfbf1;
+  --shell-warm: #92400e;
 }
 
 html.dark,
@@ -38,9 +38,7 @@ html {
 body {
   min-height: 100vh;
   color: var(--shell-ink);
-  background: radial-gradient(circle at top left, rgba(15, 94, 91, 0.08), transparent 32%),
-    radial-gradient(circle at top right, rgba(138, 98, 73, 0.08), transparent 28%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 22%), var(--shell-background);
+  background: var(--shell-background);
 }
 
 body,
@@ -48,7 +46,7 @@ input,
 textarea,
 button,
 select {
-  font-family: "Satoshi", "Avenir Next", "Segoe UI", sans-serif;
+  font-family: Inter, "Segoe UI", Arial, sans-serif;
   font-feature-settings: "ss01" on, "ss02" on;
 }
 
@@ -58,8 +56,8 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: Georgia, "Times New Roman", serif;
-  letter-spacing: -0.03em;
+  font-family: inherit;
+  letter-spacing: 0;
 }
 
 ::selection {
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 275edfd..bf7ad34 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,4 +1,3 @@
-import "@/css/satoshi.css";
 import "@/css/style.css";
 import "jsvectormap/dist/jsvectormap.css";
 import "flatpickr/dist/flatpickr.min.css";
@@ -26,7 +25,7 @@ export default function RootLayout({
         <TranscriptionProvider>
           <HumanEvaluationProvider>
             <WorkspaceProvider>
-              <div id="root" className="min-h-screen dark:text-bodydark">
+              <div id="root" className="min-h-screen text-slate-900 dark:text-slate-100">
                 {children}
               </div>
             </WorkspaceProvider>
diff --git a/frontend/app/workspace/alumni/record/page.tsx b/frontend/app/workspace/alumni/record/page.tsx
index c73dc6f..d4bff32 100644
--- a/frontend/app/workspace/alumni/record/page.tsx
+++ b/frontend/app/workspace/alumni/record/page.tsx
@@ -35,7 +35,7 @@ const AlumniRecordPage = () => {
           "Learner-record previews on the alumni home route come from the backend timeline contract rather than frontend fixtures.",
         ]}
       />
-      <div className="mt-8">
+      <div className="mt-6">
         <WorkspaceLifelongNetworkPanel />
       </div>
     </DefaultLayout>
diff --git a/frontend/app/workspace/principal/school-health/page.tsx b/frontend/app/workspace/principal/school-health/page.tsx
index fab6148..5fc87ac 100644
--- a/frontend/app/workspace/principal/school-health/page.tsx
+++ b/frontend/app/workspace/principal/school-health/page.tsx
@@ -35,7 +35,7 @@ const PrincipalSchoolHealthPage = () => {
           "The goal is to anchor leadership work in school context, not to create a new detached reporting tool.",
         ]}
       />
-      <div className="mt-8">
+      <div className="mt-6">
         <WorkspaceGovernedIntelligencePanel workspaceRole="principal" />
       </div>
     </DefaultLayout>
diff --git a/frontend/app/workspace/supervisor/briefings/page.tsx b/frontend/app/workspace/supervisor/briefings/page.tsx
index 00d2354..29eb7ee 100644
--- a/frontend/app/workspace/supervisor/briefings/page.tsx
+++ b/frontend/app/workspace/supervisor/briefings/page.tsx
@@ -34,7 +34,7 @@ const SupervisorBriefingsPage = () => {
           "Trust, freshness, and deep-link metadata now travel with the underlying report payloads as well.",
         ]}
       />
-      <div className="mt-8">
+      <div className="mt-6">
         <WorkspaceGovernedIntelligencePanel workspaceRole="supervisor" />
       </div>
     </DefaultLayout>
diff --git a/frontend/components/Header/ContextSwitcher.tsx b/frontend/components/Header/ContextSwitcher.tsx
index 024667d..fe740e6 100644
--- a/frontend/components/Header/ContextSwitcher.tsx
+++ b/frontend/components/Header/ContextSwitcher.tsx
@@ -4,14 +4,14 @@ import { useWorkspace } from "@/components/Workspace/WorkspaceProvider";
 import { useId } from "react";
 
 const inputClassName =
-  "mt-1 w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100";
+  "mt-1 min-h-9 w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-slate-900 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100";
 
 const ContextSwitcher = () => {
   const id = useId();
   const { currentContext, contextOptions, isLoading, setContext } = useWorkspace();
 
   return (
-    <div className="min-w-[15rem]">
+    <div className="min-w-0 flex-1 sm:min-w-[14rem] lg:min-w-[15rem]">
       <label
         htmlFor={id}
         className="block text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500"
@@ -31,7 +31,9 @@ const ContextSwitcher = () => {
           </option>
         ))}
       </select>
-      <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">{currentContext.note}</p>
+      <p className="mt-1 max-w-full truncate text-xs text-slate-500 dark:text-slate-400">
+        {currentContext.note}
+      </p>
     </div>
   );
 };
diff --git a/frontend/components/Header/RoleSwitcher.tsx b/frontend/components/Header/RoleSwitcher.tsx
index 6f67d6a..c8bd6cf 100644
--- a/frontend/components/Header/RoleSwitcher.tsx
+++ b/frontend/components/Header/RoleSwitcher.tsx
@@ -6,7 +6,7 @@ import { useRouter } from "next/navigation";
 import { startTransition, useId } from "react";
 
 const inputClassName =
-  "mt-1 w-full rounded-xl border border-stone-200 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100";
+  "mt-1 min-h-9 w-full rounded-lg border border-stone-200 bg-white px-3 py-1.5 text-sm text-slate-900 shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100";
 
 const RoleSwitcher = () => {
   const id = useId();
@@ -14,7 +14,7 @@ const RoleSwitcher = () => {
   const { availableRoles, currentRole, isLoading, setRole } = useWorkspace();
 
   return (
-    <div className="min-w-[12rem]">
+    <div className="min-w-[10rem]">
       <label
         htmlFor={id}
         className="block text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500"
diff --git a/frontend/components/Layouts/DefaultLayout.tsx b/frontend/components/Layouts/DefaultLayout.tsx
index 066f582..0270ae6 100644
--- a/frontend/components/Layouts/DefaultLayout.tsx
+++ b/frontend/components/Layouts/DefaultLayout.tsx
@@ -5,6 +5,10 @@ import type { Metadata } from "next";
 import type React from "react";
 import { useRef, useState } from "react";
 
+const WORKSPACE_SHELL_METRICS_CLASS =
+  "[--workspace-header-offset:9.75rem] [--workspace-sidebar-width:15.5rem] sm:[--workspace-header-offset:8.75rem] lg:[--workspace-header-offset:4.5rem]";
+const PUBLIC_SHELL_METRICS_CLASS = "[--workspace-header-offset:5rem]";
+
 export default function DefaultLayout({
   children,
   metadata,
@@ -19,7 +23,12 @@ export default function DefaultLayout({
   const isWorkspaceShell = variant === "workspace";
 
   return (
-    <main id="main-content" className="min-h-screen text-slate-900 dark:text-slate-100">
+    <main
+      id="main-content"
+      className={`min-h-screen overflow-x-hidden text-slate-900 dark:text-slate-100 ${
+        isWorkspaceShell ? WORKSPACE_SHELL_METRICS_CLASS : PUBLIC_SHELL_METRICS_CLASS
+      }`}
+    >
       <div className="fixed left-0 top-0 z-50 w-full">
         <Header
           sidebarOpen={sidebarOpen}
@@ -28,7 +37,7 @@ export default function DefaultLayout({
           variant={variant}
         />
       </div>
-      <div className="pt-[72px]">
+      <div className="pt-[var(--workspace-header-offset)]">
         {isWorkspaceShell && (
           <Sidebar
             sidebarOpen={sidebarOpen}
@@ -37,14 +46,14 @@ export default function DefaultLayout({
           />
         )}
         <div
-          className={`min-h-[calc(100vh-72px)] transition-[margin] duration-200 ${
-            isWorkspaceShell && sidebarOpen ? "lg:ml-[18rem]" : ""
+          className={`min-h-[calc(100vh_-_var(--workspace-header-offset))] min-w-0 transition-[margin] duration-200 ${
+            isWorkspaceShell && sidebarOpen ? "lg:ml-[var(--workspace-sidebar-width)]" : ""
           }`}
         >
           <div
             className={
               isWorkspaceShell
-                ? "px-4 py-6 md:px-8 md:py-8"
+                ? "mx-auto w-full max-w-[112rem] min-w-0 px-3 py-4 sm:px-4 md:px-5 md:py-5 xl:px-6"
                 : "mx-auto max-w-7xl px-6 py-8 md:px-8 md:py-10"
             }
           >
diff --git a/frontend/components/Sidebar/SidebarItem.tsx b/frontend/components/Sidebar/SidebarItem.tsx
index 8db8136..e8de30c 100644
--- a/frontend/components/Sidebar/SidebarItem.tsx
+++ b/frontend/components/Sidebar/SidebarItem.tsx
@@ -1,14 +1,20 @@
-import type { WorkspaceNavItem } from "@/utils/workspace";
+import type { WorkspaceNavItem, WorkspaceNavMatchStrategy } from "@/utils/workspace";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import React from "react";
 
-function routeMatches(pathname: string, route: string, exactMatch = false) {
+const DEFAULT_NAV_MATCH_STRATEGY: WorkspaceNavMatchStrategy = "exact";
+
+function routeMatches(pathname: string, route: string, strategy: WorkspaceNavMatchStrategy) {
+  if (strategy === "none") {
+    return false;
+  }
+
   if (route === "/") {
     return pathname === route;
   }
 
-  if (exactMatch) {
+  if (strategy === "exact") {
     return pathname === route;
   }
 
@@ -18,8 +24,10 @@ function routeMatches(pathname: string, route: string, exactMatch = false) {
 const SidebarItem = ({ item }: { item: WorkspaceNavItem }) => {
   const pathname = usePathname();
   const isItemActive =
-    routeMatches(pathname, item.route, item.exactMatch) ||
-    (item.matchRoutes ?? []).some((route) => routeMatches(pathname, route));
+    routeMatches(pathname, item.route, item.matchStrategy ?? DEFAULT_NAV_MATCH_STRATEGY) ||
+    (item.matchRoutes ?? []).some((matchRoute) =>
+      routeMatches(pathname, matchRoute.route, matchRoute.strategy),
+    );
   const Icon = item.icon;
 
   return (
@@ -27,27 +35,27 @@ const SidebarItem = ({ item }: { item: WorkspaceNavItem }) => {
       <Link
         href={item.route}
         aria-current={isItemActive ? "page" : undefined}
-        className={`group flex items-start gap-3 rounded-[1.25rem] border px-3 py-3 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 ${
+        className={`group flex min-h-11 items-start gap-2 rounded-lg border px-2.5 py-2 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 ${
           isItemActive
             ? "border-teal-700 bg-teal-700 text-white shadow-sm"
             : "border-transparent bg-transparent text-slate-700 hover:border-stone-200 hover:bg-white/80 dark:text-slate-200 dark:hover:border-slate-700 dark:hover:bg-slate-900/70"
         }`}
       >
         <span
-          className={`mt-0.5 flex h-10 w-10 items-center justify-center rounded-xl border transition ${
+          className={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border transition ${
             isItemActive
               ? "border-white/20 bg-white/10 text-white"
               : "border-stone-200 bg-white text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200"
           }`}
         >
-          <Icon className="h-4.5 w-4.5" aria-hidden="true" />
+          <Icon className="h-4 w-4" aria-hidden="true" />
         </span>
         <span className="min-w-0 flex-1">
           <span className="flex items-center gap-2">
-            <span className="font-semibold">{item.label}</span>
+            <span className="text-sm font-semibold leading-5">{item.label}</span>
             {item.badge && (
               <span
-                className={`rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.16em] ${
+                className={`rounded-full px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] ${
                   isItemActive
                     ? "bg-white/10 text-white"
                     : "bg-stone-100 text-slate-500 dark:bg-slate-800 dark:text-slate-300"
@@ -58,7 +66,7 @@ const SidebarItem = ({ item }: { item: WorkspaceNavItem }) => {
             )}
           </span>
           <span
-            className={`mt-1 block text-xs leading-6 ${
+            className={`mt-0.5 block break-words text-[11px] leading-4 ${
               isItemActive ? "text-teal-50" : "text-slate-500 dark:text-slate-400"
             }`}
           >
diff --git a/frontend/components/Sidebar/index.tsx b/frontend/components/Sidebar/index.tsx
index 2123724..89f2fa7 100644
--- a/frontend/components/Sidebar/index.tsx
+++ b/frontend/components/Sidebar/index.tsx
@@ -40,19 +40,19 @@ const SidebarHoverCard = ({
     <div className="group/hover-card relative inline-flex">
       <button
         type="button"
-        className="inline-flex items-center rounded-full border border-stone-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-slate-700 transition hover:border-teal-200 hover:bg-teal-50/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:border-teal-800 dark:hover:bg-slate-900"
+        className="inline-flex min-h-7 items-center rounded-full border border-stone-200 bg-white px-2.5 py-1 text-[11px] font-semibold text-slate-700 transition hover:border-teal-200 hover:bg-teal-50/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200 dark:hover:border-teal-800 dark:hover:bg-slate-900"
       >
         <span>{triggerLabel}</span>
       </button>
 
       <div
-        className={`invisible absolute z-50 w-[16rem] scale-95 rounded-[1.25rem] border border-stone-200 bg-white/95 p-4 opacity-0 shadow-xl transition duration-200 group-hover/hover-card:visible group-hover/hover-card:scale-100 group-hover/hover-card:opacity-100 group-focus-within/hover-card:visible group-focus-within/hover-card:scale-100 group-focus-within/hover-card:opacity-100 dark:border-slate-700 dark:bg-slate-950/95 ${hoverCardPositionStyles[position]}`}
+        className={`invisible absolute z-50 w-[15rem] scale-95 rounded-lg border border-stone-200 bg-white/95 p-3 opacity-0 shadow-xl transition duration-200 group-hover/hover-card:visible group-hover/hover-card:scale-100 group-hover/hover-card:opacity-100 group-focus-within/hover-card:visible group-focus-within/hover-card:scale-100 group-focus-within/hover-card:opacity-100 dark:border-slate-700 dark:bg-slate-950/95 ${hoverCardPositionStyles[position]}`}
       >
         <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
           {eyebrow}
         </p>
-        <p className="mt-2 text-base font-semibold text-slate-900 dark:text-slate-50">{title}</p>
-        <p className="mt-2 text-sm leading-7 text-slate-600 dark:text-slate-300">{description}</p>
+        <p className="mt-2 text-sm font-semibold text-slate-900 dark:text-slate-50">{title}</p>
+        <p className="mt-2 text-xs leading-5 text-slate-600 dark:text-slate-300">{description}</p>
         {children ? <div className="mt-4">{children}</div> : null}
       </div>
     </div>
@@ -78,22 +78,22 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, exceptionRef }: SidebarProps) =>
 
       <aside
         id="sidebar"
-        className={`fixed left-0 top-[72px] z-40 flex h-[calc(100vh-72px)] w-[18rem] flex-col border-r border-stone-200 bg-stone-50/95 px-4 py-5 shadow-sm transition-transform duration-200 dark:border-slate-800 dark:bg-slate-950/90 ${
+        className={`fixed left-0 top-[var(--workspace-header-offset)] z-40 flex h-[calc(100vh_-_var(--workspace-header-offset))] w-[var(--workspace-sidebar-width)] flex-col border-r border-stone-200 bg-stone-50/95 px-3 py-3 shadow-sm transition-transform duration-200 dark:border-slate-800 dark:bg-slate-950/90 ${
           sidebarOpen ? "translate-x-0" : "-translate-x-full"
         }`}
       >
-        <div className="rounded-[1.25rem] border border-stone-200 bg-white/90 p-3 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
+        <div className="rounded-lg border border-stone-200 bg-white/90 p-2.5 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
           <p className="text-[10px] font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
             {roleConfig.workspaceTitle}
           </p>
           <div className="mt-2 flex items-center gap-2">
             <div className="min-w-0">
-              <h2 className="truncate text-[2rem] font-semibold leading-none text-slate-900 dark:text-slate-50">
+              <h2 className="truncate text-lg font-semibold leading-6 text-slate-900 dark:text-slate-50">
                 {roleConfig.label}
               </h2>
             </div>
           </div>
-          <div className="mt-3 flex flex-wrap gap-1.5">
+          <div className="mt-2.5 flex flex-wrap gap-1.5">
             <SidebarHoverCard
               description={roleConfig.publicPitch}
               eyebrow={roleConfig.workspaceTitle}
@@ -129,8 +129,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen, exceptionRef }: SidebarProps) =>
           </div>
         </div>
 
-        <nav aria-label={`${roleConfig.label} navigation`} className="mt-4 flex-1 overflow-y-auto">
-          <ul className="space-y-2">
+        <nav aria-label={`${roleConfig.label} navigation`} className="mt-3 flex-1 overflow-y-auto">
+          <ul className="space-y-1.5">
             {roleConfig.navigation.map((item) => (
               <SidebarItem key={`${roleConfig.key}-${item.label}`} item={item} />
             ))}
diff --git a/frontend/components/Workspace/WorkspaceGovernedIntelligencePanel.tsx b/frontend/components/Workspace/WorkspaceGovernedIntelligencePanel.tsx
index ee2ae69..e6aad23 100644
--- a/frontend/components/Workspace/WorkspaceGovernedIntelligencePanel.tsx
+++ b/frontend/components/Workspace/WorkspaceGovernedIntelligencePanel.tsx
@@ -112,7 +112,7 @@ const metricToneClass = (status: "visible" | "suppressed") =>
     : "border-emerald-200 bg-emerald-50 text-emerald-950 dark:border-emerald-900/60 dark:bg-emerald-950/20 dark:text-emerald-100";
 
 const StatusPill = ({ label }: { label: string }) => (
-  <span className="inline-flex rounded-full border border-stone-200 bg-white px-3 py-1 text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200">
+  <span className="inline-flex max-w-full break-words rounded-full border border-stone-200 bg-white px-3 py-1 text-left text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200">
     {label}
   </span>
 );
@@ -219,13 +219,13 @@ const WorkspaceGovernedIntelligencePanel = ({
     : "Learner scope required for risk";
 
   return (
-    <section className="rounded-[1.75rem] border border-stone-200 bg-white/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+    <section className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm md:p-5 dark:border-slate-700 dark:bg-slate-900/75">
       <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-        <div>
+        <div className="min-w-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-teal-700 dark:text-teal-300">
             P2/P3 governed status
           </p>
-          <h2 className="mt-3 text-2xl font-semibold text-slate-900 dark:text-slate-50">
+          <h2 className="mt-3 break-words text-xl font-semibold text-slate-900 dark:text-slate-50">
             School-unit intelligence and risk governance
           </h2>
           <p className="mt-2 text-sm leading-7 text-slate-600 dark:text-slate-300">
@@ -244,13 +244,13 @@ const WorkspaceGovernedIntelligencePanel = ({
       </div>
 
       {(loadError || isMockMode) && (
-        <div className="mt-5 rounded-[1.25rem] border border-amber-200 bg-amber-50/80 p-4 text-sm leading-7 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
+        <div className="mt-4 rounded-md border border-amber-200 bg-amber-50/80 p-3 text-sm leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
           {loadError || "Workspace access context is unavailable. Local pilot defaults are shown."}
         </div>
       )}
 
-      <div className={`mt-5 grid gap-4 ${canDraftCausalStudy ? "xl:grid-cols-3" : "xl:grid-cols-2"}`}>
-        <article className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-5 dark:border-slate-700 dark:bg-slate-950/60">
+      <div className={`mt-4 grid gap-3 ${canDraftCausalStudy ? "xl:grid-cols-3" : "lg:grid-cols-2"}`}>
+        <article className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
           <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-3">
               <FiActivity aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
@@ -284,7 +284,7 @@ const WorkspaceGovernedIntelligencePanel = ({
             {(schoolUnit?.metrics ?? []).slice(0, 3).map((metric) => (
               <div
                 key={metric.metric_id}
-                className={`rounded-[1rem] border px-3 py-2 text-xs font-medium ${metricToneClass(metric.status)}`}
+                className={`rounded-md border px-3 py-2 text-xs font-medium ${metricToneClass(metric.status)}`}
               >
                 {metric.label ?? humanizeIdentifier(metric.metric_id)} · {formatPercent(metric.value)} · n=
                 {metric.sample_count}
@@ -294,7 +294,7 @@ const WorkspaceGovernedIntelligencePanel = ({
         </article>
 
         {canDraftCausalStudy && (
-          <article className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-5 dark:border-slate-700 dark:bg-slate-950/60">
+          <article className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
             <div className="flex items-center justify-between gap-3">
               <div className="flex items-center gap-3">
                 <FiZap aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
@@ -334,14 +334,14 @@ const WorkspaceGovernedIntelligencePanel = ({
               {isCausalLoading ? "Drafting study" : "Draft causal study"}
             </button>
             {causalError && (
-              <p className="mt-3 rounded-[1rem] border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
+              <p className="mt-3 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
                 {causalError}
               </p>
             )}
           </article>
         )}
 
-        <article className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-5 dark:border-slate-700 dark:bg-slate-950/60">
+        <article className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
           <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-3">
               <FiShield aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
@@ -352,7 +352,7 @@ const WorkspaceGovernedIntelligencePanel = ({
             <StatusPill label={scopedContext.learnerId ? governanceLabel(conformalRisk) : "Learner scope required"} />
           </div>
           {!scopedContext.learnerId && (
-            <p className="mt-4 rounded-[1rem] border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
+            <p className="mt-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
               Conformal risk was not requested because this leader context has no explicit learner membership.
             </p>
           )}
diff --git a/frontend/components/Workspace/WorkspaceHome.tsx b/frontend/components/Workspace/WorkspaceHome.tsx
index 6b4ab9f..b076c54 100644
--- a/frontend/components/Workspace/WorkspaceHome.tsx
+++ b/frontend/components/Workspace/WorkspaceHome.tsx
@@ -88,31 +88,31 @@ function SnapshotSection({
   title: string;
 }) {
   return (
-    <article className="rounded-[1.75rem] border border-stone-200 bg-white/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
-      <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-50">{title}</h2>
+    <article className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm md:p-5 dark:border-slate-700 dark:bg-slate-900/75">
+      <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-50">{title}</h2>
       <p className="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">{description}</p>
 
       {loading && (
-        <div className="mt-5 rounded-[1.25rem] border border-dashed border-stone-200 bg-stone-50/80 p-4 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-400">
+        <div className="mt-4 rounded-md border border-dashed border-stone-200 bg-stone-50/80 p-3 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-400">
           Loading the latest section projection...
         </div>
       )}
 
       {!loading && items.length === 0 && (
-        <div className="mt-5 rounded-[1.25rem] border border-dashed border-stone-200 bg-stone-50/80 p-4 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-400">
+        <div className="mt-4 rounded-md border border-dashed border-stone-200 bg-stone-50/80 p-3 text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/60 dark:text-slate-400">
           {emptyText}
         </div>
       )}
 
       {items.length > 0 && (
-        <div className="mt-5 space-y-4">
+        <div className="mt-4 space-y-3">
           {items.map((item) => (
             <Link
               key={item.item_id}
               href={item.deep_link.href}
-              className="block rounded-[1.25rem] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2"
+              className="block rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2"
             >
-              <div className={`rounded-[1.25rem] border p-4 ${toneStyles[item.tone]}`}>
+              <div className={`rounded-md border p-3 ${toneStyles[item.tone]}`}>
                 <div className="flex flex-wrap items-center gap-3">
                   <p className="text-[11px] font-semibold uppercase tracking-[0.22em] opacity-75">
                     {item.deep_link.label}
@@ -121,8 +121,8 @@ function SnapshotSection({
                     <span className="text-sm font-semibold opacity-90">{item.metric}</span>
                   )}
                 </div>
-                <p className="mt-2 text-lg font-semibold">{item.title}</p>
-                <p className="mt-2 text-sm leading-7 opacity-90">{item.summary}</p>
+                <p className="mt-2 text-base font-semibold">{item.title}</p>
+                <p className="mt-2 text-sm leading-6 opacity-90">{item.summary}</p>
               </div>
             </Link>
           ))}
@@ -261,11 +261,11 @@ const WorkspaceHome = () => {
   if (isLoading) {
     return (
       <div className="space-y-6">
-        <section className="rounded-[2rem] border border-stone-200 bg-white/90 p-6 shadow-sm md:p-8">
+        <section className="rounded-lg border border-stone-200 bg-white/90 p-5 shadow-sm md:p-6">
           <p className="text-xs font-semibold uppercase tracking-[0.3em] text-teal-700">
             {roleConfig.workspaceTitle}
           </p>
-          <h1 className="mt-4 text-4xl font-semibold text-slate-900 md:text-5xl dark:text-slate-50">
+          <h1 className="mt-4 break-words text-3xl font-semibold text-slate-900 md:text-4xl dark:text-slate-50">
             Resolving your workspace access
           </h1>
           <p className="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">
@@ -279,12 +279,12 @@ const WorkspaceHome = () => {
 
   if (isMockMode) {
     return (
-      <div className="space-y-8">
-        <section className="rounded-[2rem] border border-amber-200 bg-amber-50/80 p-6 shadow-sm md:p-8 dark:border-amber-900/60 dark:bg-amber-950/20">
+      <div className="space-y-6">
+        <section className="rounded-lg border border-amber-200 bg-amber-50/80 p-5 shadow-sm md:p-6 dark:border-amber-900/60 dark:bg-amber-950/20">
           <p className="text-xs font-semibold uppercase tracking-[0.3em] text-amber-900 dark:text-amber-200">
             Fallback workspace shell
           </p>
-          <h1 className="mt-4 text-4xl font-semibold leading-tight text-slate-900 md:text-5xl dark:text-slate-50">
+          <h1 className="mt-4 break-words text-3xl font-semibold leading-tight text-slate-900 md:text-4xl dark:text-slate-50">
             Backend access context is unavailable right now.
           </h1>
           <p className="mt-4 text-lg leading-8 text-slate-700 dark:text-slate-200">
@@ -292,18 +292,18 @@ const WorkspaceHome = () => {
             temporarily using the local fallback configuration.
           </p>
           {error && (
-            <p className="mt-4 rounded-[1.25rem] border border-amber-300 bg-white/80 p-4 text-sm leading-7 text-amber-950 dark:border-amber-900/60 dark:bg-slate-950/70 dark:text-amber-100">
+            <p className="mt-4 rounded-md border border-amber-300 bg-white/80 p-3 text-sm leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-slate-950/70 dark:text-amber-100">
               {error}
             </p>
           )}
         </section>
 
-        <section className="grid gap-4 md:grid-cols-3">
+        <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
           {recommendedLinks.map((item) => (
             <Link
               key={item.key}
               href={item.route}
-              className="rounded-[1.5rem] border border-stone-200 bg-white/90 p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-900/75"
+              className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-900/75"
             >
               <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                 {item.label}
@@ -322,14 +322,14 @@ const WorkspaceHome = () => {
   const timeline = timelineState.data;
 
   return (
-    <div className="space-y-8">
-      <section className="rounded-[2rem] border border-stone-200 bg-white/90 p-6 shadow-sm md:p-8">
+    <div className="space-y-6">
+      <section className="rounded-lg border border-stone-200 bg-white/90 p-5 shadow-sm md:p-6">
         <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-          <div className="max-w-3xl">
+          <div className="min-w-0 flex-1">
             <p className="text-xs font-semibold uppercase tracking-[0.3em] text-teal-700">
               {roleConfig.workspaceTitle}
             </p>
-            <h1 className="mt-4 text-4xl font-semibold leading-tight text-slate-900 md:text-5xl dark:text-slate-50">
+            <h1 className="mt-4 break-words text-3xl font-semibold leading-tight text-slate-900 md:text-4xl dark:text-slate-50">
               {snapshot?.summary || roleConfig.publicPitch}
             </h1>
             <p className="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">
@@ -350,11 +350,11 @@ const WorkspaceHome = () => {
             </div>
           </div>
 
-          <aside className="w-full max-w-md rounded-[1.5rem] border border-stone-200 bg-stone-50/90 p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
+          <aside className="w-full min-w-0 rounded-lg border border-stone-200 bg-stone-50/90 p-4 shadow-sm lg:w-80 lg:flex-none dark:border-slate-700 dark:bg-slate-900/70">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
               Current context
             </p>
-            <h2 className="mt-3 text-2xl font-semibold text-slate-900 dark:text-slate-50">
+            <h2 className="mt-3 text-xl font-semibold text-slate-900 dark:text-slate-50">
               {snapshot?.context_label || currentContext.label}
             </h2>
             <p className="mt-1 text-sm font-medium text-slate-600 dark:text-slate-300">
@@ -364,7 +364,7 @@ const WorkspaceHome = () => {
               {currentContext.note}
             </p>
             {actor && (
-              <div className="mt-4 rounded-[1.25rem] border border-stone-200 bg-white/90 p-4 dark:border-slate-700 dark:bg-slate-950/70">
+              <div className="mt-4 rounded-md border border-stone-200 bg-white/90 p-3 dark:border-slate-700 dark:bg-slate-950/70">
                 <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
                   Active actor
                 </p>
@@ -380,14 +380,14 @@ const WorkspaceHome = () => {
         </div>
 
         {snapshotState.error && (
-          <div className="mt-6 rounded-[1.25rem] border border-rose-200 bg-rose-50/80 p-4 text-sm leading-7 text-rose-900 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-100">
+          <div className="mt-5 rounded-md border border-rose-200 bg-rose-50/80 p-3 text-sm leading-6 text-rose-900 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-100">
             {snapshotState.error}
           </div>
         )}
       </section>
 
-      <section className="grid gap-4 md:grid-cols-3">
-        <article className="rounded-[1.5rem] border border-stone-200 bg-white/85 p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+      <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        <article className="rounded-lg border border-stone-200 bg-white/85 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
           <p className="text-sm font-medium text-slate-500 dark:text-slate-400">Freshness</p>
           {snapshot?.freshness ? (
             <>
@@ -418,7 +418,7 @@ const WorkspaceHome = () => {
           )}
         </article>
 
-        <article className="rounded-[1.5rem] border border-stone-200 bg-white/85 p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+        <article className="rounded-lg border border-stone-200 bg-white/85 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
           <p className="text-sm font-medium text-slate-500 dark:text-slate-400">Human review</p>
           {snapshot?.trust ? (
             <>
@@ -436,7 +436,7 @@ const WorkspaceHome = () => {
           )}
         </article>
 
-        <article className="rounded-[1.5rem] border border-stone-200 bg-white/85 p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+        <article className="rounded-lg border border-stone-200 bg-white/85 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
           <p className="text-sm font-medium text-slate-500 dark:text-slate-400">Provenance</p>
           {snapshot?.trust ? (
             <>
@@ -461,8 +461,8 @@ const WorkspaceHome = () => {
         </article>
       </section>
 
-      <section className="grid gap-6 xl:grid-cols-[minmax(0,1.5fr)_minmax(18rem,22rem)]">
-        <div className="space-y-6">
+      <section className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_minmax(16rem,20rem)]">
+        <div className="min-w-0 space-y-5">
           <SnapshotSection
             title="Deterministic highlights"
             description="These items come directly from the backend workspace snapshot and should remain inspectable even when advisory layers change."
@@ -486,8 +486,8 @@ const WorkspaceHome = () => {
           />
         </div>
 
-        <aside className="space-y-4">
-          <section className="rounded-[1.75rem] border border-stone-200 bg-white/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+        <aside className="min-w-0 space-y-4">
+          <section className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
               Trust and governance
             </p>
@@ -519,7 +519,7 @@ const WorkspaceHome = () => {
                   </p>
                 </div>
                 {snapshot.trust.degraded && (
-                  <div className="rounded-[1.25rem] border border-amber-200 bg-amber-50/80 p-4 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-100">
+                  <div className="rounded-md border border-amber-200 bg-amber-50/80 p-3 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-100">
                     This snapshot includes degraded output. Tutor is surfacing the condition
                     explicitly instead of masking it.
                   </div>
@@ -533,7 +533,7 @@ const WorkspaceHome = () => {
           </section>
 
           {timelineLearnerId && (
-            <section className="rounded-[1.75rem] border border-stone-200 bg-stone-50/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
+            <section className="rounded-lg border border-stone-200 bg-stone-50/90 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/80">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
                 Learner record preview
               </p>
@@ -549,7 +549,7 @@ const WorkspaceHome = () => {
               )}
 
               {timelineState.error && (
-                <p className="mt-4 rounded-[1.25rem] border border-rose-200 bg-rose-50/80 p-4 text-sm leading-7 text-rose-900 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-100">
+                <p className="mt-4 rounded-md border border-rose-200 bg-rose-50/80 p-3 text-sm leading-6 text-rose-900 dark:border-rose-900/60 dark:bg-rose-950/20 dark:text-rose-100">
                   {timelineState.error}
                 </p>
               )}
@@ -566,10 +566,10 @@ const WorkspaceHome = () => {
                     <Link
                       key={entry.record_id}
                       href={entry.deep_link.href}
-                      className="block rounded-[1.25rem] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2"
+                      className="block rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2"
                     >
                       <div
-                        className={`rounded-[1.25rem] border p-4 ${timelineStatusStyles[entry.status]}`}
+                        className={`rounded-md border p-3 ${timelineStatusStyles[entry.status]}`}
                       >
                         <div className="flex flex-wrap items-center gap-3">
                           <p className="text-sm font-semibold">{entry.title}</p>
@@ -590,7 +590,7 @@ const WorkspaceHome = () => {
             </section>
           )}
 
-          <section className="rounded-[1.75rem] border border-stone-200 bg-white/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+          <section className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
               Continue exploring
             </p>
@@ -599,14 +599,14 @@ const WorkspaceHome = () => {
                 <Link
                   key={item.key}
                   href={item.route}
-                  className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-slate-900 transition hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
+                  className="rounded-lg border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-slate-900 transition hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
                 >
                   {item.label}
                 </Link>
               ))}
               <Link
                 href="/evidence-trust"
-                className="rounded-xl border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-slate-900 transition hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
+                className="rounded-lg border border-stone-200 bg-white px-4 py-3 text-sm font-medium text-slate-900 transition hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-50"
               >
                 Evidence and Trust
               </Link>
diff --git a/frontend/components/Workspace/WorkspaceLifelongNetworkPanel.tsx b/frontend/components/Workspace/WorkspaceLifelongNetworkPanel.tsx
index 18b00cf..d63f0c3 100644
--- a/frontend/components/Workspace/WorkspaceLifelongNetworkPanel.tsx
+++ b/frontend/components/Workspace/WorkspaceLifelongNetworkPanel.tsx
@@ -49,7 +49,7 @@ const CountCard = ({
   value: string | number;
   detail: string;
 }) => (
-  <div className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
+  <div className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-3 dark:border-slate-700 dark:bg-slate-950/60">
     <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">
       {label}
     </dt>
@@ -59,7 +59,7 @@ const CountCard = ({
 );
 
 const StatusPill = ({ label }: { label: string }) => (
-  <span className="inline-flex rounded-full border border-stone-200 bg-white px-3 py-1 text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200">
+  <span className="inline-flex max-w-full break-words rounded-full border border-stone-200 bg-white px-3 py-1 text-left text-xs font-semibold text-slate-700 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-200">
     {label}
   </span>
 );
@@ -141,13 +141,13 @@ const WorkspaceLifelongNetworkPanel = () => {
   const publicationStatus = network?.publication_approvals[0]?.status ?? "review_required";
 
   return (
-    <section className="rounded-[1.75rem] border border-stone-200 bg-white/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
+    <section className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm md:p-5 dark:border-slate-700 dark:bg-slate-900/75">
       <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
-        <div>
+        <div className="min-w-0">
           <p className="text-xs font-semibold uppercase tracking-[0.24em] text-teal-700 dark:text-teal-300">
             P3 lifelong network
           </p>
-          <h2 className="mt-3 text-2xl font-semibold text-slate-900 dark:text-slate-50">
+          <h2 className="mt-3 break-words text-xl font-semibold text-slate-900 dark:text-slate-50">
             Credentials, portfolio, re-entry, and research governance
           </h2>
           <p className="mt-2 text-sm leading-7 text-slate-600 dark:text-slate-300">
@@ -166,12 +166,12 @@ const WorkspaceLifelongNetworkPanel = () => {
       </div>
 
       {(loadError || isMockMode) && (
-        <div className="mt-5 rounded-[1.25rem] border border-amber-200 bg-amber-50/80 p-4 text-sm leading-7 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
+        <div className="mt-4 rounded-md border border-amber-200 bg-amber-50/80 p-3 text-sm leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
           {loadError || "Workspace access context is unavailable. Local pilot defaults are shown."}
         </div>
       )}
 
-      <dl className="mt-5 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+      <dl className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
         <CountCard
           label="Credentials"
           value={network?.credentials.length ?? 0}
@@ -194,8 +194,8 @@ const WorkspaceLifelongNetworkPanel = () => {
         />
       </dl>
 
-      <div className="mt-5 grid gap-4 lg:grid-cols-3">
-        <article className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-5 dark:border-slate-700 dark:bg-slate-950/60">
+      <div className="mt-4 grid gap-3 xl:grid-cols-3">
+        <article className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
           <div className="flex items-center gap-3">
             <FiAward aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
             <h3 className="text-base font-semibold text-slate-900 dark:text-slate-50">
@@ -209,7 +209,7 @@ const WorkspaceLifelongNetworkPanel = () => {
           </div>
         </article>
 
-        <article className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-5 dark:border-slate-700 dark:bg-slate-950/60">
+        <article className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
           <div className="flex items-center gap-3">
             <FiBriefcase aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
             <h3 className="text-base font-semibold text-slate-900 dark:text-slate-50">
@@ -223,7 +223,7 @@ const WorkspaceLifelongNetworkPanel = () => {
           </div>
         </article>
 
-        <article className="rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-5 dark:border-slate-700 dark:bg-slate-950/60">
+        <article className="min-w-0 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
           <div className="flex items-center gap-3">
             <FiShield aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
             <h3 className="text-base font-semibold text-slate-900 dark:text-slate-50">
@@ -238,7 +238,7 @@ const WorkspaceLifelongNetworkPanel = () => {
         </article>
       </div>
 
-      <div className="mt-5 rounded-[1.25rem] border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
+      <div className="mt-4 rounded-md border border-stone-200 bg-stone-50/80 p-4 dark:border-slate-700 dark:bg-slate-950/60">
         <div className="flex items-center gap-3">
           <FiDatabase aria-hidden="true" className="text-xl text-teal-700 dark:text-teal-300" />
           <p className="text-sm font-semibold text-slate-900 dark:text-slate-50">
diff --git a/frontend/components/Workspace/WorkspaceModulePage.tsx b/frontend/components/Workspace/WorkspaceModulePage.tsx
index 158ac7f..233848e 100644
--- a/frontend/components/Workspace/WorkspaceModulePage.tsx
+++ b/frontend/components/Workspace/WorkspaceModulePage.tsx
@@ -33,14 +33,14 @@ const WorkspaceModulePage = ({
     roleConfig.key === workspaceRole ? roleConfig : getRoleConfig(workspaceRole);
 
   return (
-    <div className="space-y-8">
-      <section className="rounded-[2rem] border border-stone-200 bg-white/90 p-6 shadow-sm md:p-8">
+    <div className="space-y-6">
+      <section className="rounded-lg border border-stone-200 bg-white/90 p-5 shadow-sm md:p-6">
         <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
-          <div className="max-w-3xl">
+          <div className="min-w-0 flex-1">
             <p className="text-xs font-semibold uppercase tracking-[0.3em] text-teal-700">
               {eyebrow}
             </p>
-            <h1 className="mt-4 text-4xl font-semibold leading-tight text-slate-900 md:text-5xl dark:text-slate-50">
+            <h1 className="mt-4 break-words text-3xl font-semibold leading-tight text-slate-900 md:text-4xl dark:text-slate-50">
               {title}
             </h1>
             <p className="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">
@@ -48,11 +48,11 @@ const WorkspaceModulePage = ({
             </p>
           </div>
 
-          <aside className="w-full max-w-md rounded-[1.5rem] border border-stone-200 bg-stone-50/90 p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
+          <aside className="w-full min-w-0 rounded-lg border border-stone-200 bg-stone-50/90 p-4 shadow-sm lg:w-80 lg:flex-none dark:border-slate-700 dark:bg-slate-900/70">
             <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
               Current context
             </p>
-            <h2 className="mt-3 text-2xl font-semibold text-slate-900 dark:text-slate-50">
+            <h2 className="mt-3 text-xl font-semibold text-slate-900 dark:text-slate-50">
               {currentContext.label}
             </h2>
             <p className="mt-1 text-sm font-medium text-slate-600 dark:text-slate-300">
@@ -61,7 +61,7 @@ const WorkspaceModulePage = ({
             <p className="mt-4 text-sm leading-7 text-slate-600 dark:text-slate-300">
               {currentContext.note}
             </p>
-            <div className="mt-4 rounded-[1.25rem] border border-stone-200 bg-white/90 p-4 dark:border-slate-700 dark:bg-slate-950/70">
+            <div className="mt-4 rounded-md border border-stone-200 bg-white/90 p-3 dark:border-slate-700 dark:bg-slate-950/70">
               <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-slate-500 dark:text-slate-400">
                 Trust note
               </p>
@@ -74,18 +74,18 @@ const WorkspaceModulePage = ({
       </section>
 
       {!isLoading && isMockMode && (
-        <div className="rounded-[1.5rem] border border-amber-200 bg-amber-50/80 p-4 text-sm leading-7 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
+        <div className="rounded-lg border border-amber-200 bg-amber-50/80 p-4 text-sm leading-6 text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/20 dark:text-amber-100">
           This route is still available while the backend access context is unavailable. Links below
           continue to target the existing working pages.
         </div>
       )}
 
-      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+      <section className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         {links.map((link) => (
           <Link
             key={link.href}
             href={link.href}
-            className={`rounded-[1.5rem] border p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 ${
+            className={`rounded-lg border p-4 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 ${
               link.kind === "primary"
                 ? "border-teal-700 bg-teal-700 text-white"
                 : "border-stone-200 bg-white/90 text-slate-900 dark:border-slate-700 dark:bg-slate-900/75 dark:text-slate-50"
@@ -101,15 +101,15 @@ const WorkspaceModulePage = ({
         ))}
       </section>
 
-      <section className="rounded-[1.75rem] border border-stone-200 bg-white/90 p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/75">
-        <h2 className="text-2xl font-semibold text-slate-900 dark:text-slate-50">
+      <section className="rounded-lg border border-stone-200 bg-white/90 p-4 shadow-sm md:p-5 dark:border-slate-700 dark:bg-slate-900/75">
+        <h2 className="text-xl font-semibold text-slate-900 dark:text-slate-50">
           How this route works
         </h2>
-        <div className="mt-5 grid gap-4 md:grid-cols-3">
+        <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
           {notes.map((note) => (
             <div
               key={note}
-              className="rounded-[1.25rem] border border-stone-200 bg-stone-50/90 p-4 text-sm leading-7 text-slate-600 dark:border-slate-700 dark:bg-slate-950/70 dark:text-slate-300"
+              className="rounded-md border border-stone-200 bg-stone-50/90 p-3 text-sm leading-6 text-slate-600 dark:border-slate-700 dark:bg-slate-950/70 dark:text-slate-300"
             >
               {note}
             </div>
diff --git a/frontend/css/style.css b/frontend/css/style.css
index 2ece0ef..a72b6b8 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -6,7 +6,7 @@
 
 @layer base {
   body {
-    @apply relative z-1 bg-whiten font-satoshi text-base font-normal text-body;
+    @apply relative z-1 bg-slate-50 text-base font-normal text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100;
   }
 }
 
diff --git a/frontend/e2e/route-shells.spec.ts b/frontend/e2e/route-shells.spec.ts
index d75ed22..bdae8f8 100644
--- a/frontend/e2e/route-shells.spec.ts
+++ b/frontend/e2e/route-shells.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, test, type Page } from "@playwright/test";
 
 interface RouteSmokeCase {
   heading: RegExp;
@@ -53,6 +53,69 @@ const ROUTE_SMOKE_CASES = [
   },
 ] as const satisfies readonly RouteSmokeCase[];
 
+const ADMIN_NAV_ACTIVE_CASES = [
+  {
+    activeLabel: "Configuration",
+    path: "/configuration",
+  },
+  {
+    activeLabel: "Avatar cases",
+    path: "/configuration/cases",
+  },
+  {
+    activeLabel: "Policies",
+    path: "/configuration/questions",
+  },
+  {
+    activeLabel: "Integrations",
+    path: "/lms-gateway",
+  },
+  {
+    activeLabel: "AI governance",
+    path: "/workspace/admin/ai-governance",
+  },
+] as const;
+
+const WORKSPACE_REFLOW_CASES = [
+  {
+    path: "/configuration/cases",
+    role: "admin",
+  },
+  {
+    path: "/workspace/supervisor/briefings",
+  },
+  {
+    path: "/workspace/alumni/record",
+  },
+] as const;
+
+const WORKSPACE_REFLOW_VIEWPORTS = [
+  {
+    height: 844,
+    name: "mobile",
+    width: 390,
+  },
+  {
+    height: 1024,
+    name: "tablet",
+    width: 768,
+  },
+] as const;
+
+const expectNoHorizontalOverflow = async (page: Page) => {
+  await expect
+    .poll(async () =>
+      page.evaluate(() => document.documentElement.scrollWidth - document.documentElement.clientWidth),
+    )
+    .toBeLessThanOrEqual(1);
+};
+
+const setWorkspaceRole = async (page: Page, role: string) => {
+  await page.addInitScript((workspaceRole) => {
+    window.localStorage.setItem("tutor.workspace.role", JSON.stringify(workspaceRole));
+  }, role);
+};
+
 test.describe("modern route shells", () => {
   for (const smokeCase of ROUTE_SMOKE_CASES) {
     test(`${smokeCase.path} renders without live backend services`, async ({ page }) => {
@@ -66,3 +129,39 @@ test.describe("modern route shells", () => {
     });
   }
 });
+
+test.describe("admin sidebar navigation", () => {
+  test.beforeEach(async ({ page }) => {
+    await setWorkspaceRole(page, "admin");
+  });
+
+  for (const navCase of ADMIN_NAV_ACTIVE_CASES) {
+    test(`${navCase.path} marks exactly one admin sidebar item active`, async ({ page }) => {
+      await page.goto(navCase.path);
+
+      await expect(page.locator("#main-content")).toBeVisible();
+
+      const activeSidebarLinks = page.locator('#sidebar nav a[aria-current="page"]');
+      await expect(activeSidebarLinks).toHaveCount(1);
+      await expect(activeSidebarLinks).toContainText(navCase.activeLabel);
+    });
+  }
+});
+
+test.describe("workspace shell reflow", () => {
+  for (const viewport of WORKSPACE_REFLOW_VIEWPORTS) {
+    for (const reflowCase of WORKSPACE_REFLOW_CASES) {
+      test(`${reflowCase.path} has no horizontal overflow on ${viewport.name}`, async ({ page }) => {
+        await page.setViewportSize({ width: viewport.width, height: viewport.height });
+        if ("role" in reflowCase) {
+          await setWorkspaceRole(page, reflowCase.role);
+        }
+
+        await page.goto(reflowCase.path);
+
+        await expect(page.locator("#main-content")).toBeVisible();
+        await expectNoHorizontalOverflow(page);
+      });
+    }
+  }
+});
diff --git a/frontend/utils/workspace.ts b/frontend/utils/workspace.ts
index 30acd66..a7a3a53 100644
--- a/frontend/utils/workspace.ts
+++ b/frontend/utils/workspace.ts
@@ -32,6 +32,13 @@ export const WORKSPACE_ROLES = [
 
 export type WorkspaceRole = (typeof WORKSPACE_ROLES)[number];
 
+export type WorkspaceNavMatchStrategy = "exact" | "prefix" | "none";
+
+export interface WorkspaceNavRouteMatch {
+  route: string;
+  strategy: Exclude<WorkspaceNavMatchStrategy, "none">;
+}
+
 export interface WorkspaceContextOption {
   id: string;
   label: string;
@@ -51,8 +58,8 @@ export interface WorkspaceNavItem {
   description: string;
   icon: IconType;
   badge?: string;
-  exactMatch?: boolean;
-  matchRoutes?: string[];
+  matchStrategy?: WorkspaceNavMatchStrategy;
+  matchRoutes?: WorkspaceNavRouteMatch[];
 }
 
 export interface WorkspaceStat {
@@ -162,27 +169,34 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/student",
         description: "Current priorities, evidence, and next actions.",
         icon: FiHome,
-        exactMatch: true,
+        matchStrategy: "exact",
       },
       {
         label: "Learning",
         route: "/workspace/student/learning",
         description: "Guided coaching, live practice, and supported study.",
         icon: FiBookOpen,
-        matchRoutes: ["/avatar", "/chat"],
+        matchRoutes: [
+          { route: "/avatar", strategy: "prefix" },
+          { route: "/chat", strategy: "prefix" },
+        ],
       },
       {
         label: "Assignments",
         route: "/workspace/student/assignments",
         description: "Essay, revision, and question work in one queue.",
         icon: FiClipboard,
-        matchRoutes: ["/essays", "/questions"],
+        matchRoutes: [
+          { route: "/essays", strategy: "prefix" },
+          { route: "/questions", strategy: "prefix" },
+        ],
       },
       {
         label: "Progress",
         route: "/workspace/student",
         description: "Competency movement, evidence, and milestones.",
         icon: FiTrendingUp,
+        matchStrategy: "none",
       },
       {
         label: "Credentials",
@@ -346,24 +360,28 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/professor",
         description: "Section health, review pressure, and next actions.",
         icon: FiHome,
-        exactMatch: true,
+        matchStrategy: "exact",
       },
       {
         label: "Review",
         route: "/workspace/professor/review",
         description: "Essay and question work needing faculty attention.",
         icon: FiFileText,
-        matchRoutes: ["/essays", "/questions"],
+        matchRoutes: [
+          { route: "/essays", strategy: "prefix" },
+          { route: "/questions", strategy: "prefix" },
+        ],
       },
       {
         label: "Content",
         route: "/configuration",
         description: "Program setup, rubric inputs, and content controls.",
         icon: FiLayers,
+        matchStrategy: "exact",
         matchRoutes: [
-          "/configuration/questions",
-          "/configuration/questions/answers",
-          "/configuration/questions/graders",
+          { route: "/configuration/questions", strategy: "exact" },
+          { route: "/configuration/questions/answers", strategy: "exact" },
+          { route: "/configuration/questions/graders", strategy: "exact" },
         ],
       },
       {
@@ -371,19 +389,21 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/professor",
         description: "Progress and risk framing for the active section.",
         icon: FiBarChart2,
+        matchStrategy: "none",
       },
       {
         label: "Interventions",
         route: "/workspace/professor",
         description: "Faculty-owned next steps and learner follow-through.",
         icon: FiFlag,
+        matchStrategy: "none",
       },
       {
         label: "Teaching plans",
         route: "/workspace/professor/teaching-plans",
         description: "Structured teaching-plan analysis and iteration.",
         icon: FiCompass,
-        matchRoutes: ["/upskilling"],
+        matchRoutes: [{ route: "/upskilling", strategy: "prefix" }],
       },
     ],
     hero: {
@@ -535,26 +555,28 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/principal",
         description: "School health, interventions, and briefings.",
         icon: FiHome,
-        exactMatch: true,
+        matchStrategy: "exact",
       },
       {
         label: "School health",
         route: "/workspace/principal/school-health",
         description: "Current school indicators and briefing inputs.",
         icon: FiActivity,
-        matchRoutes: ["/configuration/supervisor"],
+        matchRoutes: [{ route: "/configuration/supervisor", strategy: "prefix" }],
       },
       {
         label: "Programs",
         route: "/workspace/principal",
         description: "Program-level milestones and performance framing.",
         icon: FiLayers,
+        matchStrategy: "none",
       },
       {
         label: "Interventions",
         route: "/workspace/principal",
         description: "Priority watchlist and follow-through.",
         icon: FiFlag,
+        matchStrategy: "none",
       },
       {
         label: "Staff development",
@@ -704,38 +726,41 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/supervisor",
         description: "Network summary, visit prep, and current alerts.",
         icon: FiHome,
-        exactMatch: true,
+        matchStrategy: "exact",
       },
       {
         label: "Schools",
         route: "/configuration/supervisor",
         description: "School-scoped briefings and profiles.",
         icon: FiGlobe,
+        matchStrategy: "prefix",
       },
       {
         label: "Briefings",
         route: "/workspace/supervisor/briefings",
         description: "Narrative briefings layered over read models.",
         icon: FiFileText,
-        matchRoutes: ["/configuration/supervisor"],
       },
       {
         label: "Visits",
         route: "/workspace/supervisor",
         description: "Preparation cues and open visit tasks.",
         icon: FiBriefcase,
+        matchStrategy: "none",
       },
       {
         label: "Trends",
         route: "/workspace/supervisor",
         description: "Network-level movement and watch areas.",
         icon: FiTrendingUp,
+        matchStrategy: "none",
       },
       {
         label: "Alerts",
         route: "/workspace/supervisor",
         description: "Escalations, sync delays, and validation needs.",
         icon: FiFlag,
+        matchStrategy: "none",
       },
     ],
     hero: {
@@ -854,7 +879,7 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
     shortLabel: "Admin",
     workspaceTitle: "Admin workspace",
     publicPitch:
-      "An operations shell for programs, users, integrations, audit posture, and AI governance visibility.",
+      "An operations shell for Configuration, Avatar cases, Integrations, Policies, and AI governance.",
     contextLabel: "Tenant and environment",
     trustLabel:
       "The admin slice surfaces policy, evaluation, and degraded-state signals as operational concerns, not hidden implementation details.",
@@ -880,38 +905,48 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/admin",
         description: "Operational posture, incidents, and pending admin action.",
         icon: FiHome,
-        exactMatch: true,
+        matchStrategy: "exact",
       },
       {
-        label: "Programs",
+        label: "Configuration",
         route: "/configuration",
-        description: "Program and platform configuration surfaces.",
+        description: "Content, policy, integration, and admin utility hub.",
         icon: FiLayers,
+        matchStrategy: "exact",
       },
       {
-        label: "Users",
+        label: "Avatar cases",
         route: "/configuration/cases",
-        description: "Access and workflow-adjacent setup.",
-        icon: FiUsers,
+        description: "Practice scenarios, avatar profiles, and case steps.",
+        icon: FiMessageSquare,
+        matchStrategy: "exact",
       },
       {
         label: "Integrations",
-        route: "/lms-gateway",
+        route: "/configuration/lms-gateway",
         description: "Gateway operations and sync posture.",
         icon: FiDatabase,
+        matchStrategy: "exact",
+        matchRoutes: [{ route: "/lms-gateway", strategy: "exact" }],
       },
       {
         label: "Policies",
         route: "/configuration/questions",
         description: "Question, grading, and rules configuration.",
         icon: FiSettings,
+        matchStrategy: "exact",
+        matchRoutes: [
+          { route: "/configuration/questions/answers", strategy: "exact" },
+          { route: "/configuration/questions/graders", strategy: "exact" },
+        ],
       },
       {
         label: "AI governance",
         route: "/workspace/admin/ai-governance",
         description: "Evaluation coverage and degraded-state visibility.",
         icon: FiShield,
-        matchRoutes: ["/evaluation"],
+        matchStrategy: "exact",
+        matchRoutes: [{ route: "/evaluation", strategy: "prefix" }],
       },
     ],
     hero: {
@@ -1006,7 +1041,7 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
       {
         title: "Platform direction",
         description:
-          "This shell previews how admin work will eventually include program, user, integration, policy, and audit domains.",
+          "This shell keeps admin work aligned to the available surfaces: Configuration, Avatar cases, Integrations, Policies, and AI governance.",
         items: [
           {
             eyebrow: "Deterministic",
@@ -1057,7 +1092,7 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/workspace/alumni",
         description: "Record, pathways, and re-engagement cues.",
         icon: FiHome,
-        exactMatch: true,
+        matchStrategy: "exact",
       },
       {
         label: "Record",
@@ -1076,18 +1111,21 @@ const ROLE_CONFIGS: Record<WorkspaceRole, WorkspaceRoleConfig> = {
         route: "/programs",
         description: "Curated re-entry and continuing-learning offers.",
         icon: FiCompass,
+        matchStrategy: "none",
       },
       {
         label: "Career",
         route: "/workspace/alumni",
         description: "Role of the record in re-skilling and advancement.",
         icon: FiBriefcase,
+        matchStrategy: "none",
       },
       {
         label: "Mentoring",
         route: "/workspace/alumni",
         description: "Community and mentoring positioning for later waves.",
         icon: FiUsers,
+        matchStrategy: "none",
       },
     ],
     hero: {