BigSimmo · BigSimmo · Jul 26, 2026 · Jul 25, 2026 · Jul 25, 2026 · Jul 25, 2026
@@ -99,7 +99,9 @@
   /* Font families: bind Tailwind's font-sans / font-mono to the loaded Geist
      faces (variables set on <html> by next/font). font-mono is used for
      clinical codes and IDs (guideline refs, chunk/page numbers, versions). */
-  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
+  --font-sans:
+    var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
   --font-mono: var(--font-geist-mono), ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
 
   --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);

@@ -29,7 +29,7 @@ function RecentSearchRail() {
             className="inline-flex min-h-9 max-w-[15rem] shrink-0 items-center gap-1.5 rounded-full border border-[color:var(--border)] bg-[color:var(--surface-raised)]/78 px-3 text-xs font-semibold text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] backdrop-blur transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface)] hover:text-[color:var(--text)]"
           >
             <Search className="h-3.5 w-3.5 shrink-0 text-[color:var(--clinical-accent)]" />
-            <span className="truncate">{search}</span>
+            <span className="truncate min-w-0">{search}</span>
           </button>
         ))}
       </div>

@@ -160,9 +160,7 @@ export function CalculatorsBedsideSheetMockup() {
               <ClipboardList className="size-icon-md" aria-hidden="true" />
             </span>
             <div className="min-w-0">
-              <h1 className="truncate text-lg font-extrabold leading-tight text-[color:var(--text-heading)]">
-                Assessment sheet
-              </h1>
+              <h1 className="truncate text-lg font-extrabold text-[color:var(--text-heading)]">Assessment sheet</h1>
               <p className="truncate text-2xs font-semibold text-[color:var(--text-soft)]">
                 Run several scales in one review — a summary builds as you go.
               </p>

@@ -181,7 +181,7 @@ export function CalculatorsClinicalConsoleMockup() {
         <main className="grid min-w-0 content-start gap-4">
           <section className="grid gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-4 shadow-[var(--shadow-inset)]">
             <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
-              <h2 className="text-lg font-extrabold text-[color:var(--text-heading)]">{calc.abbrev}</h2>
+              <h2 className="text-lg font-extrabold tabular-nums text-[color:var(--text-heading)]">{calc.abbrev}</h2>
               <span className="text-sm-minus font-semibold text-[color:var(--text-soft)]">{calc.name}</span>
             </div>
             <p className="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-2 rounded-md border border-[color:var(--info-border)] bg-[color:var(--info-soft)] p-2.5 text-sm-minus font-semibold leading-5 text-[color:var(--info)]">

@@ -1,7 +1,7 @@
 "use client";
 
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   ChevronDown,
   ClipboardCheck,
@@ -588,6 +588,12 @@ export function DocumentDrawer({
     sourceType: "",
     category: "",
   });
+  const findInputRef = useRef<HTMLInputElement>(null);
+  // Sheet open-focus can land on Close before this drawer mounts; claim Find as
+  // soon as the field is in the DOM (Sources ribbon + empty-home Browse paths).
+  useLayoutEffect(() => {
+    findInputRef.current?.focus({ preventScroll: true });
+  }, [mode]);
 
   const allTypes = useMemo(() => {
     const types = new Set<string>();
@@ -744,6 +750,7 @@ export function DocumentDrawer({
       <label className="relative block">
         <Search aria-hidden="true" className={fieldIcon} />
         <input
+          ref={findInputRef}
           autoFocus
           data-sheet-autofocus="true"
           value={filter}

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { Sheet } from "@/components/ui/sheet";
@@ -118,4 +118,33 @@ describe("Sheet stacked-overlay coordination", () => {
     expect(vi.getTimerCount()).toBe(0);
     vi.useRealTimers();
   });
+
+  it("upgrades from the close-button fallback to a late-mounted data-sheet-autofocus target", async () => {
+    const onClose = vi.fn();
+    const { rerender } = render(
+      <Sheet open onClose={onClose} title="Sources" portal>
+        <p>Loading filters…</p>
+      </Sheet>,
+    );
+
+    // First open frame: no autofocus child yet, so the close control is focused.
+    await waitFor(() => {
+      const closeButton = document.querySelector<HTMLButtonElement>('button[aria-label="Close"]');
+      expect(closeButton).not.toBeNull();
+      expect(document.activeElement).toBe(closeButton);
+    });
+
+    rerender(
+      <Sheet open onClose={onClose} title="Sources" portal>
+        <input data-sheet-autofocus="true" placeholder="Find a document" />
+      </Sheet>,
+    );
+
+    // Open-focus retries must move off the close fallback onto the Find field.
+    await waitFor(() => {
+      const findField = document.querySelector<HTMLInputElement>('input[placeholder="Find a document"]');
+      expect(findField).not.toBeNull();
+      expect(document.activeElement).toBe(findField);
+    });
+  });
 });