diff --git a/docs/site-map.md b/docs/site-map.md
index 90a90483f..dfe1d7a2c 100644
--- a/docs/site-map.md
+++ b/docs/site-map.md
@@ -553,6 +553,7 @@ This file is generated by `npm run sitemap:update`. Run `npm run sitemap:check`
 - `/mockups/settings-search-clinical` - Route discovered from app directory Source: `src/app/mockups/settings-search-clinical/page.tsx`.
 - `/mockups/settings-search-general` - Route discovered from app directory Source: `src/app/mockups/settings-search-general/page.tsx`.
 - `/mockups/settings-search-privacy` - Route discovered from app directory Source: `src/app/mockups/settings-search-privacy/page.tsx`.
+- `/mockups/therapy-compass` - Route discovered from app directory Source: `src/app/mockups/therapy-compass/page.tsx`.
 - `/mockups/tools-action-workbench` - Route discovered from app directory Source: `src/app/mockups/tools-action-workbench/page.tsx`.
 - `/mockups/tools-clinical-lanes` - Route discovered from app directory Source: `src/app/mockups/tools-clinical-lanes/page.tsx`.
 - `/mockups/tools-command-center` - Route discovered from app directory Source: `src/app/mockups/tools-command-center/page.tsx`.
diff --git a/src/app/mockups/mockups-layout-client.tsx b/src/app/mockups/mockups-layout-client.tsx
index 7ae81f3bf..f498a929e 100644
--- a/src/app/mockups/mockups-layout-client.tsx
+++ b/src/app/mockups/mockups-layout-client.tsx
@@ -13,6 +13,10 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
   const isSourceOverlayRedesignMockup = pathname === "/mockups/document-search/source-overlays";
   const isStandaloneDocumentFlow = pathname === "/mockups/document-search";
   const isUniversalSearchRedesignMockup = pathname === "/mockups/universal-search-redesign";
+  // Therapy Compass keeps the universal header + rail but provides its own
+  // primary search surface, so the shared bottom composer is hidden (as with
+  // the tools/favourites mockups).
+  const isTherapyCompassMockup = pathname.startsWith("/mockups/therapy-compass");
 
   return (
     <GlobalMockupSearchShell
@@ -26,7 +30,11 @@ export function MockupsLayoutClient({ children }: { children: ReactNode }) {
               : "answer"
       }
       searchComposerVisible={
-        !isToolsPageMockup && !isFavouritesPageMockup && !isStandaloneDocumentFlow && !isUniversalSearchRedesignMockup
+        !isToolsPageMockup &&
+        !isFavouritesPageMockup &&
+        !isStandaloneDocumentFlow &&
+        !isUniversalSearchRedesignMockup &&
+        !isTherapyCompassMockup
       }
       chromeVisible={!isSourceOverlayRedesignMockup}
     >
diff --git a/src/app/mockups/therapy-compass/page.tsx b/src/app/mockups/therapy-compass/page.tsx
new file mode 100644
index 000000000..95bf7d331
--- /dev/null
+++ b/src/app/mockups/therapy-compass/page.tsx
@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+import { TherapyCompassPage } from "@/components/therapy-compass";
+
+export const metadata: Metadata = {
+  title: "Therapy Compass Mockup - Clinical KB",
+  description:
+    "Source-grounded therapy decision-support mockup: search, compare, recommend, pathways, brief interventions and patient sheets.",
+};
+
+export default function TherapyCompassMockupRoute() {
+  return <TherapyCompassPage />;
+}
diff --git a/src/components/therapy-compass/bindings.tsx b/src/components/therapy-compass/bindings.tsx
new file mode 100644
index 000000000..aac521778
--- /dev/null
+++ b/src/components/therapy-compass/bindings.tsx
@@ -0,0 +1,269 @@
+"use client";
+
+import { createContext, useContext, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+
+import { s } from "./style-utils";
+
+// The eight first-class Therapy Compass screens. Anything else (e.g. the
+// Review Queue) falls through to the shared "Other" placeholder, mirroring the
+// design's `isOther` branch.
+const KNOWN_SCREENS = ["search", "detail", "compare", "recommend", "pathways", "brief", "home", "sheets"] as const;
+
+type SheetSectionKey = "about" | "steps" | "practice" | "coping" | "contacts";
+
+/**
+ * Every value the ported screen JSX references as `b.<name>`. The names and
+ * semantics are a 1:1 mirror of the design export's `renderVals()` so the
+ * converted markup binds without edits — screen navigation, comparison tabs,
+ * density, brief tabs, patient-sheet tone/sections and the clinician toggle.
+ */
+export type TcBindings = {
+  // navigation
+  goHome: () => void;
+  goSearch: () => void;
+  goRecommend: () => void;
+  goCompare: () => void;
+  goPathways: () => void;
+  goBrief: () => void;
+  goSheets: () => void;
+  goDetail: () => void;
+  goReview: () => void;
+  // active-screen flags
+  isSearch: boolean;
+  isDetail: boolean;
+  isCompare: boolean;
+  isRecommend: boolean;
+  isPathways: boolean;
+  isBrief: boolean;
+  isHome: boolean;
+  isSheets: boolean;
+  isOther: boolean;
+  otherLabel: string;
+  // sidebar nav styling
+  navHome: CSSProperties;
+  navSearch: CSSProperties;
+  navRecommend: CSSProperties;
+  navCompare: CSSProperties;
+  navPathways: CSSProperties;
+  navBrief: CSSProperties;
+  navSheets: CSSProperties;
+  navReview: CSSProperties;
+  // comparison tabs + density
+  cmpTab: string;
+  tabPriorities: CSSProperties;
+  tabDifferences: CSSProperties;
+  tabAll: CSSProperties;
+  setTabPriorities: () => void;
+  setTabDifferences: () => void;
+  setTabAll: () => void;
+  density: string;
+  segComfortable: CSSProperties;
+  segDense: CSSProperties;
+  setComfortable: () => void;
+  setDense: () => void;
+  // brief-intervention tabs
+  briefTab: string;
+  brief5: CSSProperties;
+  brief15: CSSProperties;
+  briefGround: CSSProperties;
+  set5: () => void;
+  set15: () => void;
+  setGround: () => void;
+  // patient-sheet tone
+  tonePlain: CSSProperties;
+  toneWarm: CSSProperties;
+  toneClinical: CSSProperties;
+  setTonePlain: () => void;
+  setToneWarm: () => void;
+  setToneClinical: () => void;
+  // patient-sheet section toggles
+  secAbout: boolean;
+  secSteps: boolean;
+  secPractice: boolean;
+  secCoping: boolean;
+  secContacts: boolean;
+  chipAbout: CSSProperties;
+  chipSteps: CSSProperties;
+  chipPractice: CSSProperties;
+  chipCoping: CSSProperties;
+  chipContacts: CSSProperties;
+  toggleAbout: () => void;
+  toggleSteps: () => void;
+  togglePractice: () => void;
+  toggleCoping: () => void;
+  toggleContacts: () => void;
+  // clinician footer toggle
+  sheetClinician: boolean;
+  toggleClinician: () => void;
+  clinicianTrack: CSSProperties;
+  clinicianKnob: CSSProperties;
+  // patient-sheet print
+  printSheet: () => void;
+  // raw screen id (for callers that need it)
+  screen: string;
+};
+
+const TcContext = createContext<TcBindings | null>(null);
+
+function navStyle(active: boolean): CSSProperties {
+  // Horizontal pill for the in-content tool nav (the mockup's own left rail was
+  // dropped in favour of the app's universal sidebar). Button resets keep the
+  // <button> chrome-free; the active pill fills with the accent-soft token.
+  const base =
+    "display:inline-flex;align-items:center;gap:8px;flex:none;padding:8px 13px;border:1px solid transparent;border-radius:10px;background:transparent;font-family:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background .12s ease,color .12s ease,border-color .12s ease;";
+  // Both states set the `border` shorthand (never a mix of `border` +
+  // `borderColor`), so React does not warn about shorthand/longhand conflicts
+  // when the active pill changes.
+  return s(
+    active
+      ? base +
+          "background:var(--clinical-accent-soft);color:var(--clinical-accent-hover);border:1px solid var(--clinical-accent-border);font-weight:650;"
+      : base + "color:var(--text-muted);font-weight:500;",
+  );
+}
+
+function tabStyle(active: boolean): CSSProperties {
+  const base =
+    "padding:10px 4px;border:none;background:transparent;font-size:14px;cursor:pointer;font-family:inherit;transition:color .12s ease;";
+  return s(
+    active
+      ? base + "color:var(--clinical-accent-hover);font-weight:650;border-bottom:2px solid var(--clinical-accent);"
+      : base + "color:var(--text-muted);font-weight:500;border-bottom:2px solid transparent;",
+  );
+}
+
+function segStyle(active: boolean): CSSProperties {
+  const base =
+    "padding:7px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .12s ease;";
+  return s(
+    active
+      ? base + "background:var(--surface);color:var(--clinical-accent-hover);box-shadow:var(--shadow-tight);"
+      : base + "background:transparent;color:var(--text-muted);",
+  );
+}
+
+function chipStyle(on: boolean): CSSProperties {
+  const base =
+    "padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s ease;";
+  return s(
+    on
+      ? base +
+          "border:1px solid var(--clinical-accent-border);background:var(--clinical-accent-soft);color:var(--clinical-accent-hover);"
+      : base + "border:1px solid var(--border);background:var(--surface);color:var(--text-muted);",
+  );
+}
+
+export function TcProvider({ children }: { children: ReactNode }) {
+  const [screen, setScreen] = useState<string>("home");
+  const [cmpTab, setCmpTab] = useState("differences");
+  const [density, setDensity] = useState("comfortable");
+  const [briefTab, setBriefTab] = useState("5min");
+  const [sheetTone, setSheetTone] = useState("plain");
+  const [sheetSections, setSheetSections] = useState<Record<SheetSectionKey, boolean>>({
+    about: true,
+    steps: true,
+    practice: true,
+    coping: true,
+    contacts: true,
+  });
+  const [sheetClinician, setSheetClinician] = useState(true);
+
+  const value = useMemo<TcBindings>(() => {
+    const go = (next: string) => () => setScreen(next);
+    const toggleSection = (key: SheetSectionKey) => setSheetSections((prev) => ({ ...prev, [key]: !prev[key] }));
+    const ss = sheetSections;
+    return {
+      goHome: go("home"),
+      goSearch: go("search"),
+      goRecommend: go("recommend"),
+      goCompare: go("compare"),
+      goPathways: go("pathways"),
+      goBrief: go("brief"),
+      goSheets: go("sheets"),
+      goDetail: go("detail"),
+      goReview: go("review"),
+      isSearch: screen === "search",
+      isDetail: screen === "detail",
+      isCompare: screen === "compare",
+      isRecommend: screen === "recommend",
+      isPathways: screen === "pathways",
+      isBrief: screen === "brief",
+      isHome: screen === "home",
+      isSheets: screen === "sheets",
+      isOther: !KNOWN_SCREENS.includes(screen as (typeof KNOWN_SCREENS)[number]),
+      otherLabel: screen.charAt(0).toUpperCase() + screen.slice(1),
+      navHome: navStyle(screen === "home"),
+      navSearch: navStyle(screen === "search"),
+      navRecommend: navStyle(screen === "recommend"),
+      navCompare: navStyle(screen === "compare"),
+      navPathways: navStyle(screen === "pathways"),
+      navBrief: navStyle(screen === "brief"),
+      navSheets: navStyle(screen === "sheets"),
+      navReview: navStyle(screen === "review"),
+      cmpTab,
+      tabPriorities: tabStyle(cmpTab === "priorities"),
+      tabDifferences: tabStyle(cmpTab === "differences"),
+      tabAll: tabStyle(cmpTab === "all"),
+      setTabPriorities: () => setCmpTab("priorities"),
+      setTabDifferences: () => setCmpTab("differences"),
+      setTabAll: () => setCmpTab("all"),
+      density,
+      segComfortable: segStyle(density === "comfortable"),
+      segDense: segStyle(density === "dense"),
+      setComfortable: () => setDensity("comfortable"),
+      setDense: () => setDensity("dense"),
+      briefTab,
+      brief5: tabStyle(briefTab === "5min"),
+      brief15: tabStyle(briefTab === "15min"),
+      briefGround: tabStyle(briefTab === "ground"),
+      set5: () => setBriefTab("5min"),
+      set15: () => setBriefTab("15min"),
+      setGround: () => setBriefTab("ground"),
+      tonePlain: segStyle(sheetTone === "plain"),
+      toneWarm: segStyle(sheetTone === "warm"),
+      toneClinical: segStyle(sheetTone === "clinical"),
+      setTonePlain: () => setSheetTone("plain"),
+      setToneWarm: () => setSheetTone("warm"),
+      setToneClinical: () => setSheetTone("clinical"),
+      secAbout: ss.about,
+      secSteps: ss.steps,
+      secPractice: ss.practice,
+      secCoping: ss.coping,
+      secContacts: ss.contacts,
+      chipAbout: chipStyle(ss.about),
+      chipSteps: chipStyle(ss.steps),
+      chipPractice: chipStyle(ss.practice),
+      chipCoping: chipStyle(ss.coping),
+      chipContacts: chipStyle(ss.contacts),
+      toggleAbout: () => toggleSection("about"),
+      toggleSteps: () => toggleSection("steps"),
+      togglePractice: () => toggleSection("practice"),
+      toggleCoping: () => toggleSection("coping"),
+      toggleContacts: () => toggleSection("contacts"),
+      sheetClinician,
+      toggleClinician: () => setSheetClinician((prev) => !prev),
+      clinicianTrack: s(
+        "position:relative;width:42px;height:24px;border-radius:12px;flex:none;cursor:pointer;transition:background .15s ease;background:" +
+          (sheetClinician ? "var(--clinical-accent)" : "var(--border-strong)") +
+          ";",
+      ),
+      clinicianKnob: s(
+        "position:absolute;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.2);left:" +
+          (sheetClinician ? "21px" : "3px") +
+          ";",
+      ),
+      printSheet: () => {
+        if (typeof window !== "undefined") window.print();
+      },
+      screen,
+    };
+  }, [screen, cmpTab, density, briefTab, sheetTone, sheetSections, sheetClinician]);
+
+  return <TcContext.Provider value={value}>{children}</TcContext.Provider>;
+}
+
+export function useTcBindings(): TcBindings {
+  const ctx = useContext(TcContext);
+  if (!ctx) throw new Error("useTcBindings must be used within <TcProvider>");
+  return ctx;
+}
diff --git a/src/components/therapy-compass/index.ts b/src/components/therapy-compass/index.ts
new file mode 100644
index 000000000..8159da27c
--- /dev/null
+++ b/src/components/therapy-compass/index.ts
@@ -0,0 +1 @@
+export { TherapyCompassPage } from "./therapy-compass-page";
diff --git a/src/components/therapy-compass/nav.tsx b/src/components/therapy-compass/nav.tsx
new file mode 100644
index 000000000..4d1358938
--- /dev/null
+++ b/src/components/therapy-compass/nav.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import { useTcBindings } from "./bindings";
+import { s } from "./style-utils";
+
+/**
+ * In-content tool navigation for Therapy Compass.
+ *
+ * The design shipped its own left sidebar, but inside this app that role is
+ * already filled by the universal rail, so the bespoke rail is dropped. Its
+ * eight destinations are kept reachable through a horizontal, repo-idiomatic
+ * pill nav that sits at the top of the content (sticky under the global
+ * header) and scrolls horizontally on narrow viewports.
+ */
+export function TherapyCompassNav() {
+  const b = useTcBindings();
+  return (
+    <div
+      className="tc-topnav tc-no-print"
+      style={s(
+        `position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:14px 40px;background:var(--surface-glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);`,
+      )}
+    >
+      {/* Compact tool identity (the design's top-bar brand, slimmed down) */}
+      <div style={s(`display:flex;align-items:center;gap:11px;flex:none;`)}>
+        <span
+          style={s(
+            `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+          )}
+        >
+          <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <circle cx="12" cy="12" r="9" />
+            <circle cx="12" cy="12" r="5.2" />
+            <circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none" />
+          </svg>
+        </span>
+        <span style={s(`display:flex;flex-direction:column;line-height:1.15;`)}>
+          <span style={s(`font-size:14px;font-weight:650;color:var(--text-heading);letter-spacing:-0.01em;`)}>
+            Therapy Compass
+          </span>
+          <span style={s(`font-size:11px;color:var(--text-soft);`)}>Source-grounded decision support</span>
+        </span>
+      </div>
+
+      {/* Screen nav — horizontal, scrollable */}
+      <nav
+        className="tc-scroll"
+        aria-label="Therapy Compass sections"
+        style={s(`display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow-x:auto;padding-bottom:2px;`)}
+      >
+        <button type="button" className="tc-btn" onClick={b.goHome} style={b.navHome}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M3 10.5 12 3l9 7.5" />
+            <path d="M5 9.5V21h14V9.5" />
+          </svg>
+          Home
+        </button>
+        <button type="button" className="tc-btn" onClick={b.goSearch} style={b.navSearch}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          Search
+        </button>
+        <button type="button" className="tc-btn" onClick={b.goRecommend} style={b.navRecommend}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M12 3v3M12 18v3M5 12H2M22 12h-3M6.3 6.3 4.5 4.5M19.5 19.5l-1.8-1.8M6.3 17.7l-1.8 1.8M19.5 4.5l-1.8 1.8" />
+            <circle cx="12" cy="12" r="3.2" />
+          </svg>
+          Recommend
+        </button>
+        <button type="button" className="tc-btn" onClick={b.goCompare} style={b.navCompare}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M12 3v18" />
+            <path d="m5 7-3 5.5h6L5 7Z" />
+            <path d="m19 7-3 5.5h6L19 7Z" />
+            <path d="M4 21h16" />
+            <path d="M8 7h8" />
+          </svg>
+          Compare
+        </button>
+        <span style={s(`width:1px;height:22px;flex:none;background:var(--border);margin:0 4px;`)} aria-hidden="true" />
+        <button type="button" className="tc-btn" onClick={b.goPathways} style={b.navPathways}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <circle cx="6" cy="6" r="2.5" />
+            <circle cx="18" cy="18" r="2.5" />
+            <circle cx="6" cy="18" r="2.5" />
+            <path d="M8.5 6H15a3 3 0 0 1 3 3v6.5M6 8.5v7" />
+          </svg>
+          Pathways
+        </button>
+        <button type="button" className="tc-btn" onClick={b.goBrief} style={b.navBrief}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+          Brief Intervention
+        </button>
+        <button type="button" className="tc-btn" onClick={b.goSheets} style={b.navSheets}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M6 3h8l4 4v14H6Z" />
+            <path d="M14 3v4h4" />
+            <path d="M9 12h6M9 16h6" />
+          </svg>
+          Patient Sheets
+        </button>
+        <span style={s(`width:1px;height:22px;flex:none;background:var(--border);margin:0 4px;`)} aria-hidden="true" />
+        <button type="button" className="tc-btn" onClick={b.goReview} style={b.navReview}>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+            <path d="m9.2 12 1.9 1.9 3.7-3.8" />
+          </svg>
+          Review Queue
+        </button>
+      </nav>
+    </div>
+  );
+}
diff --git a/src/components/therapy-compass/screens/brief-screen.tsx b/src/components/therapy-compass/screens/brief-screen.tsx
new file mode 100644
index 000000000..a0ce2d038
--- /dev/null
+++ b/src/components/therapy-compass/screens/brief-screen.tsx
@@ -0,0 +1,693 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function BriefScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Brief" style={s(`max-width:1240px;margin:0 auto;`)}>
+      <div
+        style={s(
+          `display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap;`,
+        )}
+      >
+        <div>
+          <h1
+            style={s(`margin:0 0 6px;font-size:27px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`)}
+          >
+            Brief Intervention
+          </h1>
+          <p style={s(`margin:0;font-size:14.5px;color:var(--text-muted);`)}>
+            Fast scripts and steps from uploaded delivery fields.
+          </p>
+        </div>
+        <div style={s(`display:flex;gap:10px;`)}>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M6 4h12v16l-6-4-6 4Z" />
+            </svg>
+            Saved briefs
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-tight);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M6 3h8l4 4v14H6Z" />
+              <path d="M14 3v4h4" />
+            </svg>
+            Create handout
+          </button>
+        </div>
+      </div>
+      <div style={s(`position:relative;display:flex;align-items:center;margin-bottom:16px;`)}>
+        <svg
+          style={s(`position:absolute;left:15px;color:var(--text-soft);`)}
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <path d="m20 20-3.5-3.5" />
+        </svg>
+        <input
+          aria-label="Filter brief interventions"
+          placeholder="Filter brief interventions…"
+          style={s(
+            `width:100%;height:46px;padding:0 15px 0 42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;outline:none;box-shadow:var(--shadow-tight);`,
+          )}
+        />
+      </div>
+      <div style={s(`display:flex;gap:24px;border-bottom:1px solid var(--border);margin-bottom:20px;flex-wrap:wrap;`)}>
+        <button type="button" className="tc-btn" onClick={b.set5} style={b.brief5}>
+          5 minutes
+        </button>
+        <button type="button" className="tc-btn" onClick={b.set15} style={b.brief15}>
+          15 minutes
+        </button>
+        <button type="button" className="tc-btn" onClick={b.setGround} style={b.briefGround}>
+          Grounding now
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `padding:10px 4px;border:none;background:transparent;color:var(--text-muted);font-size:14px;font-weight:500;border-bottom:2px solid transparent;`,
+          )}
+        >
+          Patient explanation
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `padding:10px 4px;border:none;background:transparent;color:var(--text-muted);font-size:14px;font-weight:500;border-bottom:2px solid transparent;`,
+          )}
+        >
+          Behavioural task
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `padding:10px 4px;border:none;background:transparent;color:var(--text-muted);font-size:14px;font-weight:500;border-bottom:2px solid transparent;`,
+          )}
+        >
+          Script
+        </button>
+      </div>
+      <div style={s(`display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start;`)}>
+        <div
+          style={s(
+            `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:16px;`,
+          )}
+        >
+          <div style={s(`font-size:13px;font-weight:650;color:var(--text-heading);margin-bottom:12px;`)}>
+            Available records
+          </div>
+          <div style={s(`display:flex;flex-direction:column;gap:8px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              style={s(
+                `display:flex;gap:12px;padding:13px;border:1px solid var(--clinical-accent-border);border-left:3px solid var(--clinical-accent);border-radius:11px;background:var(--clinical-accent-soft);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#fff;color:var(--clinical-accent);flex:none;`,
+                )}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M13 4a1.5 1.5 0 1 0 0-.01M8 21l2-6 3 2 1 4M13 11l3-1 3 2M9 11 6 9" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:13px;font-weight:650;color:var(--text-heading);`)}>
+                  Behavioural Activation
+                </span>
+                <span style={s(`display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;`)}>
+                  Depression and low motivation
+                </span>
+              </span>
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--warning-text)"
+                strokeWidth="1.8"
+                style={s(`flex:none;`)}
+              >
+                <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                <path d="M12 9v4M12 17h.01" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="tc-btn tc-row"
+              style={s(
+                `display:flex;gap:12px;padding:13px;border:1px solid var(--border);border-radius:11px;background:var(--surface);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M12 2 4 7v10l8 5 8-5V7Z" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:13px;font-weight:650;color:var(--text-heading);`)}>
+                  Acceptance &amp; Commitment (ACT)
+                </span>
+                <span style={s(`display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;`)}>
+                  Psychological flexibility
+                </span>
+              </span>
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--warning-text)"
+                strokeWidth="1.8"
+                style={s(`flex:none;`)}
+              >
+                <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                <path d="M12 9v4M12 17h.01" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="tc-btn tc-row"
+              style={s(
+                `display:flex;gap:12px;padding:13px;border:1px solid var(--border);border-radius:11px;background:var(--surface);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M12 22c4-2 7-5 7-10a7 7 0 0 0-14 0c0 5 3 8 7 10Z" />
+                  <path d="M12 12c0-3 1.5-5 4-6M12 12c0-3-1.5-5-4-6" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:13px;font-weight:650;color:var(--text-heading);`)}>
+                  Applied Relaxation
+                </span>
+                <span style={s(`display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;`)}>
+                  Anxiety-arousal regulation
+                </span>
+              </span>
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--success-text)"
+                strokeWidth="1.9"
+                style={s(`flex:none;`)}
+              >
+                <circle cx="12" cy="12" r="9" />
+                <path d="m8.5 12 2.5 2.5 4.5-5" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="tc-btn tc-row"
+              style={s(
+                `display:flex;gap:12px;padding:13px;border:1px solid var(--border);border-radius:11px;background:var(--surface);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <circle cx="8" cy="8" r="2.3" />
+                  <circle cx="16" cy="8" r="2.3" />
+                  <path d="M3.5 19a4.5 4.5 0 0 1 9 0M11.5 19a4.5 4.5 0 0 1 9 0" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:13px;font-weight:650;color:var(--text-heading);`)}>
+                  Problem Management Plus
+                </span>
+                <span style={s(`display:block;font-size:11.5px;color:var(--text-muted);margin-top:2px;`)}>
+                  Brief transdiagnostic support
+                </span>
+              </span>
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--warning-text)"
+                strokeWidth="1.8"
+                style={s(`flex:none;`)}
+              >
+                <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                <path d="M12 9v4M12 17h.01" />
+              </svg>
+            </button>
+          </div>
+          <div style={s(`text-align:center;font-size:11.5px;color:var(--text-soft);margin-top:14px;`)}>
+            Showing 4 of 4 records
+          </div>
+        </div>
+        <div style={s(`display:flex;flex-direction:column;gap:16px;`)}>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:22px 24px;`,
+            )}
+          >
+            <div
+              style={s(
+                `display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;`,
+              )}
+            >
+              <div style={s(`display:flex;align-items:center;gap:12px;flex-wrap:wrap;`)}>
+                <h2 style={s(`margin:0;font-size:19px;font-weight:680;color:var(--text-heading);`)}>
+                  Behavioural Activation
+                </h2>
+                <span
+                  style={s(
+                    `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--clinical-accent-soft);color:var(--clinical-accent-hover);border:1px solid var(--clinical-accent-border);`,
+                  )}
+                >
+                  5-minute mode
+                </span>
+                <span
+                  style={s(
+                    `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);`,
+                  )}
+                >
+                  Source-derived
+                </span>
+                <span
+                  style={s(
+                    `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border);`,
+                  )}
+                >
+                  Clinician review required
+                </span>
+              </div>
+              <button
+                type="button"
+                className="tc-btn"
+                onClick={b.goDetail}
+                style={s(
+                  `display:flex;align-items:center;gap:7px;height:36px;padding:0 13px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600;`,
+                )}
+              >
+                Open full record{" "}
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <path d="M14 4h6v6M20 4l-8 8" />
+                  <path d="M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5" />
+                </svg>
+              </button>
+            </div>
+            <div
+              style={s(
+                `display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;`,
+              )}
+            >
+              <div style={s(`padding:14px 15px;background:var(--surface);`)}>
+                <div
+                  style={s(
+                    `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:7px;`,
+                  )}
+                >
+                  GOAL
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Depression and low motivation in outpatient care.
+                </p>
+              </div>
+              <div style={s(`padding:14px 15px;background:var(--surface);`)}>
+                <div
+                  style={s(
+                    `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:7px;`,
+                  )}
+                >
+                  SCRIPT / STEPS
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Choose one small activity.
+                </p>
+              </div>
+              <div style={s(`padding:14px 15px;background:var(--warning-bg);`)}>
+                <div
+                  style={s(
+                    `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--warning-text);margin-bottom:7px;`,
+                  )}
+                >
+                  CAUTIONS
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--warning-text);`)}>
+                  Review source cautions, acuity and patient factors before use.
+                </p>
+              </div>
+              <div style={s(`padding:14px 15px;background:var(--surface);`)}>
+                <div
+                  style={s(
+                    `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:7px;`,
+                  )}
+                >
+                  SOURCE STATUS
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Uploaded delivery fields ·{" "}
+                  <span style={s(`color:var(--warning-text);font-weight:600;`)}>review required.</span>
+                </p>
+              </div>
+            </div>
+          </div>
+          <div style={s(`display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;`)}>
+            <div
+              style={s(
+                `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:20px 22px;`,
+              )}
+            >
+              <div style={s(`font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:16px;`)}>
+                5-minute delivery
+              </div>
+              <div style={s(`display:flex;flex-direction:column;gap:14px;`)}>
+                <div style={s(`display:flex;gap:14px;`)}>
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--clinical-accent-soft);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                    )}
+                  >
+                    1
+                  </span>
+                  <div style={s(`flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;`)}>
+                    <div>
+                      <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>Orient</div>
+                      <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                        Confirm the immediate goal and available time.
+                      </div>
+                    </div>
+                    <div style={s(`display:flex;align-items:center;gap:8px;flex:none;`)}>
+                      <span style={s(`font-size:11px;color:var(--text-soft);`)}>Uploaded delivery fields</span>
+                      <button
+                        type="button"
+                        className="tc-btn"
+                        title="Copy"
+                        style={s(
+                          `display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-soft);`,
+                        )}
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.7"
+                        >
+                          <rect x="8" y="8" width="12" height="12" rx="2" />
+                          <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div style={s(`display:flex;gap:14px;`)}>
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--clinical-accent-soft);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                    )}
+                  >
+                    2
+                  </span>
+                  <div style={s(`flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;`)}>
+                    <div>
+                      <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                        Choose one small activity
+                      </div>
+                      <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                        Use the source-derived brief step.
+                      </div>
+                    </div>
+                    <div style={s(`display:flex;align-items:center;gap:8px;flex:none;`)}>
+                      <span style={s(`font-size:11px;color:var(--text-soft);`)}>Uploaded delivery fields</span>
+                      <button
+                        type="button"
+                        className="tc-btn"
+                        title="Copy"
+                        style={s(
+                          `display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-soft);`,
+                        )}
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.7"
+                        >
+                          <rect x="8" y="8" width="12" height="12" rx="2" />
+                          <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div style={s(`display:flex;gap:14px;`)}>
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--clinical-accent-soft);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                    )}
+                  >
+                    3
+                  </span>
+                  <div style={s(`flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;`)}>
+                    <div>
+                      <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                        Plan the next action
+                      </div>
+                      <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                        Record what will happen, when and where.
+                      </div>
+                    </div>
+                    <div style={s(`display:flex;align-items:center;gap:8px;flex:none;`)}>
+                      <span style={s(`font-size:11px;color:var(--text-soft);`)}>Uploaded delivery fields</span>
+                      <button
+                        type="button"
+                        className="tc-btn"
+                        title="Copy"
+                        style={s(
+                          `display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-soft);`,
+                        )}
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.7"
+                        >
+                          <rect x="8" y="8" width="12" height="12" rx="2" />
+                          <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div style={s(`display:flex;gap:14px;`)}>
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--clinical-accent);color:#fff;font-size:12px;font-weight:700;flex:none;`,
+                    )}
+                  >
+                    4
+                  </span>
+                  <div style={s(`flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;`)}>
+                    <div>
+                      <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>Review</div>
+                      <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                        Check understanding, cautions and follow-up.
+                      </div>
+                    </div>
+                    <div style={s(`display:flex;align-items:center;gap:8px;flex:none;`)}>
+                      <span style={s(`font-size:11px;color:var(--text-soft);`)}>Uploaded delivery fields</span>
+                      <button
+                        type="button"
+                        className="tc-btn"
+                        title="Copy"
+                        style={s(
+                          `display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-soft);`,
+                        )}
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="1.7"
+                        >
+                          <rect x="8" y="8" width="12" height="12" rx="2" />
+                          <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+                        </svg>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              style={s(
+                `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:20px 22px;`,
+              )}
+            >
+              <div style={s(`font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:14px;`)}>
+                Before use
+              </div>
+              <div style={s(`display:flex;flex-direction:column;gap:13px;margin-bottom:16px;`)}>
+                <div
+                  style={s(`display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text);cursor:pointer;`)}
+                >
+                  <span
+                    style={s(
+                      `width:19px;height:19px;border:1.5px solid var(--border-strong);border-radius:5px;flex:none;`,
+                    )}
+                  ></span>
+                  Confirm the primary problem
+                </div>
+                <div
+                  style={s(`display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text);cursor:pointer;`)}
+                >
+                  <span
+                    style={s(
+                      `width:19px;height:19px;border:1.5px solid var(--border-strong);border-radius:5px;flex:none;`,
+                    )}
+                  ></span>
+                  Check risk and acuity
+                </div>
+                <div
+                  style={s(`display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text);cursor:pointer;`)}
+                >
+                  <span
+                    style={s(
+                      `width:19px;height:19px;border:1.5px solid var(--border-strong);border-radius:5px;flex:none;`,
+                    )}
+                  ></span>
+                  Review contraindications
+                </div>
+                <div
+                  style={s(`display:flex;align-items:center;gap:11px;font-size:13px;color:var(--text);cursor:pointer;`)}
+                >
+                  <span
+                    style={s(
+                      `width:19px;height:19px;border:1.5px solid var(--border-strong);border-radius:5px;flex:none;`,
+                    )}
+                  ></span>
+                  Confirm patient-facing language
+                </div>
+              </div>
+              <div
+                style={s(
+                  `display:flex;align-items:flex-start;gap:9px;padding:13px 14px;background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:11px;`,
+                )}
+              >
+                <svg
+                  width="17"
+                  height="17"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="var(--warning-text)"
+                  strokeWidth="1.8"
+                  style={s(`flex:none;margin-top:1px;`)}
+                >
+                  <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                  <path d="M12 9v4M12 17h.01" />
+                </svg>
+                <span style={s(`font-size:12.5px;font-weight:600;line-height:1.45;color:var(--warning-text);`)}>
+                  Clinical review is required before saving or sharing.
+                </span>
+              </div>
+            </div>
+          </div>
+          <div style={s(`display:flex;gap:10px;flex-wrap:wrap;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              style={s(
+                `display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <rect x="8" y="8" width="12" height="12" rx="2" />
+                <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+              </svg>
+              Copy intervention
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              style={s(
+                `display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 4h12v16l-6-4-6 4Z" />
+              </svg>
+              Save brief
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goBrief}
+              style={s(
+                `display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+                <path d="M14 3v4h4" />
+              </svg>
+              Open patient sheet
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              style={s(
+                `display:flex;align-items:center;gap:8px;height:46px;padding:0 22px;margin-left:auto;border:none;border-radius:12px;background:var(--command);color:var(--command-contrast);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-tight);`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+                <path d="M14 3v4h4" />
+              </svg>
+              Create handout
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/compare-screen.tsx b/src/components/therapy-compass/screens/compare-screen.tsx
new file mode 100644
index 000000000..725933fc4
--- /dev/null
+++ b/src/components/therapy-compass/screens/compare-screen.tsx
@@ -0,0 +1,523 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function CompareScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Compare" style={s(`max-width:1240px;margin:0 auto;`)}>
+      <div
+        style={s(
+          `display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:6px;flex-wrap:wrap;`,
+        )}
+      >
+        <div>
+          <div style={s(`display:flex;align-items:baseline;gap:12px;`)}>
+            <h1 style={s(`margin:0;font-size:27px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`)}>
+              Therapy Comparison
+            </h1>
+            <span
+              style={s(
+                `font-size:13px;font-weight:600;color:var(--clinical-accent-hover);background:var(--clinical-accent-soft);padding:3px 10px;border-radius:8px;`,
+              )}
+            >
+              3 of 4 selected
+            </span>
+          </div>
+          <p style={s(`margin:6px 0 0;font-size:14.5px;color:var(--text-muted);`)}>
+            Compare fit, cautions, delivery and evidence without losing source context.
+          </p>
+        </div>
+        <div style={s(`display:flex;align-items:center;gap:10px;`)}>
+          <div style={s(`display:flex;gap:2px;padding:3px;background:var(--surface-inset);border-radius:11px;`)}>
+            <button type="button" className="tc-btn" onClick={b.setComfortable} style={b.segComfortable}>
+              Comfortable
+            </button>
+            <button type="button" className="tc-btn" onClick={b.setDense} style={b.segDense}>
+              Dense
+            </button>
+          </div>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:7px;height:42px;padding:0 15px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M5 4h11l3 3v13H5Z" />
+              <path d="M8 4v5h6V4M8 20v-6h8v6" />
+            </svg>
+            Save set
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `height:42px;padding:0 15px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+            )}
+          >
+            Clear
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `height:42px;padding:0 18px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-tight);`,
+            )}
+          >
+            Keep first
+          </button>
+        </div>
+      </div>
+      <div style={s(`display:flex;gap:12px;margin:18px 0;flex-wrap:wrap;`)}>
+        <div style={s(`flex:1;min-width:260px;position:relative;display:flex;align-items:center;`)}>
+          <svg
+            style={s(`position:absolute;left:14px;color:var(--text-soft);`)}
+            width="17"
+            height="17"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+          >
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          <input
+            aria-label="Search recent, favourite, or library"
+            placeholder="Search recent, favourite, or library…"
+            style={s(
+              `width:100%;height:46px;padding:0 14px 0 40px;border:1px dashed var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;outline:none;`,
+            )}
+          />
+        </div>
+        <div
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+            <path d="M6 3h8l4 4v14H6Z" />
+          </svg>
+          <span style={s(`font-size:13px;font-weight:600;color:var(--text-heading);`)}>ACT</span>
+          <svg
+            className="tc-btn"
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.9"
+          >
+            <path d="M6 6l12 12M18 6 6 18" />
+          </svg>
+        </div>
+        <div
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+            <circle cx="12" cy="8" r="3.2" />
+            <path d="M5 20a7 7 0 0 1 14 0" />
+          </svg>
+          <span style={s(`font-size:13px;font-weight:600;color:var(--text-heading);`)}>Applied Relaxation</span>
+          <svg
+            className="tc-btn"
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.9"
+          >
+            <path d="M6 6l12 12M18 6 6 18" />
+          </svg>
+        </div>
+        <div
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+          <span style={s(`font-size:13px;font-weight:600;color:var(--text-heading);`)}>Brief low-intensity CBT</span>
+          <svg
+            className="tc-btn"
+            width="15"
+            height="15"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.9"
+          >
+            <path d="M6 6l12 12M18 6 6 18" />
+          </svg>
+        </div>
+      </div>
+      <div
+        style={s(
+          `display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;margin-bottom:20px;`,
+        )}
+      >
+        <div style={s(`padding:20px 22px;`)}>
+          <div style={s(`font-size:15px;font-weight:650;color:var(--text-heading);`)}>Decision summary</div>
+        </div>
+        <div
+          style={s(
+            `padding:20px 22px;border-left:1px solid var(--border);box-shadow:inset 3px 0 0 var(--clinical-accent);`,
+          )}
+        >
+          <div
+            style={s(
+              `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:6px;`,
+            )}
+          >
+            CLINICAL PRIORITY
+          </div>
+          <div style={s(`font-size:14px;font-weight:600;color:var(--text-heading);`)}>Check cautions before fit</div>
+        </div>
+        <div style={s(`padding:20px 22px;border-left:1px solid var(--border);`)}>
+          <div
+            style={s(
+              `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:6px;`,
+            )}
+          >
+            SHORTEST DELIVERY
+          </div>
+          <div style={s(`font-size:14px;font-weight:600;color:var(--text-heading);`)}>Brief low-intensity CBT</div>
+        </div>
+        <div
+          style={s(
+            `padding:20px 22px;border-left:1px solid var(--border);box-shadow:inset 3px 0 0 var(--warning-text);`,
+          )}
+        >
+          <div
+            style={s(
+              `font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);margin-bottom:6px;`,
+            )}
+          >
+            SOURCE STATUS
+          </div>
+          <div style={s(`font-size:14px;font-weight:600;color:var(--warning-text);`)}>2 records need review</div>
+        </div>
+      </div>
+      <div style={s(`display:flex;gap:26px;border-bottom:1px solid var(--border);margin-bottom:2px;`)}>
+        <button type="button" className="tc-btn" onClick={b.setTabPriorities} style={b.tabPriorities}>
+          Priorities
+        </button>
+        <button type="button" className="tc-btn" onClick={b.setTabDifferences} style={b.tabDifferences}>
+          Differences
+        </button>
+        <button type="button" className="tc-btn" onClick={b.setTabAll} style={b.tabAll}>
+          All fields
+        </button>
+      </div>
+      <div
+        style={s(
+          `background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 16px 16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
+        )}
+      >
+        <div
+          style={s(
+            `display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;background:var(--surface-subtle);border-bottom:1px solid var(--border);`,
+          )}
+        >
+          <div style={s(`padding:16px 20px;font-size:13px;font-weight:650;color:var(--text-soft);`)}>Field</div>
+          <div style={s(`padding:14px 20px;border-left:1px solid var(--border);`)}>
+            <div style={s(`display:flex;align-items:center;gap:7px;`)}>
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+              </svg>
+              <span style={s(`font-size:13px;font-weight:650;color:var(--text-heading);`)}>ACT</span>
+            </div>
+            <div style={s(`font-size:11.5px;color:var(--warning-text);font-weight:600;margin-top:3px;`)}>
+              Needs review
+            </div>
+          </div>
+          <div style={s(`padding:14px 20px;border-left:1px solid var(--border);`)}>
+            <div style={s(`display:flex;align-items:center;gap:7px;`)}>
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+                <circle cx="12" cy="8" r="3.2" />
+                <path d="M5 20a7 7 0 0 1 14 0" />
+              </svg>
+              <span style={s(`font-size:13px;font-weight:650;color:var(--text-heading);`)}>Applied Relaxation</span>
+            </div>
+            <div style={s(`font-size:11.5px;color:var(--warning-text);font-weight:600;margin-top:3px;`)}>
+              Source review required
+            </div>
+          </div>
+          <div style={s(`padding:14px 20px;border-left:1px solid var(--border);`)}>
+            <div style={s(`display:flex;align-items:center;gap:7px;`)}>
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+                <circle cx="12" cy="12" r="9" />
+                <path d="M12 7v5l3 2" />
+              </svg>
+              <span style={s(`font-size:13px;font-weight:650;color:var(--text-heading);`)}>
+                Brief low-intensity CBT
+              </span>
+            </div>
+            <div style={s(`font-size:11.5px;color:var(--warning-text);font-weight:600;margin-top:3px;`)}>
+              Clinician review required
+            </div>
+          </div>
+        </div>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--border);background:var(--warning-bg);`,
+          )}
+        >
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--warning-text);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+              <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+              <path d="M12 9v4M12 17h.01" />
+            </svg>
+            When not to use
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--warning-text);`,
+            )}
+          >
+            Check for a more specific first-line therapy.
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--warning-text);`,
+            )}
+          >
+            Confirm anxiety-arousal regulation is the main problem.
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--warning-text);`,
+            )}
+          >
+            Check acuity, risk and suitability for a brief format.
+          </div>
+        </div>
+        <div style={s(`display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--border);`)}>
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-heading);`,
+            )}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="var(--clinical-accent)"
+              strokeWidth="1.7"
+            >
+              <circle cx="12" cy="12" r="9" />
+              <circle cx="12" cy="12" r="4" />
+            </svg>
+            Best fit
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text-muted);`,
+            )}
+          >
+            Depression, anxiety-spectrum distress, broader transdiagnostic presentations.
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text-muted);`,
+            )}
+          >
+            Anxiety-arousal regulation.
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text-muted);`,
+            )}
+          >
+            Brief structured skills and psychoeducation.
+          </div>
+        </div>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--border);background:var(--surface-subtle);`,
+          )}
+        >
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-heading);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+              <circle cx="12" cy="12" r="9" />
+              <path d="m10 8 6 4-6 4Z" />
+            </svg>
+            What to do first
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text-muted);`,
+            )}
+          >
+            Define values and committed action.
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text-muted);`,
+            )}
+          >
+            Teach and practise core relaxation.
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;line-height:1.5;color:var(--text-muted);`,
+            )}
+          >
+            Engage and set a brief agenda.
+          </div>
+        </div>
+        <div style={s(`display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--border);`)}>
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-heading);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+              <circle cx="12" cy="12" r="9" />
+              <path d="M12 7v5l3 2" />
+            </svg>
+            Time required
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            Brief / full session
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            5-minute or structured session
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            5–15 minutes
+          </div>
+        </div>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--border);background:var(--surface-subtle);`,
+          )}
+        >
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-heading);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+              <circle cx="12" cy="12" r="9" />
+              <path d="M9 10h.01M15 10h.01M8.5 15a4 4 0 0 0 7 0" />
+            </svg>
+            Patient acceptability
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            Generally good
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--success-text);font-weight:600;`,
+            )}
+          >
+            High
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            Generally good
+          </div>
+        </div>
+        <div style={s(`display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;border-bottom:1px solid var(--border);`)}>
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-heading);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+              <path d="M12 3 2 8l10 5 10-5Z" />
+              <path d="M6 10.5V16l6 3 6-3v-5.5" />
+            </svg>
+            Clinician skill
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            Moderate
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--success-text);font-weight:600;`,
+            )}
+          >
+            Low
+          </div>
+          <div
+            style={s(`padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--text-muted);`)}
+          >
+            Low–moderate
+          </div>
+        </div>
+        <div style={s(`display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;background:var(--warning-bg);`)}>
+          <div
+            style={s(
+              `padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text-heading);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--warning-text)" strokeWidth="1.7">
+              <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+            </svg>
+            Evidence level
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--warning-text);font-weight:600;`,
+            )}
+          >
+            Moderate · needs review
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--warning-text);font-weight:600;`,
+            )}
+          >
+            Source review required
+          </div>
+          <div
+            style={s(
+              `padding:15px 20px;border-left:1px solid var(--border);font-size:13px;color:var(--warning-text);font-weight:600;`,
+            )}
+          >
+            Clinician review required
+          </div>
+        </div>
+      </div>
+      <div
+        style={s(`display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--text-soft);`)}
+      >
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+          <circle cx="12" cy="12" r="9" />
+          <path d="M12 8v.01M11 12h1v4h1" />
+        </svg>
+        Comparisons are source-grounded. Review status reflects the latest source checks.
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/detail-screen.tsx b/src/components/therapy-compass/screens/detail-screen.tsx
new file mode 100644
index 000000000..6c8ac4b75
--- /dev/null
+++ b/src/components/therapy-compass/screens/detail-screen.tsx
@@ -0,0 +1,546 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function DetailScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Detail" style={s(`max-width:1240px;margin:0 auto;`)}>
+      <button
+        type="button"
+        className="tc-btn"
+        onClick={b.goSearch}
+        style={s(
+          `display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 4px;border:none;background:transparent;color:var(--clinical-accent);font-size:14px;font-weight:600;`,
+        )}
+      >
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+          <path d="M19 12H5M11 6l-6 6 6 6" />
+        </svg>
+        Back to results
+      </button>
+      <div style={s(`display:grid;grid-template-columns:1fr 344px;gap:22px;align-items:start;`)}>
+        <div style={s(`display:flex;flex-direction:column;gap:16px;`)}>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--clinical-accent);border-radius:16px;box-shadow:var(--shadow-soft);padding:24px 26px;`,
+            )}
+          >
+            <div style={s(`display:flex;gap:10px;margin-bottom:14px;`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:5px 11px;border-radius:8px;background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border);`,
+                )}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                  <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                  <path d="M12 9v4M12 17h.01" />
+                </svg>
+                Needs source review
+              </span>
+              <span
+                style={s(
+                  `font-size:12px;font-weight:600;padding:5px 11px;border-radius:8px;background:var(--surface-inset);color:var(--text-muted);border:1px solid var(--border);`,
+                )}
+              >
+                Moderate complexity
+              </span>
+            </div>
+            <h1
+              style={s(
+                `margin:0 0 4px;font-size:28px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`,
+              )}
+            >
+              Acceptance &amp; Commitment Therapy (ACT)
+            </h1>
+            <div style={s(`font-size:13px;color:var(--text-soft);margin-bottom:12px;`)}>Also known as ACT</div>
+            <p style={s(`margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:62ch;`)}>
+              A structured behavioural therapy in the broader CBT family, focused on psychological flexibility rather
+              than symptom control alone.
+            </p>
+            <div style={s(`display:flex;flex-wrap:wrap;gap:8px;`)}>
+              <span
+                style={s(
+                  `font-size:12px;font-weight:600;padding:4px 11px;border-radius:8px;background:#f4f0ff;color:#6d3fc4;border:1px solid #e4d9fb;`,
+                )}
+              >
+                CBT
+              </span>
+              <span
+                style={s(
+                  `font-size:12px;font-weight:600;padding:4px 11px;border-radius:8px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);`,
+                )}
+              >
+                Crisis / risk
+              </span>
+              <span
+                style={s(
+                  `font-size:12px;font-weight:600;padding:4px 11px;border-radius:8px;background:var(--surface-inset);color:var(--text-muted);border:1px solid var(--border);`,
+                )}
+              >
+                5-minute
+              </span>
+              <span
+                style={s(
+                  `font-size:12px;font-weight:600;padding:4px 11px;border-radius:8px;background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);`,
+                )}
+              >
+                Handout
+              </span>
+              <span
+                style={s(
+                  `font-size:12px;font-weight:600;padding:4px 11px;border-radius:8px;background:var(--clinical-accent-soft);color:var(--clinical-accent-hover);border:1px solid var(--clinical-accent-border);`,
+                )}
+              >
+                Brief
+              </span>
+            </div>
+          </div>
+          <div style={s(`display:grid;grid-template-columns:1fr 1fr;gap:14px;`)}>
+            <div
+              style={s(
+                `background:var(--surface);border:1px solid var(--clinical-accent-border);border-radius:14px;padding:16px 17px;`,
+              )}
+            >
+              <div style={s(`display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--clinical-accent);`)}>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                  <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+                </svg>
+                <span style={s(`font-size:11px;font-weight:700;letter-spacing:0.05em;`)}>USE WHEN</span>
+              </div>
+              <p style={s(`margin:0;font-size:13px;line-height:1.5;color:var(--text-muted);`)}>
+                Depression, anxiety-spectrum distress and broader transdiagnostic emotional disorders.
+              </p>
+            </div>
+            <div
+              style={s(
+                `background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:14px;padding:16px 17px;`,
+              )}
+            >
+              <div style={s(`display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--warning-text);`)}>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                  <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                  <path d="M12 9v4M12 17h.01" />
+                </svg>
+                <span style={s(`font-size:11px;font-weight:700;letter-spacing:0.05em;`)}>AVOID / MODIFY</span>
+              </div>
+              <p style={s(`margin:0;font-size:13px;line-height:1.5;color:var(--warning-text);`)}>
+                Clarify the core problem is not better matched to a more specific first-line therapy.
+              </p>
+            </div>
+            <div
+              style={s(
+                `background:var(--info-bg);border:1px solid var(--info-border);border-radius:14px;padding:16px 17px;`,
+              )}
+            >
+              <div style={s(`display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--info-text);`)}>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M12 7v5l3 2" />
+                </svg>
+                <span style={s(`font-size:11px;font-weight:700;letter-spacing:0.05em;`)}>FAST DELIVERY</span>
+              </div>
+              <p style={s(`margin:0;font-size:13px;line-height:1.5;color:var(--info-text);`)}>
+                Available as a brief session or a full-session protocol.
+              </p>
+            </div>
+            <div
+              style={s(
+                `background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 17px;`,
+              )}
+            >
+              <div style={s(`display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--text-soft);`)}>
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M12 8v.01M11 12h1v4h1" />
+                </svg>
+                <span style={s(`font-size:11px;font-weight:700;letter-spacing:0.05em;`)}>EVIDENCE / SOURCE</span>
+              </div>
+              <p style={s(`margin:0;font-size:13px;line-height:1.5;color:var(--text-muted);`)}>
+                Moderate confidence · needs review.
+              </p>
+            </div>
+          </div>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:6px 24px;`,
+            )}
+          >
+            <div style={s(`display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--border);`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <path d="M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2Z" />
+                </svg>
+              </span>
+              <div>
+                <div style={s(`font-size:14.5px;font-weight:650;color:var(--text-heading);margin-bottom:5px;`)}>
+                  Clinical snapshot
+                </div>
+                <p style={s(`margin:0;font-size:13.5px;line-height:1.6;color:var(--text-muted);`)}>
+                  Acceptance &amp; Commitment Therapy (ACT) is a structured behavioural therapy in the broader CBT
+                  family — commonly described as a “third-wave” approach — focused on psychological flexibility rather
+                  than symptom control alone.
+                </p>
+              </div>
+            </div>
+            <div style={s(`display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--border);`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <circle cx="12" cy="8" r="3.4" />
+                  <path d="M5 20a7 7 0 0 1 14 0" />
+                </svg>
+              </span>
+              <div>
+                <div style={s(`font-size:14.5px;font-weight:650;color:var(--text-heading);margin-bottom:5px;`)}>
+                  When to use
+                </div>
+                <p style={s(`margin:0;font-size:13.5px;line-height:1.6;color:var(--text-muted);`)}>
+                  Best-supported for depression, anxiety-spectrum distress and transdiagnostic emotional distress when
+                  avoidance and fusion are prominent. Also carries a formal NICE recommendation for chronic primary
+                  pain. In Australian psychiatry it is best understood as an accepted structured psychotherapy, though
+                  with a narrower first-line guideline footprint than standard CBT.
+                </p>
+              </div>
+            </div>
+            <div style={s(`display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--border);`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <path d="M6 3h8l4 4v14H6Z" />
+                  <path d="M14 3v4h4" />
+                </svg>
+              </span>
+              <div>
+                <div style={s(`font-size:14.5px;font-weight:650;color:var(--text-heading);margin-bottom:5px;`)}>
+                  How to deliver it
+                </div>
+                <p style={s(`margin:0;font-size:13.5px;line-height:1.6;color:var(--text-muted);`)}>
+                  Build a shared formulation of how struggling with thoughts and feelings is narrowing life. Teach
+                  defusion and acceptance so thoughts are noticed rather than automatically obeyed, strengthen
+                  present-moment attention, clarify values, and translate them into small committed actions. Review what
+                  re-entered avoidance and consolidate a more flexible, values-guided pattern.
+                </p>
+              </div>
+            </div>
+            <div
+              style={s(
+                `display:flex;gap:14px;padding:20px 4px;background:var(--warning-bg);margin:0 -18px;border-radius:12px;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:#fff;color:var(--warning-text);flex:none;margin-left:14px;`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                  <path d="M12 9v4M12 17h.01" />
+                </svg>
+              </span>
+              <div style={s(`padding-right:14px;`)}>
+                <div style={s(`font-size:14.5px;font-weight:650;color:var(--warning-text);margin-bottom:5px;`)}>
+                  Safety &amp; cautions
+                </div>
+                <p style={s(`margin:0;font-size:13.5px;line-height:1.6;color:var(--warning-text);`)}>
+                  Confirm the core problem is not better matched to a more specific first-line therapy (ERP,
+                  trauma-focused therapy, CBTp, or structured personality treatment). Check suicidality, psychosis,
+                  mania, dissociation, cognitive ability, language and willingness to do experiential exercises. Not
+                  sufficient where the case clearly needs a specific active treatment first; weak if delivered as vague
+                  mindfulness without real behavioural change.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div style={s(`display:flex;flex-wrap:wrap;gap:10px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goBrief}
+              style={s(
+                `display:flex;align-items:center;gap:9px;height:46px;padding:0 20px;border:none;border-radius:12px;background:var(--command);color:var(--command-contrast);font-size:14px;font-weight:600;box-shadow:var(--shadow-tight);`,
+              )}
+            >
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+                <path d="M14 3v4h4" />
+              </svg>
+              Generate patient sheet
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goCompare}
+              style={s(
+                `display:flex;align-items:center;gap:9px;height:46px;padding:0 20px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;`,
+              )}
+            >
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M12 3v18" />
+                <path d="m5 7-3 5.5h6L5 7Z" />
+                <path d="m19 7-3 5.5h6L19 7Z" />
+              </svg>
+              Compare
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goBrief}
+              style={s(
+                `display:flex;align-items:center;gap:9px;height:46px;padding:0 20px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;`,
+              )}
+            >
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <circle cx="12" cy="12" r="9" />
+                <path d="M12 7v5l3 2" />
+              </svg>
+              Brief intervention
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goReview}
+              style={s(
+                `display:flex;align-items:center;gap:9px;height:46px;padding:0 20px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;`,
+              )}
+            >
+              <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M4 5h13M4 12h13M4 19h13M20 5l-1.5 1.5M20 12l-1.5 1.5M20 19l-1.5 1.5" />
+              </svg>
+              Review checklist
+            </button>
+          </div>
+        </div>
+        <div style={s(`display:flex;flex-direction:column;gap:16px;position:sticky;top:96px;`)}>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:20px;`,
+            )}
+          >
+            <div style={s(`font-size:14px;font-weight:650;color:var(--text-heading);margin-bottom:14px;`)}>
+              At a glance
+            </div>
+            <div style={s(`display:flex;flex-direction:column;gap:15px;`)}>
+              <div style={s(`display:flex;gap:12px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+                  )}
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                    <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+                  </svg>
+                </span>
+                <div>
+                  <div style={s(`font-size:12.5px;font-weight:650;color:var(--text-heading);margin-bottom:2px;`)}>
+                    Best used for
+                  </div>
+                  <p style={s(`margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);`)}>
+                    Depression, anxiety-spectrum distress and broader transdiagnostic emotional disorders.
+                  </p>
+                </div>
+              </div>
+              <div style={s(`display:flex;gap:12px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+                  )}
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                    <path d="M12 8V4M8 4h8M12 21a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z" />
+                  </svg>
+                </span>
+                <div>
+                  <div style={s(`font-size:12.5px;font-weight:650;color:var(--text-heading);margin-bottom:2px;`)}>
+                    Target symptoms
+                  </div>
+                  <p style={s(`margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);`)}>
+                    Experiential avoidance, cognitive fusion, rigid self-stories and reduced psychological flexibility.
+                  </p>
+                </div>
+              </div>
+              <div style={s(`display:flex;gap:12px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+                  )}
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                    <circle cx="12" cy="12" r="9" />
+                    <path d="M12 7v5l3 2" />
+                  </svg>
+                </span>
+                <div>
+                  <div style={s(`font-size:12.5px;font-weight:650;color:var(--text-heading);margin-bottom:2px;`)}>
+                    Time &amp; setting
+                  </div>
+                  <p style={s(`margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);`)}>
+                    Individual, group, digital or blended. Usually structured and manual-informed.
+                  </p>
+                </div>
+              </div>
+              <div style={s(`display:flex;gap:12px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+                  )}
+                >
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                    <path d="M12 3v18" />
+                    <path d="m5 7-3 5.5h6L5 7Z" />
+                    <path d="m19 7-3 5.5h6L19 7Z" />
+                  </svg>
+                </span>
+                <div>
+                  <div style={s(`font-size:12.5px;font-weight:650;color:var(--text-heading);margin-bottom:2px;`)}>
+                    Complexity / population
+                  </div>
+                  <p style={s(`margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);`)}>
+                    High — patients who can engage with a values-based, acceptance-focused model.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:20px;`,
+            )}
+          >
+            <div style={s(`font-size:14px;font-weight:650;color:var(--text-heading);margin-bottom:12px;`)}>
+              Related therapies
+            </div>
+            <div style={s(`display:flex;flex-direction:column;`)}>
+              <button
+                type="button"
+                className="tc-btn tc-row"
+                onClick={b.goDetail}
+                style={s(
+                  `display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;border:none;border-bottom:1px solid var(--border);background:transparent;text-align:left;`,
+                )}
+              >
+                <span>
+                  <span style={s(`display:block;font-size:13px;font-weight:600;color:var(--text-heading);`)}>
+                    Child CBT
+                  </span>
+                  <span style={s(`display:block;font-size:12px;color:var(--text-soft);margin-top:2px;`)}>
+                    Child anxiety and selected depressive presentations.
+                  </span>
+                </span>
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="var(--text-soft)"
+                  strokeWidth="1.8"
+                  style={s(`flex:none;`)}
+                >
+                  <path d="m9 6 6 6-6 6" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                className="tc-btn tc-row"
+                onClick={b.goDetail}
+                style={s(
+                  `display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;border:none;border-bottom:1px solid var(--border);background:transparent;text-align:left;`,
+                )}
+              >
+                <span>
+                  <span style={s(`display:block;font-size:13px;font-weight:600;color:var(--text-heading);`)}>
+                    Supported digital CBT
+                  </span>
+                  <span style={s(`display:block;font-size:12px;color:var(--text-soft);margin-top:2px;`)}>
+                    Initial stepped-care for mild-to-moderate disorders.
+                  </span>
+                </span>
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="var(--text-soft)"
+                  strokeWidth="1.8"
+                  style={s(`flex:none;`)}
+                >
+                  <path d="m9 6 6 6-6 6" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                className="tc-btn tc-row"
+                onClick={b.goCompare}
+                style={s(
+                  `display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 0;border:none;background:transparent;text-align:left;`,
+                )}
+              >
+                <span>
+                  <span style={s(`display:block;font-size:13px;font-weight:600;color:var(--text-heading);`)}>
+                    Applied Relaxation
+                  </span>
+                  <span style={s(`display:block;font-size:12px;color:var(--text-soft);margin-top:2px;`)}>
+                    Guideline support for generalised anxiety disorder.
+                  </span>
+                </span>
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="var(--text-soft)"
+                  strokeWidth="1.8"
+                  style={s(`flex:none;`)}
+                >
+                  <path d="m9 6 6 6-6 6" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div
+            style={s(
+              `background:var(--surface-subtle);border:1px solid var(--border);border-radius:16px;padding:18px 20px;`,
+            )}
+          >
+            <div
+              style={s(
+                `display:flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--text-heading);margin-bottom:10px;`,
+              )}
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--warning-text)"
+                strokeWidth="1.8"
+              >
+                <path d="M4 6a8 3 0 1 0 16 0A8 3 0 1 0 4 6M4 6v12a8 3 0 0 0 16 0V6" />
+              </svg>
+              Source provenance
+            </div>
+            <div style={s(`font-size:12.5px;color:var(--text-muted);line-height:1.7;`)}>
+              <div>
+                Source: <strong style={s(`color:var(--text-heading);`)}>Single therapy record</strong>
+              </div>
+              <div>
+                Review: <span style={s(`color:var(--warning-text);font-weight:600;`)}>Not yet provided</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/home-screen.tsx b/src/components/therapy-compass/screens/home-screen.tsx
new file mode 100644
index 000000000..c33e57948
--- /dev/null
+++ b/src/components/therapy-compass/screens/home-screen.tsx
@@ -0,0 +1,465 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function HomeScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Home" style={s(`max-width:1100px;margin:0 auto;`)}>
+      <div style={s(`text-align:center;padding:28px 0 8px;`)}>
+        <span
+          style={s(
+            `display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:15px;background:var(--clinical-accent-soft);color:var(--clinical-accent);margin-bottom:16px;`,
+          )}
+        >
+          <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+            <circle cx="12" cy="12" r="9" />
+            <circle cx="12" cy="12" r="5" />
+            <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
+          </svg>
+        </span>
+        <h1
+          style={s(`margin:0 0 8px;font-size:30px;font-weight:700;color:var(--text-heading);letter-spacing:-0.025em;`)}
+        >
+          What therapy are you looking for?
+        </h1>
+        <p style={s(`margin:0 auto 24px;font-size:15px;color:var(--text-muted);max-width:52ch;`)}>
+          Search source-grounded therapy records by problem, symptom, skill or population — or jump into a clinical
+          pathway.
+        </p>
+      </div>
+      <div style={s(`display:flex;align-items:center;max-width:760px;margin:0 auto 14px;position:relative;`)}>
+        <svg
+          style={s(`position:absolute;left:18px;color:var(--text-soft);`)}
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.8"
+        >
+          <circle cx="11" cy="11" r="7" />
+          <path d="m20 20-3.5-3.5" />
+        </svg>
+        <input
+          aria-label="Search problem, symptom, therapy, skill, population"
+          onFocus={b.goSearch}
+          placeholder="Search problem, symptom, therapy, skill, population…"
+          style={s(
+            `width:100%;height:58px;padding:0 120px 0 50px;border:1px solid var(--border-strong);border-radius:15px;background:var(--surface);color:var(--text);font-size:16px;font-family:inherit;outline:none;box-shadow:var(--shadow-soft);`,
+          )}
+        />
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goSearch}
+          style={s(
+            `position:absolute;right:8px;display:flex;align-items:center;gap:8px;height:44px;padding:0 20px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:14px;font-weight:600;`,
+          )}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          Search
+        </button>
+      </div>
+      <div style={s(`display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:760px;margin:0 auto 36px;`)}>
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goSearch}
+          style={s(
+            `padding:8px 15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+          )}
+        >
+          Anxiety in outpatient care
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goSearch}
+          style={s(
+            `padding:8px 15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+          )}
+        >
+          Low mood &amp; motivation
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goSearch}
+          style={s(
+            `padding:8px 15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+          )}
+        >
+          Trauma-focused
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goSearch}
+          style={s(
+            `padding:8px 15px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+          )}
+        >
+          5-minute grounding
+        </button>
+      </div>
+      <div style={s(`display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px;`)}>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goRecommend}
+          style={s(
+            `display:flex;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-tight);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+            )}
+          >
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <path d="M12 3l1.8 4.7L18.5 9l-4.7 1.3L12 15l-1.8-4.7L5.5 9l4.7-1.3Z" />
+            </svg>
+          </span>
+          <span>
+            <span style={s(`display:block;font-size:14.5px;font-weight:650;color:var(--text-heading);`)}>
+              Recommend a therapy
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.4;`)}>
+              Match a clinical question to indexed options.
+            </span>
+          </span>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goPathways}
+          style={s(
+            `display:flex;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-tight);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+            )}
+          >
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <circle cx="6" cy="6" r="2.5" />
+              <circle cx="18" cy="18" r="2.5" />
+              <circle cx="6" cy="18" r="2.5" />
+              <path d="M8.5 6H15a3 3 0 0 1 3 3v6.5M6 8.5v7" />
+            </svg>
+          </span>
+          <span>
+            <span style={s(`display:block;font-size:14.5px;font-weight:650;color:var(--text-heading);`)}>
+              Open a pathway
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.4;`)}>
+              Problem-based, step-by-step workflows.
+            </span>
+          </span>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goSheets}
+          style={s(
+            `display:flex;gap:14px;padding:18px 20px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-tight);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+            )}
+          >
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <path d="M6 3h8l4 4v14H6Z" />
+              <path d="M14 3v4h4" />
+              <path d="M9 13h6M9 17h4" />
+            </svg>
+          </span>
+          <span>
+            <span style={s(`display:block;font-size:14.5px;font-weight:650;color:var(--text-heading);`)}>
+              Create a patient sheet
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.4;`)}>
+              Design and print a plain-language handout.
+            </span>
+          </span>
+        </button>
+      </div>
+      <div style={s(`display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;`)}>
+        <h2 style={s(`margin:0;font-size:17px;font-weight:680;color:var(--text-heading);`)}>Key clinical pathways</h2>
+        <button
+          type="button"
+          onClick={b.goPathways}
+          style={s(
+            `border:none;background:transparent;padding:0;font-family:inherit;color:var(--clinical-accent);font-size:13px;font-weight:600;cursor:pointer;`,
+          )}
+        >
+          View all pathways
+        </button>
+      </div>
+      <div style={s(`display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px;`)}>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goPathways}
+          style={s(
+            `text-align:left;padding:20px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent);margin-bottom:14px;`,
+            )}
+          >
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path d="M9 3a3 3 0 0 0-3 3 3 3 0 0 0-1 5.8A3 3 0 0 0 7 17a3 3 0 0 0 5 1 3 3 0 0 0 5-1 3 3 0 0 0 2-5.2A3 3 0 0 0 15 3a3 3 0 0 0-6 0Z" />
+              <path d="M12 4v14" />
+            </svg>
+          </span>
+          <span style={s(`display:block;font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:4px;`)}>
+            Mood &amp; anxiety
+          </span>
+          <span
+            style={s(`display:block;font-size:12.5px;color:var(--text-muted);line-height:1.45;margin-bottom:12px;`)}
+          >
+            Anxiety and depressive presentations across outpatient settings.
+          </span>
+          <span style={s(`font-size:11.5px;font-weight:600;color:var(--text-soft);`)}>5 linked therapy steps</span>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goPathways}
+          style={s(
+            `text-align:left;padding:20px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent);margin-bottom:14px;`,
+            )}
+          >
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <path d="M6 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.5A3.5 3.5 0 0 1 18 18Z" />
+            </svg>
+          </span>
+          <span style={s(`display:block;font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:4px;`)}>
+            Depression pathway
+          </span>
+          <span
+            style={s(`display:block;font-size:12.5px;color:var(--text-muted);line-height:1.45;margin-bottom:12px;`)}
+          >
+            Behavioural activation and structured support for low mood.
+          </span>
+          <span style={s(`font-size:11.5px;font-weight:600;color:var(--text-soft);`)}>4 linked therapy steps</span>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goPathways}
+          style={s(
+            `text-align:left;padding:20px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent);margin-bottom:14px;`,
+            )}
+          >
+            <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              <circle cx="12" cy="12" r="9" />
+              <path d="M12 7v5l3 2" />
+            </svg>
+          </span>
+          <span style={s(`display:block;font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:4px;`)}>
+            Brief support
+          </span>
+          <span
+            style={s(`display:block;font-size:12.5px;color:var(--text-muted);line-height:1.45;margin-bottom:12px;`)}
+          >
+            Time-limited, 5–15 minute intervention planning.
+          </span>
+          <span style={s(`font-size:11.5px;font-weight:600;color:var(--text-soft);`)}>3 linked therapy steps</span>
+        </button>
+      </div>
+      <div style={s(`display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;`)}>
+        <h2 style={s(`margin:0;font-size:17px;font-weight:680;color:var(--text-heading);`)}>
+          Frequently used therapies
+        </h2>
+        <button
+          type="button"
+          onClick={b.goSearch}
+          style={s(
+            `border:none;background:transparent;padding:0;font-family:inherit;color:var(--clinical-accent);font-size:13px;font-weight:600;cursor:pointer;`,
+          )}
+        >
+          Browse library
+        </button>
+      </div>
+      <div style={s(`display:grid;grid-template-columns:1fr 1fr;gap:12px;`)}>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goDetail}
+          style={s(
+            `display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent);color:#fff;flex:none;`,
+            )}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <path d="M12 3v18" />
+              <path d="m5 7-3 5.5h6L5 7Z" />
+              <path d="m19 7-3 5.5h6L19 7Z" />
+              <path d="M4 21h16" />
+              <path d="M8 7h8" />
+            </svg>
+          </span>
+          <span style={s(`flex:1;`)}>
+            <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+              Acceptance &amp; Commitment (ACT)
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+              Psychological flexibility for distress and avoidance.
+            </span>
+          </span>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.8"
+            style={s(`flex:none;`)}
+          >
+            <path d="m9 6 6 6-6 6" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goDetail}
+          style={s(
+            `display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent);color:#fff;flex:none;`,
+            )}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <path d="M13 4a1.5 1.5 0 1 0 0-.01M8 21l2-6 3 2 1 4M13 11l3-1 3 2M9 11 6 9" />
+            </svg>
+          </span>
+          <span style={s(`flex:1;`)}>
+            <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+              Behavioural Activation
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+              Re-engage with meaningful, mood-lifting activity.
+            </span>
+          </span>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.8"
+            style={s(`flex:none;`)}
+          >
+            <path d="m9 6 6 6-6 6" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goDetail}
+          style={s(
+            `display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent);color:#fff;flex:none;`,
+            )}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <path d="M12 22c4-2 7-5 7-10a7 7 0 0 0-14 0c0 5 3 8 7 10Z" />
+              <path d="M12 12c0-3 1.5-5 4-6M12 12c0-3-1.5-5-4-6" />
+            </svg>
+          </span>
+          <span style={s(`flex:1;`)}>
+            <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+              Applied Relaxation
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+              Rapid relaxation skills for anxiety and tension.
+            </span>
+          </span>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.8"
+            style={s(`flex:none;`)}
+          >
+            <path d="m9 6 6 6-6 6" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          onClick={b.goDetail}
+          style={s(
+            `display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);text-align:left;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent);color:#fff;flex:none;`,
+            )}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+              <circle cx="8" cy="8" r="2.3" />
+              <circle cx="16" cy="8" r="2.3" />
+              <path d="M3.5 19a4.5 4.5 0 0 1 9 0M11.5 19a4.5 4.5 0 0 1 9 0" />
+            </svg>
+          </span>
+          <span style={s(`flex:1;`)}>
+            <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+              Problem Management Plus
+            </span>
+            <span style={s(`display:block;font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+              Brief, practical support for stress and adversity.
+            </span>
+          </span>
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="var(--text-soft)"
+            strokeWidth="1.8"
+            style={s(`flex:none;`)}
+          >
+            <path d="m9 6 6 6-6 6" />
+          </svg>
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/other-screen.tsx b/src/components/therapy-compass/screens/other-screen.tsx
new file mode 100644
index 000000000..527e36018
--- /dev/null
+++ b/src/components/therapy-compass/screens/other-screen.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function OtherScreen() {
+  const b = useTcBindings();
+  return (
+    <section style={s(`max-width:720px;margin:60px auto;text-align:center;`)}>
+      <span
+        style={s(
+          `display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:16px;background:var(--clinical-accent-soft);color:var(--clinical-accent);margin-bottom:20px;`,
+        )}
+      >
+        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+          <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+          <path d="m9.2 12 1.9 1.9 3.7-3.8" />
+        </svg>
+      </span>
+      <h1 style={s(`margin:0 0 8px;font-size:24px;font-weight:680;color:var(--text-heading);`)}>{b.otherLabel}</h1>
+      <p style={s(`margin:0 0 22px;font-size:14.5px;color:var(--text-muted);`)}>
+        This surface uses the same Therapy Compass shell. Pick a tool from the sidebar to keep exploring the clinical
+        workspace.
+      </p>
+      <div style={s(`display:flex;gap:10px;justify-content:center;flex-wrap:wrap;`)}>
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goHome}
+          style={s(
+            `height:44px;padding:0 20px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:14px;font-weight:600;`,
+          )}
+        >
+          Go to Home
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          onClick={b.goSearch}
+          style={s(
+            `height:44px;padding:0 20px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:14px;font-weight:600;`,
+          )}
+        >
+          Search therapies
+        </button>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/pathways-screen.tsx b/src/components/therapy-compass/screens/pathways-screen.tsx
new file mode 100644
index 000000000..3bfb5fda5
--- /dev/null
+++ b/src/components/therapy-compass/screens/pathways-screen.tsx
@@ -0,0 +1,561 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function PathwaysScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Pathways" style={s(`max-width:1240px;margin:0 auto;`)}>
+      <div
+        style={s(
+          `display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap;`,
+        )}
+      >
+        <div>
+          <h1
+            style={s(`margin:0 0 6px;font-size:27px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`)}
+          >
+            Clinical Pathways
+          </h1>
+          <p style={s(`margin:0;font-size:14.5px;color:var(--text-muted);`)}>
+            Problem-based workflows generated from imported records.
+          </p>
+        </div>
+        <div style={s(`display:flex;gap:10px;`)}>
+          <button
+            type="button"
+            className="tc-btn"
+            onClick={b.goReview}
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M4 5h13M4 12h13M4 19h13M20 5v2M20 12v2M20 19v2" />
+            </svg>
+            Review queue
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-tight);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+            Open pathway
+          </button>
+        </div>
+      </div>
+      <div style={s(`display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;`)}>
+        <div style={s(`flex:1;min-width:280px;position:relative;display:flex;align-items:center;`)}>
+          <svg
+            style={s(`position:absolute;left:15px;color:var(--text-soft);`)}
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+          >
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          <input
+            aria-label="Search pathways or clinical problems"
+            placeholder="Search pathways or clinical problems…"
+            style={s(
+              `width:100%;height:46px;padding:0 15px 0 42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-family:inherit;outline:none;box-shadow:var(--shadow-tight);`,
+            )}
+          />
+        </div>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:500;box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+            <path d="M4 6h16M7 12h10M10 18h4" />
+          </svg>
+          All review states{" "}
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:9px;height:46px;padding:0 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:500;box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.7">
+            <path d="M4 6h9M4 12h6M4 18h4M17 4v14M17 18l3-3M17 18l-3-3" />
+          </svg>
+          Recently updated{" "}
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </div>
+      <div
+        style={s(
+          `display:grid;grid-template-columns:320px 1fr;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
+        )}
+      >
+        <div style={s(`border-right:1px solid var(--border);padding:18px;`)}>
+          <div style={s(`font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:14px;`)}>Pathways</div>
+          <div style={s(`display:flex;flex-direction:column;gap:10px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              style={s(
+                `display:flex;gap:12px;padding:14px;border:1px solid var(--clinical-accent-border);border-left:3px solid var(--clinical-accent);border-radius:12px;background:var(--clinical-accent-soft);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:#fff;color:var(--clinical-accent);flex:none;`,
+                )}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M9 3a3 3 0 0 0-3 3 3 3 0 0 0-1 5.8A3 3 0 0 0 7 17a3 3 0 0 0 5 1 3 3 0 0 0 5-1 3 3 0 0 0 2-5.2A3 3 0 0 0 15 3a3 3 0 0 0-6 0Z" />
+                  <path d="M12 4v14" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+                  Mood and anxiety
+                </span>
+                <span style={s(`display:block;font-size:12px;color:var(--text-muted);margin:2px 0 8px;`)}>
+                  Anxiety and depressive presentations
+                </span>
+                <span style={s(`display:flex;align-items:center;justify-content:space-between;`)}>
+                  <span style={s(`font-size:11.5px;color:var(--text-soft);`)}>4 linked steps</span>
+                  <span
+                    style={s(
+                      `font-size:11px;font-weight:600;color:var(--warning-text);background:var(--warning-bg);border:1px solid var(--warning-border);padding:2px 8px;border-radius:6px;`,
+                    )}
+                  >
+                    Needs review
+                  </span>
+                </span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="tc-btn tc-row"
+              style={s(
+                `display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M6 18a4 4 0 0 1 0-8 5 5 0 0 1 9.6-1.5A3.5 3.5 0 0 1 18 18Z" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+                  Depression pathway
+                </span>
+                <span style={s(`display:block;font-size:12px;color:var(--text-muted);margin:2px 0 8px;`)}>
+                  Depression and low motivation
+                </span>
+                <span style={s(`display:flex;align-items:center;justify-content:space-between;`)}>
+                  <span style={s(`font-size:11.5px;color:var(--text-soft);`)}>3 linked steps</span>
+                  <span
+                    style={s(
+                      `font-size:11px;font-weight:600;color:var(--warning-text);background:var(--warning-bg);border:1px solid var(--warning-border);padding:2px 8px;border-radius:6px;`,
+                    )}
+                  >
+                    Clinician review
+                  </span>
+                </span>
+              </span>
+            </button>
+            <button
+              type="button"
+              className="tc-btn tc-row"
+              style={s(
+                `display:flex;gap:12px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);text-align:left;`,
+              )}
+            >
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                )}
+              >
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <circle cx="12" cy="12" r="9" />
+                  <path d="M12 7v5l3 2" />
+                </svg>
+              </span>
+              <span style={s(`flex:1;`)}>
+                <span style={s(`display:block;font-size:14px;font-weight:650;color:var(--text-heading);`)}>
+                  Brief support pathway
+                </span>
+                <span style={s(`display:block;font-size:12px;color:var(--text-muted);margin:2px 0 8px;`)}>
+                  Time-limited intervention planning
+                </span>
+                <span style={s(`display:flex;align-items:center;justify-content:space-between;`)}>
+                  <span style={s(`font-size:11.5px;color:var(--text-soft);`)}>3 linked steps</span>
+                  <span
+                    style={s(
+                      `font-size:11px;font-weight:600;color:var(--text-muted);background:var(--surface-inset);padding:2px 8px;border-radius:6px;`,
+                    )}
+                  >
+                    Incomplete
+                  </span>
+                </span>
+              </span>
+            </button>
+          </div>
+          <p style={s(`margin:16px 0 0;font-size:11.5px;color:var(--text-soft);font-style:italic;`)}>
+            Pathways are generated from imported therapy records.
+          </p>
+        </div>
+        <div style={s(`padding:22px 24px;`)}>
+          <div style={s(`display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;`)}>
+            <span
+              style={s(
+                `display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+              )}
+            >
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                <path d="M9 3a3 3 0 0 0-3 3 3 3 0 0 0-1 5.8A3 3 0 0 0 7 17a3 3 0 0 0 5 1 3 3 0 0 0 5-1 3 3 0 0 0 2-5.2A3 3 0 0 0 15 3a3 3 0 0 0-6 0Z" />
+                <path d="M12 4v14" />
+              </svg>
+            </span>
+            <div style={s(`flex:1;`)}>
+              <div style={s(`display:flex;align-items:center;justify-content:space-between;gap:12px;`)}>
+                <h2 style={s(`margin:0;font-size:20px;font-weight:680;color:var(--text-heading);`)}>
+                  Mood and anxiety
+                </h2>
+                <span
+                  style={s(
+                    `display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--warning-text);background:var(--warning-bg);border:1px solid var(--warning-border);padding:5px 11px;border-radius:9px;`,
+                  )}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                    <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                    <path d="M12 9v4M12 17h.01" />
+                  </svg>
+                  Needs review
+                </span>
+              </div>
+              <p style={s(`margin:6px 0 8px;font-size:13.5px;line-height:1.5;color:var(--text-muted);`)}>
+                A source-linked workflow for reviewing therapy options, delivery constraints and cautions before
+                choosing a next step.
+              </p>
+              <div style={s(`display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-soft);`)}>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                  <path d="M9 15 15 9M8.5 12l-2 2a3 3 0 0 0 4 4l2-2M15.5 12l2-2a3 3 0 0 0-4-4l-2 2" />
+                </svg>
+                4 linked therapy steps
+              </div>
+            </div>
+          </div>
+          <div style={s(`position:relative;padding-left:6px;`)}>
+            <div style={s(`display:flex;flex-direction:column;gap:10px;`)}>
+              <div style={s(`display:flex;align-items:center;gap:16px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--clinical-accent);background:var(--surface);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                  )}
+                >
+                  1
+                </span>
+                <div
+                  className="tc-row"
+                  style={s(
+                    `flex:1;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);`,
+                  )}
+                >
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                    )}
+                  >
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                      <path d="M8 4h8a2 2 0 0 1 2 2v14H6V6a2 2 0 0 1 2-2Z" />
+                      <path d="M9 3h6v3H9zM9 11h6M9 15h4" />
+                    </svg>
+                  </span>
+                  <div style={s(`flex:1;`)}>
+                    <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                      Clarify the primary problem
+                    </div>
+                    <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                      Confirm target symptoms, setting, acuity and exclusions.
+                    </div>
+                  </div>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);`)}>
+                    ASSESSMENT
+                  </span>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-soft)"
+                    strokeWidth="1.8"
+                  >
+                    <path d="m9 6 6 6-6 6" />
+                  </svg>
+                </div>
+              </div>
+              <div style={s(`display:flex;align-items:center;gap:16px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--clinical-accent);background:var(--surface);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                  )}
+                >
+                  2
+                </span>
+                <div
+                  className="tc-row"
+                  style={s(
+                    `flex:1;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);`,
+                  )}
+                >
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                    )}
+                  >
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                      <path d="M6 3h8l4 4v14H6Z" />
+                      <path d="M14 3v4h4" />
+                    </svg>
+                  </span>
+                  <div style={s(`flex:1;`)}>
+                    <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                      Acceptance &amp; Commitment Therapy (ACT)
+                    </div>
+                    <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                      Review fit, contraindications and source status.
+                    </div>
+                  </div>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);`)}>
+                    THERAPY RECORD
+                  </span>
+                  <button
+                    type="button"
+                    className="tc-btn"
+                    onClick={b.goDetail}
+                    style={s(
+                      `height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;font-weight:600;`,
+                    )}
+                  >
+                    Open record
+                  </button>
+                </div>
+              </div>
+              <div style={s(`display:flex;align-items:center;gap:16px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--clinical-accent);background:var(--surface);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                  )}
+                >
+                  3
+                </span>
+                <div
+                  className="tc-row"
+                  style={s(
+                    `flex:1;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);`,
+                  )}
+                >
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                    )}
+                  >
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                      <circle cx="12" cy="6.5" r="2.5" />
+                      <path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
+                    </svg>
+                  </span>
+                  <div style={s(`flex:1;`)}>
+                    <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                      Applied Relaxation
+                    </div>
+                    <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                      Consider when anxiety-arousal regulation is the main problem.
+                    </div>
+                  </div>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);`)}>
+                    THERAPY RECORD
+                  </span>
+                  <button
+                    type="button"
+                    className="tc-btn"
+                    onClick={b.goCompare}
+                    style={s(
+                      `height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;font-weight:600;`,
+                    )}
+                  >
+                    Compare
+                  </button>
+                </div>
+              </div>
+              <div style={s(`display:flex;align-items:center;gap:16px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--clinical-accent);background:var(--surface);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                  )}
+                >
+                  4
+                </span>
+                <div
+                  className="tc-row"
+                  style={s(
+                    `flex:1;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);`,
+                  )}
+                >
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--surface-inset);color:var(--text-muted);flex:none;`,
+                    )}
+                  >
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                      <circle cx="12" cy="12" r="9" />
+                      <path d="M12 7v5l3 2" />
+                    </svg>
+                  </span>
+                  <div style={s(`flex:1;`)}>
+                    <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                      Brief low-intensity CBT
+                    </div>
+                    <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                      Check suitability for a 5–15 minute structured format.
+                    </div>
+                  </div>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);`)}>
+                    BRIEF OPTION
+                  </span>
+                  <button
+                    type="button"
+                    className="tc-btn"
+                    onClick={b.goBrief}
+                    style={s(
+                      `height:32px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;font-weight:600;`,
+                    )}
+                  >
+                    Open brief
+                  </button>
+                </div>
+              </div>
+              <div style={s(`display:flex;align-items:center;gap:16px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:2px solid var(--clinical-accent);background:var(--clinical-accent);color:#fff;font-size:12px;font-weight:700;flex:none;`,
+                  )}
+                >
+                  5
+                </span>
+                <div
+                  className="tc-row"
+                  style={s(
+                    `flex:1;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);`,
+                  )}
+                >
+                  <span
+                    style={s(
+                      `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--clinical-accent-soft);color:var(--clinical-accent);flex:none;`,
+                    )}
+                  >
+                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                      <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+                      <path d="m9.5 12 1.7 1.7 3.3-3.4" />
+                    </svg>
+                  </span>
+                  <div style={s(`flex:1;`)}>
+                    <div style={s(`font-size:13.5px;font-weight:650;color:var(--text-heading);`)}>
+                      Review and next step
+                    </div>
+                    <div style={s(`font-size:12.5px;color:var(--text-muted);margin-top:2px;`)}>
+                      Document source checks, clinician judgement and follow-up.
+                    </div>
+                  </div>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--text-soft);`)}>
+                    REVIEW
+                  </span>
+                  <svg
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="var(--text-soft)"
+                    strokeWidth="1.8"
+                  >
+                    <path d="m9 6 6 6-6 6" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style={s(
+          `display:flex;align-items:center;gap:18px;margin-top:20px;padding:18px 22px;background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:16px;`,
+        )}
+      >
+        <svg
+          width="22"
+          height="22"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="var(--warning-text)"
+          strokeWidth="1.8"
+          style={s(`flex:none;`)}
+        >
+          <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+          <path d="M12 9v4M12 17h.01" />
+        </svg>
+        <div style={s(`flex:1;`)}>
+          <div style={s(`font-size:13.5px;font-weight:650;color:var(--warning-text);`)}>
+            Clinical caution — decision support generated from imported records.
+          </div>
+          <div style={s(`font-size:12.5px;color:var(--warning-text);margin-top:2px;`)}>
+            Review source status, missing fields and patient-specific factors before clinical use.
+          </div>
+        </div>
+        <div style={s(`display:flex;gap:9px;`)}>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border:1px solid var(--warning-border);border-radius:10px;background:#fff;color:var(--text);font-size:13px;font-weight:600;`,
+            )}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <rect x="8" y="8" width="12" height="12" rx="2" />
+              <path d="M4 16V6a2 2 0 0 1 2-2h10" />
+            </svg>
+            Copy pathway
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            onClick={b.goReview}
+            style={s(
+              `height:40px;padding:0 18px;border:none;border-radius:10px;background:var(--command);color:var(--command-contrast);font-size:13px;font-weight:600;`,
+            )}
+          >
+            Start review
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/recommend-screen.tsx b/src/components/therapy-compass/screens/recommend-screen.tsx
new file mode 100644
index 000000000..5a8de556f
--- /dev/null
+++ b/src/components/therapy-compass/screens/recommend-screen.tsx
@@ -0,0 +1,575 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function RecommendScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Recommend" style={s(`max-width:1180px;margin:0 auto;`)}>
+      <h1 style={s(`margin:0 0 6px;font-size:27px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`)}>
+        Recommend Tool
+      </h1>
+      <p style={s(`margin:0 0 22px;font-size:14.5px;color:var(--text-muted);`)}>
+        Refine a clinical question with setting, time and caution constraints.
+      </p>
+      <div
+        style={s(
+          `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:22px 24px;margin-bottom:22px;`,
+        )}
+      >
+        <div style={s(`display:block;font-size:12.5px;font-weight:650;color:var(--text-heading);margin-bottom:9px;`)}>
+          What do you need help choosing?
+        </div>
+        <textarea
+          aria-label="Clinical question"
+          style={s(
+            `width:100%;min-height:74px;padding:13px 15px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--text);font-size:15px;font-family:inherit;line-height:1.5;outline:none;resize:vertical;`,
+          )}
+          defaultValue="What therapy for anxiety in outpatient care?"
+        />
+        <div
+          style={s(`font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--text-soft);margin:20px 0 10px;`)}
+        >
+          QUICK CONSTRAINTS
+        </div>
+        <div style={s(`display:flex;flex-wrap:wrap;gap:9px;`)}>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:7px;padding:8px 15px;border:1px solid var(--clinical-accent-border);border-radius:10px;background:var(--clinical-accent-soft);color:var(--clinical-accent-hover);font-size:13px;font-weight:600;`,
+            )}
+          >
+            Outpatient{" "}
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="m5 12 5 5 9-11" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Inpatient
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            5 minutes
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            15 minutes
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Handout
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Grounding
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Skills
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Psychoeducation
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Trauma caution
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `padding:8px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text-muted);font-size:13px;font-weight:500;`,
+            )}
+          >
+            Avoid mania
+          </button>
+        </div>
+        <button
+          type="button"
+          className="tc-btn tc-row"
+          style={s(
+            `display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:16px;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface-subtle);color:var(--text);font-size:13.5px;`,
+          )}
+        >
+          <span style={s(`font-weight:600;`)}>
+            Case details <span style={s(`color:var(--text-soft);font-weight:400;`)}>· Optional</span>
+          </span>
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+            <path d="m9 6 6 6-6 6" />
+          </svg>
+        </button>
+        <div style={s(`display:flex;align-items:center;justify-content:space-between;margin-top:16px;`)}>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M20 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2Z" />
+            </svg>
+            Save workflow
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:9px;height:44px;padding:0 22px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:14px;font-weight:600;box-shadow:var(--shadow-tight);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+              <circle cx="11" cy="11" r="7" />
+              <path d="m20 20-3.5-3.5" />
+            </svg>
+            Find recommendations
+          </button>
+        </div>
+      </div>
+      <div
+        style={s(
+          `background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--clinical-accent);border-radius:16px;box-shadow:var(--shadow-soft);padding:22px 24px;margin-bottom:26px;`,
+        )}
+      >
+        <div style={s(`display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;`)}>
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--clinical-accent);color:#fff;flex:none;`,
+            )}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M12 3l1.8 4.7L18.5 9l-4.7 1.3L12 15l-1.8-4.7L5.5 9l4.7-1.3Z" />
+            </svg>
+          </span>
+          <div style={s(`flex:1;`)}>
+            <div style={s(`display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:5px;`)}>
+              <span style={s(`font-size:16px;font-weight:650;color:var(--text-heading);`)}>
+                Problem Management Plus / PM+
+              </span>
+              <span
+                style={s(
+                  `font-size:11.5px;font-weight:600;color:var(--success-text);background:var(--success-bg);border:1px solid var(--success-border);padding:2px 9px;border-radius:7px;`,
+                )}
+              >
+                Strong match
+              </span>
+              <span
+                style={s(
+                  `font-size:11.5px;font-weight:600;color:var(--info-text);background:var(--info-bg);border:1px solid var(--info-border);padding:2px 9px;border-radius:7px;`,
+                )}
+              >
+                WHO-backed
+              </span>
+            </div>
+            <p style={s(`margin:0;font-size:13.5px;line-height:1.55;color:var(--text-muted);`)}>
+              A brief, transdiagnostic intervention for anxiety and low mood in adults. Well suited to{" "}
+              <strong style={s(`color:var(--text-heading);`)}>outpatient care</strong> where a short, practical,
+              skills-based approach is needed.
+            </p>
+          </div>
+        </div>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;`,
+          )}
+        >
+          <div style={s(`padding:16px 17px;background:var(--surface);`)}>
+            <div
+              style={s(
+                `display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--clinical-accent);margin-bottom:9px;`,
+              )}
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+              </svg>
+              WHAT IT TREATS
+            </div>
+            <p style={s(`margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);`)}>
+              Anxiety, worry and low mood linked to stress and life adversity — including mixed, sub-threshold
+              presentations.
+            </p>
+          </div>
+          <div style={s(`padding:16px 17px;background:var(--surface);`)}>
+            <div
+              style={s(
+                `display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--clinical-accent);margin-bottom:9px;`,
+              )}
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                <circle cx="12" cy="12" r="9" />
+                <path d="m10 8 6 4-6 4Z" />
+              </svg>
+              HOW IT HELPS
+            </div>
+            <p style={s(`margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted);`)}>
+              Teaches stress management, problem-solving, behavioural activation and social support in 4–5 structured
+              sessions.
+            </p>
+          </div>
+          <div style={s(`padding:16px 17px;background:var(--clinical-accent-soft);`)}>
+            <div
+              style={s(
+                `display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:0.05em;color:var(--clinical-accent-hover);margin-bottom:9px;`,
+              )}
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                <path d="M5 12h14M13 6l6 6-6 6" />
+              </svg>
+              WHERE TO START
+            </div>
+            <p style={s(`margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--clinical-accent-hover);`)}>
+              Open the record for full protocol, or generate a patient sheet to introduce the plan.
+            </p>
+            <div style={s(`display:flex;gap:8px;`)}>
+              <button
+                type="button"
+                className="tc-btn"
+                onClick={b.goDetail}
+                style={s(
+                  `flex:1;height:38px;border:none;border-radius:9px;background:var(--clinical-accent);color:#fff;font-size:13px;font-weight:600;`,
+                )}
+              >
+                Open record
+              </button>
+              <button
+                type="button"
+                className="tc-btn"
+                onClick={b.goSheets}
+                style={s(
+                  `flex:1;height:38px;border:1px solid var(--clinical-accent-border);border-radius:9px;background:var(--surface);color:var(--clinical-accent-hover);font-size:13px;font-weight:600;`,
+                )}
+              >
+                Sheet
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div style={s(`font-size:15px;font-weight:650;color:var(--text-heading);margin-bottom:14px;`)}>
+        Ranked clinical matches
+      </div>
+      <div style={s(`display:flex;flex-direction:column;gap:12px;`)}>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:auto minmax(240px,1.3fr) 1.1fr 1.1fr 1.1fr auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-tight);padding:16px 20px;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--clinical-accent);color:#fff;font-size:13px;font-weight:700;`,
+            )}
+          >
+            1
+          </span>
+          <div>
+            <div style={s(`font-size:14px;font-weight:650;color:var(--text-heading);margin-bottom:6px;`)}>
+              Problem Management Plus / PM+
+            </div>
+            <div style={s(`display:flex;gap:6px;flex-wrap:wrap;`)}>
+              <span
+                style={s(
+                  `font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:#f4f0ff;color:#6d3fc4;`,
+                )}
+              >
+                CBT-based
+              </span>
+              <span
+                style={s(
+                  `font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface-inset);color:var(--text-muted);`,
+                )}
+              >
+                4–5 sessions
+              </span>
+            </div>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--text-soft);margin-bottom:4px;`,
+              )}
+            >
+              TREATS
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Anxiety and low mood in stress and adversity.
+            </p>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--text-soft);margin-bottom:4px;`,
+              )}
+            >
+              HOW IT WORKS
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Stress management, problem-solving, activation, support.
+            </p>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--clinical-accent);margin-bottom:4px;`,
+              )}
+            >
+              FIRST STEP
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Manage a stressful problem step by step.
+            </p>
+          </div>
+          <div style={s(`display:flex;gap:6px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goDetail}
+              style={s(
+                `height:34px;padding:0 12px;border:none;border-radius:8px;background:var(--clinical-accent);color:#fff;font-size:12.5px;font-weight:600;`,
+              )}
+            >
+              Open
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goSheets}
+              style={s(
+                `height:34px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600;`,
+              )}
+            >
+              Sheet
+            </button>
+          </div>
+        </div>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:auto minmax(240px,1.3fr) 1.1fr 1.1fr 1.1fr auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-tight);padding:16px 20px;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface-inset);color:var(--text-muted);font-size:13px;font-weight:700;`,
+            )}
+          >
+            2
+          </span>
+          <div>
+            <div style={s(`font-size:14px;font-weight:650;color:var(--text-heading);margin-bottom:6px;`)}>
+              Applied Relaxation
+            </div>
+            <div style={s(`display:flex;gap:6px;flex-wrap:wrap;`)}>
+              <span
+                style={s(
+                  `font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--info-bg);color:var(--info-text);`,
+                )}
+              >
+                Behavioural
+              </span>
+              <span
+                style={s(
+                  `font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface-inset);color:var(--text-muted);`,
+                )}
+              >
+                8–12 sessions
+              </span>
+            </div>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--text-soft);margin-bottom:4px;`,
+              )}
+            >
+              TREATS
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Generalised anxiety and physical tension.
+            </p>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--text-soft);margin-bottom:4px;`,
+              )}
+            >
+              HOW IT WORKS
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Trains rapid relaxation to apply in daily triggers.
+            </p>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--clinical-accent);margin-bottom:4px;`,
+              )}
+            >
+              FIRST STEP
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Practise progressive muscle relaxation.
+            </p>
+          </div>
+          <div style={s(`display:flex;gap:6px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goDetail}
+              style={s(
+                `height:34px;padding:0 12px;border:none;border-radius:8px;background:var(--clinical-accent);color:#fff;font-size:12.5px;font-weight:600;`,
+              )}
+            >
+              Open
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goSheets}
+              style={s(
+                `height:34px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600;`,
+              )}
+            >
+              Sheet
+            </button>
+          </div>
+        </div>
+        <div
+          style={s(
+            `display:grid;grid-template-columns:auto minmax(240px,1.3fr) 1.1fr 1.1fr 1.1fr auto;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-tight);padding:16px 20px;`,
+          )}
+        >
+          <span
+            style={s(
+              `display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--surface-inset);color:var(--text-muted);font-size:13px;font-weight:700;`,
+            )}
+          >
+            3
+          </span>
+          <div>
+            <div style={s(`font-size:14px;font-weight:650;color:var(--text-heading);margin-bottom:6px;`)}>
+              Brief low-intensity CBT
+            </div>
+            <div style={s(`display:flex;gap:6px;flex-wrap:wrap;`)}>
+              <span
+                style={s(
+                  `font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:#f4f0ff;color:#6d3fc4;`,
+                )}
+              >
+                CBT
+              </span>
+              <span
+                style={s(
+                  `font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;background:var(--surface-inset);color:var(--text-muted);`,
+                )}
+              >
+                Guided self-help
+              </span>
+            </div>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--text-soft);margin-bottom:4px;`,
+              )}
+            >
+              TREATS
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Mild-to-moderate anxiety and depression.
+            </p>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--text-soft);margin-bottom:4px;`,
+              )}
+            >
+              HOW IT WORKS
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Structured skills and psychoeducation, clinician-guided.
+            </p>
+          </div>
+          <div>
+            <div
+              style={s(
+                `font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--clinical-accent);margin-bottom:4px;`,
+              )}
+            >
+              FIRST STEP
+            </div>
+            <p style={s(`margin:0;font-size:12px;line-height:1.4;color:var(--text-muted);`)}>
+              Map thoughts, feelings and behaviour.
+            </p>
+          </div>
+          <div style={s(`display:flex;gap:6px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goDetail}
+              style={s(
+                `height:34px;padding:0 12px;border:none;border-radius:8px;background:var(--clinical-accent);color:#fff;font-size:12.5px;font-weight:600;`,
+              )}
+            >
+              Open
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goSheets}
+              style={s(
+                `height:34px;padding:0 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:600;`,
+              )}
+            >
+              Sheet
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/search-screen.tsx b/src/components/therapy-compass/screens/search-screen.tsx
new file mode 100644
index 000000000..fff670d69
--- /dev/null
+++ b/src/components/therapy-compass/screens/search-screen.tsx
@@ -0,0 +1,800 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function SearchScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Search" style={s(`max-width:1180px;margin:0 auto;`)}>
+      <h1 style={s(`margin:0 0 6px;font-size:27px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`)}>
+        Therapy Search
+      </h1>
+      <p style={s(`margin:0 0 22px;font-size:14.5px;color:var(--text-muted);`)}>
+        Find source-grounded therapy records by problem, symptom, skill or population.
+      </p>
+      <div style={s(`display:flex;gap:12px;align-items:center;margin-bottom:16px;`)}>
+        <div style={s(`flex:1;position:relative;display:flex;align-items:center;`)}>
+          <svg
+            style={s(`position:absolute;left:16px;color:var(--text-soft);`)}
+            width="19"
+            height="19"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+          >
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          <input
+            aria-label="Search"
+            defaultValue="anxiety in outpatient care"
+            style={s(
+              `width:100%;height:52px;padding:0 16px 0 46px;border:1px solid var(--border-strong);border-radius:13px;background:var(--surface);color:var(--text);font-size:16px;font-family:inherit;outline:none;box-shadow:var(--shadow-tight);`,
+            )}
+          />
+        </div>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:52px;padding:0 18px;border:1px solid var(--border-strong);border-radius:13px;background:var(--surface);color:var(--text);font-size:14.5px;font-weight:600;`,
+          )}
+        >
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+            <path d="M4 6h16M7 12h10M10 18h4" />
+          </svg>
+          Filters
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:9px;height:52px;padding:0 26px;border:none;border-radius:13px;background:var(--command);color:var(--command-contrast);font-size:14.5px;font-weight:600;box-shadow:var(--shadow-tight);`,
+          )}
+        >
+          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+            <circle cx="11" cy="11" r="7" />
+            <path d="m20 20-3.5-3.5" />
+          </svg>
+          Search
+        </button>
+      </div>
+      <div style={s(`display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;`)}>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:500;`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5Z" />
+            <path d="M4 5.5V20.5" />
+          </svg>
+          Common
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--clinical-accent-border);border-radius:11px;background:var(--clinical-accent-soft);color:var(--clinical-accent-hover);font-size:13.5px;font-weight:600;`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <circle cx="12" cy="8" r="3.4" />
+            <path d="M5 20a7 7 0 0 1 14 0" />
+          </svg>
+          Outpatient
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:500;`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+          15 minutes
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:500;`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="M6 3h8l4 4v14H6Z" />
+            <path d="M14 3v4h4" />
+          </svg>
+          Handout
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text-muted);font-size:13.5px;font-weight:500;`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+            <path d="m12 3 2.6 5.6L20 9.3l-4 3.9 1 5.8-5-2.7-5 2.7 1-5.8-4-3.9 5.4-.7Z" />
+          </svg>
+          Skills
+        </button>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px dashed var(--border-strong);border-radius:11px;background:transparent;color:var(--text-soft);font-size:13.5px;font-weight:500;`,
+          )}
+        >
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+            <path d="M6 6l12 12M18 6 6 18" />
+          </svg>
+          Clear
+        </button>
+      </div>
+      <div style={s(`display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;`)}>
+        <div style={s(`display:flex;align-items:baseline;gap:10px;`)}>
+          <span style={s(`font-size:15px;font-weight:650;color:var(--text-heading);`)}>Top results</span>
+          <span style={s(`font-size:13px;color:var(--text-soft);`)}>8 of 24 records</span>
+        </div>
+        <button
+          type="button"
+          className="tc-btn"
+          style={s(
+            `display:flex;align-items:center;gap:6px;padding:6px 10px;border:none;background:transparent;color:var(--text-muted);font-size:13px;font-weight:500;`,
+          )}
+        >
+          Sort: Relevance{" "}
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        </button>
+      </div>
+      <div style={s(`display:flex;flex-direction:column;gap:14px;`)}>
+        <article
+          style={s(
+            `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
+          )}
+        >
+          <div
+            style={s(
+              `display:grid;grid-template-columns:minmax(300px,1fr) minmax(430px,1.35fr) auto;gap:24px;padding:20px 22px;align-items:start;`,
+            )}
+          >
+            <div style={s(`display:flex;gap:15px;`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--clinical-accent);color:#fff;flex:none;`,
+                )}
+              >
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <path d="M12 3v18" />
+                  <path d="m5 7-3 5.5h6L5 7Z" />
+                  <path d="m19 7-3 5.5h6L19 7Z" />
+                  <path d="M4 21h16" />
+                  <path d="M8 7h8" />
+                </svg>
+              </span>
+              <div style={s(`min-width:0;`)}>
+                <h3
+                  style={s(
+                    `margin:0 0 5px;font-size:16.5px;font-weight:650;color:var(--text-heading);letter-spacing:-0.01em;`,
+                  )}
+                >
+                  Acceptance &amp; Commitment Therapy (ACT)
+                </h3>
+                <p style={s(`margin:0 0 11px;font-size:13.5px;line-height:1.5;color:var(--text-muted);`)}>
+                  A structured behavioural therapy focused on psychological flexibility rather than symptom control
+                  alone.
+                </p>
+                <div style={s(`display:flex;flex-wrap:wrap;gap:7px;`)}>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:#f4f0ff;color:#6d3fc4;border:1px solid #e4d9fb;`,
+                    )}
+                  >
+                    CBT
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);`,
+                    )}
+                  >
+                    Crisis / risk
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--surface-inset);color:var(--text-muted);border:1px solid var(--border);`,
+                    )}
+                  >
+                    5-minute
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);`,
+                    )}
+                  >
+                    Handout
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div
+              style={s(
+                `display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;`,
+              )}
+            >
+              <div style={s(`padding:12px 13px;background:var(--surface);`)}>
+                <div style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--text-soft);`)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <circle cx="12" cy="12" r="9" />
+                    <path d="M12 7v5l3 2" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>WHY MATCHED</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Reviewed, complete and recently useful records first.
+                </p>
+              </div>
+              <div style={s(`padding:12px 13px;background:var(--warning-bg);`)}>
+                <div style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--warning-text);`)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                    <path d="M12 9v4M12 17h.01" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>AVOID / MODIFY</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--warning-text);`)}>
+                  Clarify the core problem is not better matched to a more specific first-line therapy.
+                </p>
+              </div>
+              <div style={s(`padding:12px 13px;background:var(--surface);`)}>
+                <div
+                  style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--clinical-accent);`)}
+                >
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+                    <path d="m9.5 12 1.7 1.7 3.3-3.4" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>BEST FIT</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Depression, anxiety-spectrum distress and broader transdiagnostic presentations.
+                </p>
+              </div>
+            </div>
+            <div style={s(`display:flex;flex-direction:column;gap:8px;align-items:flex-end;`)}>
+              <div style={s(`display:flex;gap:4px;`)}>
+                <button
+                  type="button"
+                  className="tc-btn"
+                  title="Favourite"
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);`,
+                  )}
+                >
+                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                    <path d="M12 20s-7-4.4-9.3-9A4.6 4.6 0 0 1 12 6.2 4.6 4.6 0 0 1 21.3 11C19 15.6 12 20 12 20Z" />
+                  </svg>
+                </button>
+                <button
+                  type="button"
+                  className="tc-btn"
+                  title="More"
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);`,
+                  )}
+                >
+                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <circle cx="5" cy="12" r="1.4" />
+                    <circle cx="12" cy="12" r="1.4" />
+                    <circle cx="19" cy="12" r="1.4" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div style={s(`display:flex;gap:10px;padding:0 22px 20px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goDetail}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:44px;border:none;border-radius:11px;background:var(--clinical-accent);color:#fff;font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                <path d="M14 4h6v6M20 4l-8 8" />
+                <path d="M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5" />
+              </svg>
+              Open record
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goCompare}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M12 3v18" />
+                <path d="m5 7-3 5.5h6L5 7Z" />
+                <path d="m19 7-3 5.5h6L19 7Z" />
+              </svg>
+              Compare
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goBrief}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+                <path d="M14 3v4h4" />
+              </svg>
+              Patient sheet
+            </button>
+          </div>
+        </article>
+        <article
+          style={s(
+            `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
+          )}
+        >
+          <div
+            style={s(
+              `display:grid;grid-template-columns:minmax(300px,1fr) minmax(430px,1.35fr) auto;gap:24px;padding:20px 22px;align-items:start;`,
+            )}
+          >
+            <div style={s(`display:flex;gap:15px;`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--clinical-accent);color:#fff;flex:none;`,
+                )}
+              >
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <circle cx="12" cy="6.5" r="2.5" />
+                  <path d="M6 20c0-3.3 2.7-6 6-6s6 2.7 6 6" />
+                  <path d="M9 13.5 12 11l3 2.5" />
+                </svg>
+              </span>
+              <div style={s(`min-width:0;`)}>
+                <h3
+                  style={s(
+                    `margin:0 0 5px;font-size:16.5px;font-weight:650;color:var(--text-heading);letter-spacing:-0.01em;`,
+                  )}
+                >
+                  Applied Relaxation / Relaxation-Based Therapy
+                </h3>
+                <p style={s(`margin:0 0 11px;font-size:13.5px;line-height:1.5;color:var(--text-muted);`)}>
+                  Structured relaxation-based therapy for anxiety-arousal regulation, not generic advice.
+                </p>
+                <div style={s(`display:flex;flex-wrap:wrap;gap:7px;`)}>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:#f4f0ff;color:#6d3fc4;border:1px solid #e4d9fb;`,
+                    )}
+                  >
+                    CBT
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);`,
+                    )}
+                  >
+                    Trauma
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--surface-inset);color:var(--text-muted);border:1px solid var(--border);`,
+                    )}
+                  >
+                    5-minute
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);`,
+                    )}
+                  >
+                    Handout
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div
+              style={s(
+                `display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;`,
+              )}
+            >
+              <div style={s(`padding:12px 13px;background:var(--surface);`)}>
+                <div style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--text-soft);`)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <circle cx="12" cy="12" r="9" />
+                    <path d="M12 7v5l3 2" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>WHY MATCHED</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Reviewed, complete and recently useful records first.
+                </p>
+              </div>
+              <div style={s(`padding:12px 13px;background:var(--warning-bg);`)}>
+                <div style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--warning-text);`)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                    <path d="M12 9v4M12 17h.01" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>AVOID / MODIFY</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--warning-text);`)}>
+                  Confirm the main problem is genuinely anxiety-arousal rather than compulsions needing ERP.
+                </p>
+              </div>
+              <div style={s(`padding:12px 13px;background:var(--surface);`)}>
+                <div
+                  style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--clinical-accent);`)}
+                >
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+                    <path d="m9.5 12 1.7 1.7 3.3-3.4" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>BEST FIT</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Generalised anxiety and physiological arousal in routine outpatient settings.
+                </p>
+              </div>
+            </div>
+            <div style={s(`display:flex;gap:4px;`)}>
+              <button
+                type="button"
+                className="tc-btn"
+                title="Favourite"
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <path d="M12 20s-7-4.4-9.3-9A4.6 4.6 0 0 1 12 6.2 4.6 4.6 0 0 1 21.3 11C19 15.6 12 20 12 20Z" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                className="tc-btn"
+                title="More"
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="5" cy="12" r="1.4" />
+                  <circle cx="12" cy="12" r="1.4" />
+                  <circle cx="19" cy="12" r="1.4" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div style={s(`display:flex;gap:10px;padding:0 22px 20px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goDetail}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:44px;border:none;border-radius:11px;background:var(--clinical-accent);color:#fff;font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                <path d="M14 4h6v6M20 4l-8 8" />
+                <path d="M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5" />
+              </svg>
+              Open record
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goCompare}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M12 3v18" />
+                <path d="m5 7-3 5.5h6L5 7Z" />
+                <path d="m19 7-3 5.5h6L19 7Z" />
+              </svg>
+              Compare
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goBrief}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+                <path d="M14 3v4h4" />
+              </svg>
+              Patient sheet
+            </button>
+          </div>
+        </article>
+        <article
+          style={s(
+            `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden;`,
+          )}
+        >
+          <div
+            style={s(
+              `display:grid;grid-template-columns:minmax(300px,1fr) minmax(430px,1.35fr) auto;gap:24px;padding:20px 22px;align-items:start;`,
+            )}
+          >
+            <div style={s(`display:flex;gap:15px;`)}>
+              <span
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--clinical-accent);color:#fff;flex:none;`,
+                )}
+              >
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <circle cx="8" cy="8" r="2.3" />
+                  <circle cx="16" cy="8" r="2.3" />
+                  <path d="M3.5 19a4.5 4.5 0 0 1 9 0M11.5 19a4.5 4.5 0 0 1 9 0" />
+                </svg>
+              </span>
+              <div style={s(`min-width:0;`)}>
+                <h3
+                  style={s(
+                    `margin:0 0 5px;font-size:16.5px;font-weight:650;color:var(--text-heading);letter-spacing:-0.01em;`,
+                  )}
+                >
+                  Problem Management Plus / PM+
+                </h3>
+                <p style={s(`margin:0 0 11px;font-size:13.5px;line-height:1.5;color:var(--text-muted);`)}>
+                  A brief, transdiagnostic intervention for adults experiencing distress in adversity settings.
+                </p>
+                <div style={s(`display:flex;flex-wrap:wrap;gap:7px;`)}>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);`,
+                    )}
+                  >
+                    Crisis / risk
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--surface-inset);color:var(--text-muted);border:1px solid var(--border);`,
+                    )}
+                  >
+                    Multi-session
+                  </span>
+                  <span
+                    style={s(
+                      `font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:7px;background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border);`,
+                    )}
+                  >
+                    Handout
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div
+              style={s(
+                `display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;`,
+              )}
+            >
+              <div style={s(`padding:12px 13px;background:var(--surface);`)}>
+                <div style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--text-soft);`)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <circle cx="12" cy="12" r="9" />
+                    <path d="M12 7v5l3 2" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>WHY MATCHED</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Reviewed, complete and recently useful records first.
+                </p>
+              </div>
+              <div style={s(`padding:12px 13px;background:var(--warning-bg);`)}>
+                <div style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--warning-text);`)}>
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+                    <path d="M12 9v4M12 17h.01" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>AVOID / MODIFY</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--warning-text);`)}>
+                  Source and review status must be checked before clinical use.
+                </p>
+              </div>
+              <div style={s(`padding:12px 13px;background:var(--surface);`)}>
+                <div
+                  style={s(`display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--clinical-accent);`)}
+                >
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9">
+                    <path d="M12 3 5 6v5c0 4.2 2.9 7.6 7 9 4.1-1.4 7-4.8 7-9V6Z" />
+                    <path d="m9.5 12 1.7 1.7 3.3-3.4" />
+                  </svg>
+                  <span style={s(`font-size:10.5px;font-weight:700;letter-spacing:0.05em;`)}>BEST FIT</span>
+                </div>
+                <p style={s(`margin:0;font-size:12.5px;line-height:1.45;color:var(--text-muted);`)}>
+                  Brief, practical support in outpatient and primary care settings.
+                </p>
+              </div>
+            </div>
+            <div style={s(`display:flex;gap:4px;`)}>
+              <button
+                type="button"
+                className="tc-btn"
+                title="Favourite"
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                  <path d="M12 20s-7-4.4-9.3-9A4.6 4.6 0 0 1 12 6.2 4.6 4.6 0 0 1 21.3 11C19 15.6 12 20 12 20Z" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                className="tc-btn"
+                title="More"
+                style={s(
+                  `display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text-soft);`,
+                )}
+              >
+                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="5" cy="12" r="1.4" />
+                  <circle cx="12" cy="12" r="1.4" />
+                  <circle cx="19" cy="12" r="1.4" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div style={s(`display:flex;gap:10px;padding:0 22px 20px;`)}>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goDetail}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:44px;border:none;border-radius:11px;background:var(--clinical-accent);color:#fff;font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+                <path d="M14 4h6v6M20 4l-8 8" />
+                <path d="M18 13v5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5" />
+              </svg>
+              Open record
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goCompare}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M12 3v18" />
+                <path d="m5 7-3 5.5h6L5 7Z" />
+                <path d="m19 7-3 5.5h6L19 7Z" />
+              </svg>
+              Compare
+            </button>
+            <button
+              type="button"
+              className="tc-btn"
+              onClick={b.goBrief}
+              style={s(
+                `display:flex;align-items:center;justify-content:center;gap:8px;padding:0 22px;height:44px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+                <path d="M6 3h8l4 4v14H6Z" />
+                <path d="M14 3v4h4" />
+              </svg>
+              Patient sheet
+            </button>
+          </div>
+        </article>
+      </div>
+      <div
+        style={s(
+          `margin-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--clinical-accent);border-radius:16px;box-shadow:var(--shadow-soft);padding:22px 24px;`,
+        )}
+      >
+        <div>
+          <div style={s(`font-size:14px;font-weight:650;color:var(--text-heading);margin-bottom:14px;`)}>
+            Clinical workbench
+          </div>
+          <div style={s(`display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;`)}>
+            <span style={s(`font-size:11.5px;font-weight:650;letter-spacing:0.05em;color:var(--text-soft);`)}>
+              SAVED SEARCHES
+            </span>
+            <button
+              type="button"
+              onClick={b.goSearch}
+              style={s(
+                `border:none;background:transparent;padding:0;font-family:inherit;color:var(--clinical-accent);font-size:12.5px;font-weight:600;cursor:pointer;`,
+              )}
+            >
+              View all
+            </button>
+          </div>
+          <button
+            type="button"
+            className="tc-btn tc-row"
+            onClick={b.goSearch}
+            style={s(
+              `display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-subtle);color:var(--text);font-size:13px;font-weight:500;`,
+            )}
+          >
+            <span style={s(`display:flex;align-items:center;gap:9px;`)}>
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+                <circle cx="11" cy="11" r="7" />
+                <path d="m20 20-3.5-3.5" />
+              </svg>
+              anxiety outpatient handout
+            </span>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+              <path d="m9 6 6 6-6 6" />
+            </svg>
+          </button>
+        </div>
+        <div>
+          <div style={s(`font-size:14px;font-weight:650;color:transparent;margin-bottom:14px;`)}>.</div>
+          <div style={s(`display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;`)}>
+            <span style={s(`font-size:11.5px;font-weight:650;letter-spacing:0.05em;color:var(--text-soft);`)}>
+              FAVOURITES
+            </span>
+            <button
+              type="button"
+              onClick={b.goSearch}
+              style={s(
+                `border:none;background:transparent;padding:0;font-family:inherit;color:var(--clinical-accent);font-size:12.5px;font-weight:600;cursor:pointer;`,
+              )}
+            >
+              View all
+            </button>
+          </div>
+          <button
+            type="button"
+            className="tc-btn tc-row"
+            onClick={b.goDetail}
+            style={s(
+              `display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-subtle);color:var(--text);font-size:13px;font-weight:500;`,
+            )}
+          >
+            <span style={s(`display:flex;align-items:center;gap:9px;`)}>
+              <svg
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="var(--clinical-accent)"
+                strokeWidth="1.8"
+              >
+                <path d="M12 20s-7-4.4-9.3-9A4.6 4.6 0 0 1 12 6.2 4.6 4.6 0 0 1 21.3 11C19 15.6 12 20 12 20Z" />
+              </svg>
+              Acceptance &amp; Commitment Therapy (ACT)
+            </span>
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+              <path d="m9 6 6 6-6 6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/screens/sheets-screen.tsx b/src/components/therapy-compass/screens/sheets-screen.tsx
new file mode 100644
index 000000000..09efab3de
--- /dev/null
+++ b/src/components/therapy-compass/screens/sheets-screen.tsx
@@ -0,0 +1,399 @@
+"use client";
+
+import { useTcBindings } from "../bindings";
+import { s } from "../style-utils";
+
+export function SheetsScreen() {
+  const b = useTcBindings();
+  return (
+    <section data-screen-label="Patient sheet" style={s(`max-width:1240px;margin:0 auto;`)}>
+      <div
+        className="tc-no-print"
+        style={s(
+          `display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap;`,
+        )}
+      >
+        <div>
+          <h1
+            style={s(`margin:0 0 6px;font-size:27px;font-weight:680;color:var(--text-heading);letter-spacing:-0.02em;`)}
+          >
+            Patient Sheet Builder
+          </h1>
+          <p style={s(`margin:0;font-size:14.5px;color:var(--text-muted);`)}>
+            Design, personalise and print a plain-language therapy handout.
+          </p>
+        </div>
+        <div style={s(`display:flex;gap:10px;`)}>
+          <button
+            type="button"
+            className="tc-btn"
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M6 4h12v16l-6-4-6 4Z" />
+            </svg>
+            Save draft
+          </button>
+          <button
+            type="button"
+            className="tc-btn"
+            onClick={b.printSheet}
+            style={s(
+              `display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:none;border-radius:11px;background:var(--command);color:var(--command-contrast);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-tight);`,
+            )}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
+              <path d="M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M6 14h12v7H6Z" />
+            </svg>
+            Print / PDF
+          </button>
+        </div>
+      </div>
+      <div style={s(`display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start;`)}>
+        <div
+          className="tc-builder-panel"
+          style={s(`display:flex;flex-direction:column;gap:16px;position:sticky;top:96px;`)}
+        >
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:18px 20px;`,
+            )}
+          >
+            <div style={s(`font-size:13px;font-weight:650;color:var(--text-heading);margin-bottom:12px;`)}>Therapy</div>
+            <button
+              type="button"
+              className="tc-btn"
+              style={s(
+                `display:flex;align-items:center;justify-content:space-between;width:100%;height:46px;padding:0 14px;border:1px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--text);font-size:13.5px;font-weight:600;`,
+              )}
+            >
+              <span style={s(`display:flex;align-items:center;gap:9px;`)}>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="var(--clinical-accent)"
+                  strokeWidth="1.7"
+                >
+                  <path d="M13 4a1.5 1.5 0 1 0 0-.01M8 21l2-6 3 2 1 4" />
+                </svg>
+                Behavioural Activation
+              </span>
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--text-soft)" strokeWidth="1.8">
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </button>
+            <div style={s(`font-size:13px;font-weight:650;color:var(--text-heading);margin:18px 0 10px;`)}>
+              Reading level &amp; tone
+            </div>
+            <div style={s(`display:flex;gap:2px;padding:3px;background:var(--surface-inset);border-radius:11px;`)}>
+              <button type="button" className="tc-btn" onClick={b.setTonePlain} style={b.tonePlain}>
+                Plain
+              </button>
+              <button type="button" className="tc-btn" onClick={b.setToneWarm} style={b.toneWarm}>
+                Warm
+              </button>
+              <button type="button" className="tc-btn" onClick={b.setToneClinical} style={b.toneClinical}>
+                Clinical
+              </button>
+            </div>
+          </div>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:18px 20px;`,
+            )}
+          >
+            <div style={s(`font-size:13px;font-weight:650;color:var(--text-heading);margin-bottom:6px;`)}>Sections</div>
+            <p style={s(`margin:0 0 14px;font-size:12px;color:var(--text-soft);`)}>Toggle what appears on the sheet.</p>
+            <div style={s(`display:flex;flex-wrap:wrap;gap:8px;`)}>
+              <button type="button" className="tc-btn" onClick={b.toggleAbout} style={b.chipAbout}>
+                About this therapy
+              </button>
+              <button type="button" className="tc-btn" onClick={b.toggleSteps} style={b.chipSteps}>
+                Your plan
+              </button>
+              <button type="button" className="tc-btn" onClick={b.togglePractice} style={b.chipPractice}>
+                Practice at home
+              </button>
+              <button type="button" className="tc-btn" onClick={b.toggleCoping} style={b.chipCoping}>
+                If things get hard
+              </button>
+              <button type="button" className="tc-btn" onClick={b.toggleContacts} style={b.chipContacts}>
+                Support contacts
+              </button>
+            </div>
+          </div>
+          <div
+            style={s(
+              `background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-soft);padding:18px 20px;`,
+            )}
+          >
+            <div style={s(`display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;`)}>
+              <span>
+                <span style={s(`display:block;font-size:13px;font-weight:650;color:var(--text-heading);`)}>
+                  Clinician footer
+                </span>
+                <span style={s(`display:block;font-size:12px;color:var(--text-soft);margin-top:2px;`)}>
+                  Name, service and review date.
+                </span>
+              </span>
+              <span onClick={b.toggleClinician} style={b.clinicianTrack}>
+                <span style={b.clinicianKnob}></span>
+              </span>
+            </div>
+            <p
+              style={s(
+                `margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-soft);border-top:1px solid var(--border);padding-top:12px;`,
+              )}
+            >
+              Tip: every heading and paragraph on the sheet is editable — click to rewrite it before printing.
+            </p>
+          </div>
+        </div>
+        <div className="tc-paper-wrap" style={s(`display:flex;justify-content:center;padding:8px 0;`)}>
+          <div
+            className="tc-paper"
+            style={s(
+              `width:100%;max-width:720px;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-hover);padding:52px 56px;color:#1a2230;`,
+            )}
+          >
+            <div
+              style={s(
+                `display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--clinical-accent);padding-bottom:16px;margin-bottom:24px;`,
+              )}
+            >
+              <div style={s(`display:flex;align-items:center;gap:11px;`)}>
+                <span
+                  style={s(
+                    `display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--clinical-accent-soft);color:var(--clinical-accent);`,
+                  )}
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                    <circle cx="12" cy="12" r="9" />
+                    <circle cx="12" cy="12" r="5" />
+                    <circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none" />
+                  </svg>
+                </span>
+                <span style={s(`font-size:13px;font-weight:600;color:var(--text-soft);letter-spacing:0.02em;`)}>
+                  Therapy Compass · Patient information
+                </span>
+              </div>
+              <span style={s(`font-size:11.5px;color:#8a94a3;`)}>Prepared for you</span>
+            </div>
+            <h1
+              contentEditable
+              suppressContentEditableWarning
+              style={s(
+                `margin:0 0 6px;font-size:26px;font-weight:700;color:#0f1720;outline:none;letter-spacing:-0.01em;`,
+              )}
+            >
+              Getting active again
+            </h1>
+            <p
+              contentEditable
+              suppressContentEditableWarning
+              style={s(`margin:0 0 26px;font-size:14px;color:#5b6472;outline:none;`)}
+            >
+              A simple, step-by-step plan to help you do more of what matters — even when your energy or mood is low.
+            </p>
+
+            {b.secAbout && (
+              <>
+                <div style={s(`margin-bottom:22px;`)}>
+                  <h2
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(
+                      `margin:0 0 8px;font-size:16px;font-weight:680;color:var(--clinical-accent-hover);outline:none;`,
+                    )}
+                  >
+                    About this therapy
+                  </h2>
+                  <p
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(`margin:0;font-size:13.5px;line-height:1.65;color:#2b3444;outline:none;`)}
+                  >
+                    When we feel low, we often stop doing things we used to enjoy — and that can make the low mood
+                    stronger. Behavioural activation gently reverses this by helping you plan small, doable activities
+                    that lift your mood and rebuild momentum.
+                  </p>
+                </div>
+              </>
+            )}
+
+            {b.secSteps && (
+              <>
+                <div style={s(`margin-bottom:22px;`)}>
+                  <h2
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(
+                      `margin:0 0 10px;font-size:16px;font-weight:680;color:var(--clinical-accent-hover);outline:none;`,
+                    )}
+                  >
+                    Your plan
+                  </h2>
+                  <div style={s(`display:flex;flex-direction:column;gap:10px;`)}>
+                    <div style={s(`display:flex;gap:12px;`)}>
+                      <span
+                        style={s(
+                          `display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--clinical-accent-soft);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                        )}
+                      >
+                        1
+                      </span>
+                      <p
+                        contentEditable
+                        suppressContentEditableWarning
+                        style={s(`margin:0;font-size:13.5px;line-height:1.55;color:#2b3444;outline:none;flex:1;`)}
+                      >
+                        <strong>Pick one small activity</strong> that matters to you — a short walk, calling a friend,
+                        or a task you’ve been putting off.
+                      </p>
+                    </div>
+                    <div style={s(`display:flex;gap:12px;`)}>
+                      <span
+                        style={s(
+                          `display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--clinical-accent-soft);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                        )}
+                      >
+                        2
+                      </span>
+                      <p
+                        contentEditable
+                        suppressContentEditableWarning
+                        style={s(`margin:0;font-size:13.5px;line-height:1.55;color:#2b3444;outline:none;flex:1;`)}
+                      >
+                        <strong>Decide when and where.</strong> Being specific makes it far more likely to happen.
+                      </p>
+                    </div>
+                    <div style={s(`display:flex;gap:12px;`)}>
+                      <span
+                        style={s(
+                          `display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--clinical-accent-soft);color:var(--clinical-accent);font-size:12px;font-weight:700;flex:none;`,
+                        )}
+                      >
+                        3
+                      </span>
+                      <p
+                        contentEditable
+                        suppressContentEditableWarning
+                        style={s(`margin:0;font-size:13.5px;line-height:1.55;color:#2b3444;outline:none;flex:1;`)}
+                      >
+                        <strong>Do it, then notice how you feel.</strong> Even a small sense of achievement counts.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+
+            {b.secPractice && (
+              <>
+                <div
+                  style={s(
+                    `margin-bottom:22px;background:#f4f8f9;border:1px solid #d9e9ec;border-radius:10px;padding:16px 18px;`,
+                  )}
+                >
+                  <h2
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(
+                      `margin:0 0 8px;font-size:15px;font-weight:680;color:var(--clinical-accent-hover);outline:none;`,
+                    )}
+                  >
+                    Practice at home
+                  </h2>
+                  <p
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(`margin:0;font-size:13.5px;line-height:1.6;color:#2b3444;outline:none;`)}
+                  >
+                    Aim for one planned activity each day this week. Write down what you did and rate your mood before
+                    and after (0–10). Bring this to your next session.
+                  </p>
+                </div>
+              </>
+            )}
+
+            {b.secCoping && (
+              <>
+                <div style={s(`margin-bottom:22px;`)}>
+                  <h2
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(
+                      `margin:0 0 8px;font-size:16px;font-weight:680;color:var(--clinical-accent-hover);outline:none;`,
+                    )}
+                  >
+                    If things get hard
+                  </h2>
+                  <p
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(`margin:0;font-size:13.5px;line-height:1.6;color:#2b3444;outline:none;`)}
+                  >
+                    Some days will feel harder than others — that’s normal. Make the activity smaller rather than
+                    skipping it. If your mood drops sharply or you have thoughts of harming yourself, use the contacts
+                    below straight away.
+                  </p>
+                </div>
+              </>
+            )}
+
+            {b.secContacts && (
+              <>
+                <div
+                  style={s(
+                    `margin-bottom:8px;background:#fbf6ee;border:1px solid #f0e2c8;border-radius:10px;padding:16px 18px;`,
+                  )}
+                >
+                  <h2
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(`margin:0 0 8px;font-size:15px;font-weight:680;color:#8a5a12;outline:none;`)}
+                  >
+                    Support contacts
+                  </h2>
+                  <div
+                    contentEditable
+                    suppressContentEditableWarning
+                    style={s(`font-size:13.5px;line-height:1.7;color:#2b3444;outline:none;`)}
+                  >
+                    Your clinician: ______________________ · Phone: ______________
+                    <br />
+                    In a crisis, call your local emergency number or a 24/7 crisis line.
+                  </div>
+                </div>
+              </>
+            )}
+
+            {b.sheetClinician && (
+              <>
+                <div
+                  style={s(
+                    `display:flex;justify-content:space-between;gap:16px;margin-top:26px;padding-top:16px;border-top:1px solid #e6e9ee;font-size:11.5px;color:#8a94a3;`,
+                  )}
+                >
+                  <span contentEditable suppressContentEditableWarning style={s(`outline:none;`)}>
+                    Clinician: ____________________
+                  </span>
+                  <span contentEditable suppressContentEditableWarning style={s(`outline:none;`)}>
+                    Service: ____________________
+                  </span>
+                  <span contentEditable suppressContentEditableWarning style={s(`outline:none;`)}>
+                    Reviewed: __ / __ / ____
+                  </span>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/therapy-compass/style-utils.ts b/src/components/therapy-compass/style-utils.ts
new file mode 100644
index 000000000..40b5d7a41
--- /dev/null
+++ b/src/components/therapy-compass/style-utils.ts
@@ -0,0 +1,29 @@
+import type { CSSProperties } from "react";
+
+/**
+ * Parse a raw CSS declaration string into a React style object.
+ *
+ * The Therapy Compass screens are a faithful port of a design-tool export that
+ * expresses every rule as inline CSS using the app's design tokens
+ * (`var(--surface)`, `var(--clinical-accent)`, …). Rather than re-transcribe
+ * hundreds of declarations into Tailwind arbitrary values — which would both
+ * lose fidelity and trip the `check:type-scale` guardrail — we keep the exact
+ * CSS strings and parse them at render time. Custom properties (`--foo`) are
+ * preserved verbatim; everything else is camel-cased for React.
+ *
+ * Mockup-only helper: the tiny per-render parse cost is irrelevant for a
+ * design-scratch route and never runs in the production bundle.
+ */
+export function s(css: string): CSSProperties {
+  const out: Record<string, string> = {};
+  for (const decl of css.split(";")) {
+    const idx = decl.indexOf(":");
+    if (idx === -1) continue;
+    const prop = decl.slice(0, idx).trim();
+    const value = decl.slice(idx + 1).trim();
+    if (!prop || !value) continue;
+    const key = prop.startsWith("--") ? prop : prop.replace(/-([a-z])/g, (_m, c: string) => c.toUpperCase());
+    out[key] = value;
+  }
+  return out as CSSProperties;
+}
diff --git a/src/components/therapy-compass/styles.tsx b/src/components/therapy-compass/styles.tsx
new file mode 100644
index 000000000..899de48fb
--- /dev/null
+++ b/src/components/therapy-compass/styles.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+/**
+ * Scoped helper + print styles for the Therapy Compass mockup.
+ *
+ * The design export shipped a global `<style>` block; we scope the interactive
+ * helpers under `.tc-root` so they never leak to the rest of the app, and keep
+ * a print rule that reveals only the patient-sheet "paper" (hiding the app
+ * chrome, the tool rail and the builder controls). Because this `<style>` is
+ * rendered by the Therapy Compass component, it is only present in the DOM on
+ * the `/mockups/therapy-compass` route.
+ */
+const CSS = `
+.tc-root .tc-scroll { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+.tc-root .tc-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
+.tc-root .tc-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
+.tc-root .tc-btn { transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease; cursor: pointer; font-family: inherit; }
+.tc-root .tc-btn:active { transform: translateY(0.5px); }
+.tc-root .tc-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
+.tc-root .tc-row { transition: background .12s ease; }
+.tc-root .tc-row:hover { background: var(--surface-subtle); }
+@media (max-width: 640px) {
+  .tc-root .tc-main { padding: 20px 16px 32px !important; }
+  .tc-root .tc-topnav { padding: 12px 16px !important; gap: 12px !important; }
+}
+@media print {
+  @page { size: A4 portrait; margin: 14mm; }
+  body { background: #fff !important; }
+  body * { visibility: hidden !important; }
+  .tc-paper, .tc-paper * { visibility: visible !important; }
+  .tc-paper {
+    position: absolute !important;
+    left: 0; top: 0;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+  .tc-no-print { display: none !important; }
+}
+`;
+
+export function TherapyCompassStyles() {
+  return <style>{CSS}</style>;
+}
diff --git a/src/components/therapy-compass/therapy-compass-page.tsx b/src/components/therapy-compass/therapy-compass-page.tsx
new file mode 100644
index 000000000..4183daff8
--- /dev/null
+++ b/src/components/therapy-compass/therapy-compass-page.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { ShieldCheck } from "lucide-react";
+
+import { ModeHomeVerificationFooter } from "@/components/mode-home-template";
+
+import { TcProvider, useTcBindings } from "./bindings";
+import { TherapyCompassNav } from "./nav";
+import { BriefScreen } from "./screens/brief-screen";
+import { CompareScreen } from "./screens/compare-screen";
+import { DetailScreen } from "./screens/detail-screen";
+import { HomeScreen } from "./screens/home-screen";
+import { OtherScreen } from "./screens/other-screen";
+import { PathwaysScreen } from "./screens/pathways-screen";
+import { RecommendScreen } from "./screens/recommend-screen";
+import { SearchScreen } from "./screens/search-screen";
+import { SheetsScreen } from "./screens/sheets-screen";
+import { TherapyCompassStyles } from "./styles";
+import { s } from "./style-utils";
+
+// Universal clinical verification footer — the same component every mode home
+// renders — placed at the bottom of the tool content, inside the app's chrome.
+function TherapyCompassFooter() {
+  return (
+    <div
+      className="tc-no-print"
+      style={s(`max-width:1240px;margin:30px auto 0;padding-top:20px;border-top:1px solid var(--border);`)}
+    >
+      <ModeHomeVerificationFooter
+        icon={ShieldCheck}
+        label="Decision support"
+        body="Source-grounded — review status before clinical use"
+      />
+    </div>
+  );
+}
+
+function TherapyCompassShell() {
+  const b = useTcBindings();
+  return (
+    <div
+      className="tc-root"
+      style={s(`min-height:calc(100dvh - 4rem);background:var(--surface-chrome);color:var(--text);`)}
+    >
+      <TherapyCompassNav />
+      <main className="tc-main" style={s(`min-width:0;padding:32px 40px 40px;`)}>
+        {b.isHome && <HomeScreen />}
+        {b.isSearch && <SearchScreen />}
+        {b.isDetail && <DetailScreen />}
+        {b.isCompare && <CompareScreen />}
+        {b.isRecommend && <RecommendScreen />}
+        {b.isPathways && <PathwaysScreen />}
+        {b.isBrief && <BriefScreen />}
+        {b.isSheets && <SheetsScreen />}
+        {b.isOther && <OtherScreen />}
+        <TherapyCompassFooter />
+      </main>
+    </div>
+  );
+}
+
+/**
+ * Therapy Compass — a source-grounded therapy decision-support mockup with eight
+ * screens (Home, Search, Detail, Compare, Recommend, Pathways, Brief
+ * Intervention and Patient Sheet) plus a Review-Queue placeholder. It renders
+ * inside the app's universal chrome (global header + sidebar via the mockups
+ * layout) and closes with the universal clinical verification footer; the
+ * design's own left rail is dropped, with its destinations kept reachable via a
+ * horizontal in-content nav under the global header.
+ */
+export function TherapyCompassPage() {
+  return (
+    <TcProvider>
+      <TherapyCompassStyles />
+      <TherapyCompassShell />
+    </TcProvider>
+  );
+}