@anthusai/papyrus 5.43.0-next.4 → 5.43.0-next.41

package/components/newsroom-board-skeleton.tsx

@@ -0,0 +1,20 @@
+import { FEED_SURFACE_PROPS } from "./reference-feed";
+
+/** The board's loading state: three columns of pulsing cards in the feed's flat tones and rounded rectangles, with no outlines. */
+export function NewsroomBoardSkeleton() {
+  return (
+    <div aria-busy="true" aria-label="Loading board records" className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3" data-board-skeleton role="status" {...FEED_SURFACE_PROPS}>
+      {Array.from({ length: 3 }, (_, column) => (
+        <div className="min-h-64 space-y-3 rounded-[20px] bg-[var(--feed-footer)] p-4" key={column}>
+          <div className="h-4 w-1/2 animate-pulse rounded-full bg-[var(--feed-control)]" />
+          {Array.from({ length: 2 }, (_, row) => (
+            <div className="h-24 rounded-2xl bg-[var(--feed-card)] p-3" key={row}>
+              <div className="h-4 w-3/4 animate-pulse rounded-full bg-[var(--feed-control)]" />
+              <div className="mt-3 h-3 w-1/2 animate-pulse rounded-full bg-[var(--feed-control)]" />
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/components/newsroom-board-view.tsx

@@ -31,6 +31,7 @@ import type { ContentItemVersionRecord } from "../lib/content-item-lifecycle";
 import { useOptionalNewsDeskClient } from "./news-desk-client-provider";
 import { NewsDeskAccessGate } from "./newsroom-access-gate";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { NewsroomBoardSkeleton } from "./newsroom-board-skeleton";
 import { NewsroomArticleEditor } from "./newsroom-article-editor";
 import { NewsroomAssignmentDetail } from "./newsroom-assignment-detail";
 import { NewsroomOpsShell, NewsroomOpsStatusBanner } from "./newsroom-ops-shell";
@@ -174,12 +175,7 @@ export function NewsroomBoardView({ subject, deskId }: { subject: NewsroomBoardS
       {error && <NewsroomOpsStatusBanner tone="error">{error}</NewsroomOpsStatusBanner>}
       {subject === "desk" && <IssueTypeFilter config={config} value={typeFilter} onChange={setTypeFilter} name="Record type" className="organizer-board-type-filter" />}
       <div className="organizer-board-body" data-detail-open={Boolean(issue)} ref={boardBodyRef} onScrollCapture={handleBoardScroll}>
-        {loading && !issues.length ? <div aria-label="Loading board records" className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3" role="status">
-          {Array.from({ length: 3 }, (_, column) => <div className="min-h-64 space-y-3 rounded-xl border bg-card p-4" key={column}>
-            <div className="h-4 w-1/2 rounded bg-muted" />
-            {Array.from({ length: 2 }, (_, row) => <div className="h-24 rounded-lg border bg-background p-3" key={row}><div className="h-4 w-3/4 rounded bg-muted" /><div className="mt-3 h-3 w-1/2 rounded bg-muted" /></div>)}
-          </div>)}
-        </div> : <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
+        {loading && !issues.length ? <NewsroomBoardSkeleton /> : <IssueCollection issues={issues} config={config} query={{ type: subject === "desk" ? issueTypeFromFilter(typeFilter) : boardType }} view={view}
           motion={lowMotion ? STATIC_MOTION : undefined}
           collapsedColumns={columnState.collapsedColumns} onToggleCollapse={columnState.toggleColumn} initialScroll="start"
           selectedIssueId={selected} detailOpen={Boolean(issue)} onSelectIssue={item => setSelected(item.id)} ariaLabel={pageTitle}

package/components/newsroom-client-shell.tsx

@@ -2,13 +2,14 @@ import { NewsDeskClientProvider } from "./news-desk-client-provider";
 import { createDemoCategorySteeringDashboard } from "../lib/category-repository";
 import { resolveDevSandboxEditorAuth } from "../lib/dev-sandbox-editor-auth";
 import { isLocalPreviewEnabled } from "../lib/local-preview";
+import { withReferenceFeedFixture } from "../lib/local-preview-feed-fixture";
 import { getBrandNewsroomSectionsConfigPath, resolveActiveSiteBrand } from "../lib/site-brand-tenant";
 
 export function NewsroomClientShell({ children }: Readonly<{ children: React.ReactNode }>) {
   const devSandboxEditorAuth = resolveDevSandboxEditorAuth();
   const activeBrand = resolveActiveSiteBrand();
   const localPreviewDashboard = isLocalPreviewEnabled()
-    ? createDemoCategorySteeringDashboard(activeBrand.id, getBrandNewsroomSectionsConfigPath(activeBrand))
+    ? withReferenceFeedFixture(createDemoCategorySteeringDashboard(activeBrand.id, getBrandNewsroomSectionsConfigPath(activeBrand)))
     : null;
 
   return (

package/components/newsroom-ops-overview.tsx

@@ -2,18 +2,11 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useMemo } from "react";
-import { Badge } from "./ui/badge";
+import { useCallback, useMemo } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
-import type { AssignmentRecord, NewsroomSectionRecord, ReferenceRecord } from "../lib/category-repository";
+import type { AssignmentRecord, NewsroomSectionRecord, ReferenceAttachmentRecord, ReferenceRecord } from "../lib/category-repository";
 import { getNewsroomNavHref } from "../lib/newsroom-nav";
-import {
-  filterReferencesByStatus,
-  formatReferenceListDate,
-  referenceDisplayTitle,
-  referenceLineageId,
-  selectCanonicalReferenceRecords,
-} from "../lib/newsroom-references";
+import { referenceLineageId, selectCanonicalReferenceRecords, type ReferenceCurationAction } from "../lib/newsroom-references";
 import {
   buildNewsroomSectionHref,
   displayNewsroomSectionShortTitle,
@@ -21,9 +14,15 @@ import {
   newsroomDeskKind,
   sortNewsroomSections,
 } from "../lib/newsroom-sections";
-import { newsroomInboxRowClassName } from "../lib/newsroom-list-selection";
+import { cn } from "../lib/utils";
+import { FEED_SURFACE_PROPS } from "./reference-feed";
 import type { RelevanceDecisionView } from "../lib/relevance-decisions";
+import type { ReferenceRejectionReasonCode } from "../lib/reference-policy";
+import { referencePreviewsByLineage, type ReferencePreview } from "../lib/reference-preview";
+import type { NotificationFixture } from "./notification-center";
 import { NotificationCenter } from "./notification-center";
+import type { CorrectCaptureAction } from "./reference-capture-client";
+import type { ReviewChoice } from "./reference-review-card";
 
 type NewsroomOpsOverviewProps = {
   assignments: AssignmentRecord[];
@@ -33,26 +32,57 @@ type NewsroomOpsOverviewProps = {
   humanCuratedReferenceLineageIds?: ReadonlySet<string>;
   newsroomSections: NewsroomSectionRecord[];
   references: ReferenceRecord[];
+  referenceAttachments?: ReferenceAttachmentRecord[];
+  /** True until the References have been read; a saved copy of the last view fills the page meanwhile. */
+  loading?: boolean;
+  savedCopy?: { references: ReferenceRecord[]; previews: Array<[string, ReferencePreview]>; decisions: Array<[string, RelevanceDecisionView]> } | null;
+  predictionState?: "loading" | "ready" | "error";
+  /** Words for why a rating cannot be saved right now, or null. */
+  disabledReason?: string | null;
+  onReview?: (reference: ReferenceRecord, action: ReferenceCurationAction, options?: { reasonCode?: ReferenceRejectionReasonCode | null; note?: string; decisionRelationId?: string; shareable?: boolean }) => Promise<void> | void;
+  /** Saves a pasted or corrected capture (the `correctReferenceCapture` action). Without it the capture panel has no edit action. */
+  onCorrectCapture?: CorrectCaptureAction;
+  /** Local real-data preview of the Notification Center (scripts/export-notification-center-fixture.py). */
+  notificationFixture?: NotificationFixture | null;
 };
 
 const NO_DECISIONS: ReadonlyMap<string, RelevanceDecisionView> = new Map();
-const NO_IDS: ReadonlySet<string> = new Set();
 
 export function NewsroomOpsOverview({
   actorLabel = "",
   assignments,
   decisions = NO_DECISIONS,
   demo = false,
-  humanCuratedReferenceLineageIds = NO_IDS,
+  humanCuratedReferenceLineageIds,
+  disabledReason = null,
+  loading = false,
   newsroomSections,
+  notificationFixture = null,
+  onCorrectCapture,
+  onReview,
+  predictionState = "ready",
+  referenceAttachments = [],
   references,
+  savedCopy = null,
 }: NewsroomOpsOverviewProps) {
   const pathname = usePathname();
-  const canonicalReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
-  const pendingReferences = useMemo(
-    () => filterReferencesByStatus(canonicalReferences, "pending").slice(0, 5),
-    [canonicalReferences],
-  );
+  const liveReferences = useMemo(() => selectCanonicalReferenceRecords(references), [references]);
+  // Until the live read arrives, a saved copy of the last view fills the page. It is display only.
+  const showingSavedCopy = loading && !liveReferences.length && Boolean(savedCopy?.references.length);
+  const canonicalReferences = showingSavedCopy ? savedCopy!.references : liveReferences;
+  const shownDecisions = useMemo(() => (showingSavedCopy && !decisions.size ? new Map(savedCopy!.decisions) : decisions), [decisions, savedCopy, showingSavedCopy]);
+  const previews = useMemo(() => {
+    const live = referencePreviewsByLineage(referenceAttachments);
+    return showingSavedCopy && !live.size ? new Map(savedCopy!.previews) : live;
+  }, [referenceAttachments, savedCopy, showingSavedCopy]);
+  const rateReference = useCallback(async (reference: ReferenceRecord, choice: ReviewChoice, reasonCode: ReferenceRejectionReasonCode | null, note?: string) => {
+    const decision = shownDecisions.get(referenceLineageId(reference));
+    await onReview?.(reference, choice, {
+      reasonCode: choice === "reject" ? reasonCode : null,
+      ...(note ? { note } : {}),
+      ...(decision ? { decisionRelationId: decision.decisionRelationId, shareable: false } : {}),
+    });
+  }, [onReview, shownDecisions]);
   const attentionAssignments = useMemo(
     () => assignments
       .filter((assignment) => {
@@ -68,58 +98,21 @@ export function NewsroomOpsOverview({
   );
   const coreDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "core"), [desks]);
   const rotatingDesks = useMemo(() => desks.filter(desk => newsroomDeskKind(desk) === "rotating"), [desks]);
+  const rateDisabled = disabledReason ?? (showingSavedCopy ? "Confirming your sign-in. You can answer in a moment." : null);
 
-  return (
-    <div
-      className="space-y-8 font-sans"
-      data-news-desk-section="overview"
-      data-newsroom-ops-home="true"
-    >
-      <div className="space-y-8" data-newsroom-overview-feeds>
-        <div aria-label="Notification Center feed" className="newsroom-overview-feed-frame rounded-xl border bg-card p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" data-newsroom-overview-notifications role="region" tabIndex={0}>
-          <NotificationCenter
-            actorLabel={actorLabel}
-            decisions={decisions}
-            demo={demo}
-            humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
-            references={canonicalReferences}
-          />
-        </div>
-        <section aria-label="Needs attention" className="space-y-3">
-          <h2 className="text-sm font-medium text-muted-foreground">Needs attention</h2>
-          {pendingReferences.length || attentionAssignments.length ? (
+  const below = (
+    <div className="space-y-12 pt-6" data-newsroom-overview-below {...FEED_SURFACE_PROPS}>
+        {attentionAssignments.length ? (
+          <section aria-label="Open assignments" className="space-y-3">
+            <h2 className="text-sm font-medium text-muted-foreground">Open assignments</h2>
             <div className="space-y-2">
-              {pendingReferences.map((reference) => {
-                const lineageId = referenceLineageId(reference);
-                const href = getNewsroomNavHref(`/newsroom/references/${encodeURIComponent(lineageId)}`, demo);
-                const active = pathname === href || pathname.startsWith(`${href}/`);
-                return (
-                  <Link
-                    aria-current={active ? "true" : undefined}
-                    className={newsroomInboxRowClassName(active)}
-                    data-newsroom-inbox-item="reference"
-                    data-newsroom-list-row
-                    data-selected={active || undefined}
-                    data-newsroom-card
-                    data-newsroom-card-id={lineageId}
-                    href={href}
-                    key={lineageId}
-                  >
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-sm font-medium text-foreground">{referenceDisplayTitle(reference)}</p>
-                      <p className="text-xs text-muted-foreground">Review source intake · {formatReferenceListDate(reference)}</p>
-                    </div>
-                    <Badge className="mt-0.5 shrink-0" variant="outline">Pending</Badge>
-                  </Link>
-                );
-              })}
               {attentionAssignments.map((assignment) => {
                 const href = getNewsroomNavHref(`/newsroom/assignments/${encodeURIComponent(assignment.id)}`, demo);
                 const active = pathname === href || pathname.startsWith(`${href}/`);
                 return (
                   <Link
                     aria-current={active ? "true" : undefined}
-                    className={newsroomInboxRowClassName(active)}
+                    className={cn("flex items-start gap-3 rounded-[16px] bg-[var(--feed-card)] p-3 text-foreground outline-none transition-colors hover:bg-[var(--feed-control)] focus-visible:ring-2 focus-visible:ring-ring", active && "bg-[var(--feed-control)]")}
                     data-newsroom-inbox-item="assignment"
                     data-newsroom-list-row
                     data-selected={active || undefined}
@@ -130,19 +123,13 @@ export function NewsroomOpsOverview({
                       <p className="truncate text-sm font-medium text-foreground">{assignment.title}</p>
                       <p className="text-xs text-muted-foreground">Assignment · {assignment.assignmentTypeKey}</p>
                     </div>
-                    <Badge className="mt-0.5 shrink-0" variant="secondary">{assignment.status}</Badge>
+                    <span className="mt-0.5 shrink-0 rounded-full bg-[var(--feed-control)] px-2 py-0.5 text-xs font-medium">{assignment.status}</span>
                   </Link>
                 );
               })}
             </div>
-          ) : (
-            <Card>
-              <CardContent className="p-4 text-sm text-muted-foreground">
-                No pending references or open assignments. Check those destinations for other work.
-              </CardContent>
-            </Card>
-          )}
-        </section>
+          </section>
+        ) : null}
 
         {desks.length ? (
           <section aria-label="Sections" className="space-y-3" data-newsroom-ops-desks>
@@ -156,7 +143,7 @@ export function NewsroomOpsOverview({
                   href={buildNewsroomSectionHref(section.id, demo)}
                   key={section.id}
                 >
-                  <Card className="h-full transition-colors hover:border-primary/30">
+                  <Card className="h-full rounded-[20px] border-0 bg-[var(--feed-card)] shadow-none ring-0 transition-colors hover:bg-[var(--feed-control)]">
                     <CardHeader className="p-4">
                       <CardTitle className="text-base font-semibold">{section.title}</CardTitle>
                       <CardDescription className="uppercase tracking-wide text-[0.65rem]">
@@ -176,7 +163,7 @@ export function NewsroomOpsOverview({
                   href={buildNewsroomSectionHref(section.id, demo)}
                   key={section.id}
                 >
-                  <Card className="h-full transition-colors hover:border-primary/30">
+                  <Card className="h-full rounded-[20px] border-0 bg-[var(--feed-card)] shadow-none ring-0 transition-colors hover:bg-[var(--feed-control)]">
                     <CardHeader className="p-4">
                       <CardTitle className="text-base font-semibold">{section.title}</CardTitle>
                       <CardDescription className="uppercase tracking-wide text-[0.65rem]">
@@ -189,6 +176,34 @@ export function NewsroomOpsOverview({
             </div> : null}
           </section>
         ) : null}
+    </div>
+  );
+
+  return (
+    <div
+      className="h-full font-sans"
+      data-news-desk-section="overview"
+      data-newsroom-ops-home="true"
+    >
+      <div className="h-full" data-newsroom-overview-feeds>
+        <div className="h-full" data-newsroom-overview-notifications>
+          <NotificationCenter
+            below={below}
+            actorLabel={actorLabel}
+            decisions={shownDecisions}
+            demo={demo}
+            fixture={notificationFixture}
+            humanCuratedReferenceLineageIds={humanCuratedReferenceLineageIds}
+            onCorrectCapture={onCorrectCapture}
+            onRateReference={rateReference}
+            referenceAttachments={referenceAttachments}
+            predictionLoading={predictionState === "loading"}
+            previews={previews}
+            referenceDisabledReason={rateDisabled}
+            references={canonicalReferences}
+            referencesLoading={loading && !canonicalReferences.length}
+          />
+        </div>
       </div>
     </div>
   );

package/components/newsroom-ops-shell.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { SearchIcon } from "lucide-react";
 import { Button } from "./ui/button";
 import { Separator } from "./ui/separator";
 import { cn } from "../lib/utils";
@@ -143,6 +142,8 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
     media.addEventListener("change", change);
     return () => { document.removeEventListener("focusin", remember); media.removeEventListener("change", change); cancelAnimationFrame(frame); };
   }, []);
+  // The mobile top bar prefers the brand's compact mark, then scales the full logo; the serif title is the no-logo fallback.
+  const MastheadLogo = SITE_BRAND.components?.NewsroomLogoCompact ?? SITE_BRAND.components?.NewsroomLogo;
   const activePath = browserPathToInternalNewsroomPath(pathname ?? "/newsroom");
   const sidebarToggleLabel = collapsed ? "Expand sidebar" : "Collapse sidebar";
   const sidebarToggle = <button type="button" className="organizer-toggle" title={sidebarToggleLabel}
@@ -162,10 +163,10 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
     <div className="organizer-workspace">
       <header className="organizer-topbar" data-newsroom-ops-topbar>
         {showNavigation && collapsed && sidebarToggle}
-        <Link className="organizer-masthead" href={backHref} title={backLabel}>{appTitle}</Link>
+        <Link className="organizer-masthead" href={backHref} title={backLabel}>{MastheadLogo ? <MastheadLogo className="organizer-masthead-logo" /> : appTitle}</Link>
         <h1 data-newsroom-ops-title>{pageTitle}</h1><OrganizerSearch demo={demo} /><div className="organizer-header-actions">{headerActions}</div><Account placement="header" />
       </header>
-      <main className="organizer-main">{demo && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
+      <main className="organizer-main">{demo && !session?.shell.dashboard?.realDataPreview && <p className="organizer-demo-notice">Demo workspace · synthetic examples</p>}{children}</main>
     </div>
     {showNavigation && <NewsroomMobileNavigation activeTab={activeTab} items={ORGANIZER_PRIMARY_NAV.map(item => ({ ...item, href: getNewsroomNavHref(item.path, demo) }))}
       chat={consoleState?.shouldOfferConsole ? { open: consoleState.open, onOpen: consoleState.openConsole } : undefined}
@@ -177,27 +178,6 @@ export function NewsroomOpsShell({ activeTab, appTitle, backHref = "/", backLabe
   </div>;
 }
 
-export function NewsroomOpsSearchButton({
-  disabled,
-  onPress,
-}: {
-  disabled?: boolean;
-  onPress?: () => void;
-}) {
-  return (
-    <Button
-      aria-label="Search knowledge base"
-      disabled={disabled}
-      onClick={onPress}
-      size="icon-sm"
-      type="button"
-      variant="outline"
-    >
-      <SearchIcon className="size-4" />
-    </Button>
-  );
-}
-
 export function NewsroomOpsStatusBanner({
   children,
   tone = "info",
@@ -208,10 +188,10 @@ export function NewsroomOpsStatusBanner({
   return (
     <div
       className={cn(
-        "mb-4 rounded-xl border px-3 py-2 text-sm",
-        tone === "error" && "border-destructive/30 bg-destructive/10 text-destructive",
-        tone === "ok" && "border-primary/20 bg-primary/10 text-foreground",
-        tone === "info" && "border-border bg-muted/40 text-foreground",
+        // A success is announced to screen readers and never drawn: it would push the page down. Errors and notes are flat fills, no outlines.
+        tone === "ok" ? "sr-only" : "mb-4 rounded-lg px-3 py-2 text-sm",
+        tone === "error" && "bg-destructive/10 text-destructive",
+        tone === "info" && "bg-muted/60 text-foreground",
       )}
       role="status"
     >

package/components/newsroom-organizer.css

@@ -16,15 +16,14 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-destinations a[aria-current=page]{color:var(--org-ink);box-shadow:inset 3px 0 0 var(--org-accent)}
 .newsroom-organizer :is(a,button):focus-visible,.organizer-menu :is(a,button):focus-visible{outline:2px solid currentColor;outline-offset:-3px}
 .organizer-workspace{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;padding:0 16px}
-.organizer-topbar{height:48px;min-height:48px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--org-line)}
+.organizer-topbar{height:48px;min-height:48px;display:flex;align-items:center;gap:16px}
 .organizer-masthead{font:900 28px var(--font-wordmark),Georgia,serif;white-space:nowrap;max-width:30vw;overflow:hidden;text-overflow:ellipsis}
+.organizer-masthead-logo{display:block;height:24px;width:auto;max-width:36vw;overflow:visible}
 .organizer-topbar h1{font:400 12px var(--kb-theme-ui-font);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
 .organizer-toggle{display:flex;align-items:center;justify-content:center;width:36px;min-height:36px;padding:0;border:1px solid var(--org-line);flex-shrink:0}
 .organizer-sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.organizer-sidebar-head .organizer-brand{flex:1;min-width:0}
 .organizer-header-actions{display:flex;align-items:center;gap:8px;min-width:0;max-width:45%;overflow-x:auto}
 .organizer-main{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;flex:1;padding:16px 0}
-.newsroom-overview-feed-frame{height:auto}
-@media(min-width:640px){.newsroom-overview-feed-frame{height:38rem;overflow-y:auto}}
 .organizer-main>[data-category-steering]{min-height:0}.organizer-demo-notice{font-size:11px;color:var(--org-muted);margin-bottom:12px}
 .organizer-account{display:flex;align-items:center;gap:10px;min-height:44px;flex-shrink:0;border:1px solid var(--org-line);padding:8px;text-align:left;border-radius:3px}
 .organizer-account span{min-width:0}.organizer-account strong{display:block;font:600 11px var(--kb-theme-ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.organizer-account small{display:block;font-size:9px;color:var(--org-muted);margin-top:2px}
@@ -35,6 +34,17 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .organizer-bottom-nav{display:none}
 .organizer-bottom-nav button{appearance:none;border:0;background:transparent;color:inherit}
 .organizer-main:has(.organizer-native-board){display:flex;overflow:hidden}
+@media (min-width:768px){
+.organizer-main:has(>[data-category-steering]>[data-news-desk-section=references]){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
+.organizer-main>[data-category-steering]:has(>[data-news-desk-section=references]){display:flex;flex-direction:column;flex:1;min-height:0}
+.organizer-main:has(>[data-category-steering]>[data-newsroom-ops-home]){display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
+.organizer-main>[data-category-steering]:has(>[data-newsroom-ops-home]){display:flex;flex-direction:column;flex:1;min-height:0}
+[data-newsroom-ops-home]{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}
+[data-newsroom-ops-home]>[data-newsroom-overview-feeds]{display:contents}
+[data-newsroom-overview-notifications]{display:flex;flex-direction:column;flex:0 0 100%;min-height:0}
+[data-newsroom-overview-notifications]>[data-notification-center]{flex:1;min-height:0}
+[data-newsroom-overview-feeds]>:not([data-newsroom-overview-notifications]){flex:none}
+}
 .organizer-native-board{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;gap:8px}
 .organizer-board-view-toggle{display:flex;gap:4px;flex-shrink:0}
 .organizer-header-button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px;border:1px solid var(--org-line);font:inherit;color:inherit;background:transparent;text-decoration:none;white-space:nowrap;cursor:pointer}
@@ -184,6 +194,17 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .story-trail-row{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
 .story-trail-meta,.story-trail-empty{font-size:12px;color:var(--org-muted);margin:0}
 .story-trail-chip{font-size:11px;border:1px solid var(--org-ink);padding:0 6px;text-transform:uppercase;letter-spacing:.04em}
+.story-trail-reference{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:12px;align-items:start;background:color-mix(in srgb,var(--org-ink) 6%,transparent);border-radius:10px;padding:12px}
+.story-trail-reference:not(:has(.story-trail-reference-image)){grid-template-columns:minmax(0,1fr)}
+.story-trail-reference-image{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:color-mix(in srgb,var(--org-ink) 10%,transparent)}
+.story-trail-reference-text{display:grid;gap:4px;min-width:0}
+.story-trail-reference-links{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px}
+.story-trail-reference-links a,.reference-stories a{display:inline-flex;align-items:center;gap:4px}
+.story-trail-role{display:inline-flex;align-items:center;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:color-mix(in srgb,var(--org-ink) 12%,transparent);border-radius:999px;padding:1px 8px}
+.reference-stories{display:grid;gap:8px}
+.reference-stories h3{margin:0;font-size:14px;font-weight:500}
+.reference-stories ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
+.reference-stories li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;background:color-mix(in srgb,var(--org-ink) 6%,transparent);border-radius:10px;padding:10px 12px}
 .story-trail-message pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0 0;font-size:12px;max-height:320px;overflow:auto}
 .story-trail-message summary{cursor:pointer;font-size:13px}
 @container (min-width:900px){.story-trail{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;align-items:start}}
@@ -347,3 +368,106 @@ body:has(.newsroom-organizer)>[data-staging-banner]{flex-shrink:0}
 .news-desk-columns--administration .news-desk-newsletter__text{margin:0;padding:12px;max-height:280px;overflow:auto;border:1px solid var(--org-line);font:400 12px/1.5 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
 .news-desk-columns--administration .news-desk-newsletter__filters{display:flex;flex-wrap:wrap;gap:12px 24px}
 .news-desk-columns--administration .news-desk-newsletter__filters .news-desk-doctrine-card__field{min-width:180px}
+
+/* The References feed is rounded and borderless (Ryan's design rule): flat tones and rounded rectangles instead of lines and boxes.
+   The newsroom chrome squares every "rounded" class above; inside a [data-feed-surface] the rounded classes mean what they say.
+   The repeated attribute raises specificity over the squaring rules without !important escalation. */
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-full"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-full"] { border-radius: var(--feed-radius-pill) !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[20px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[20px]"] { border-radius: var(--feed-radius-lg) !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-2xl"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-2xl"] { border-radius: var(--feed-radius-md) !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-[16px]"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-[16px]"] { border-radius: var(--feed-radius-md) !important; }
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface] [class*="rounded-3xl"],
+.newsroom-organizer[data-kanbus-theme] [data-feed-surface][data-feed-surface][data-feed-surface][class*="rounded-3xl"] { border-radius: var(--feed-radius-xl) !important; }
+
+/* The mobile sheet is portaled outside .newsroom-organizer; it carries the theme attributes itself, so the same radii apply inside it. */
+[data-kanbus-theme][data-feed-surface] [class*="rounded-full"] { border-radius: var(--feed-radius-pill) !important; }
+[data-kanbus-theme][data-feed-surface] [class*="rounded-[20px]"] { border-radius: var(--feed-radius-lg) !important; }
+[data-kanbus-theme][data-feed-surface] [class*="rounded-2xl"], [data-kanbus-theme][data-feed-surface] [class*="rounded-[16px]"] { border-radius: var(--feed-radius-md) !important; }
+[data-kanbus-theme][data-feed-surface] [class*="rounded-3xl"] { border-radius: var(--feed-radius-xl) !important; }
+
+/* Feed tones. Light: cards a touch lighter than the page, footers between, controls a touch darker. Dark: each step lifts toward the ink.
+   Also set on the portaled mobile sheet, which carries the theme attributes itself. */
+[data-kanbus-theme] [data-feed-surface], [data-kanbus-theme][data-feed-surface] {
+  --feed-card: color-mix(in oklab, var(--kb-theme-paper) 35%, white);
+  --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 70%, white);
+  --feed-control: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+  /* Corner radii of the whole feed layer, in one place (Ryan, 2026-10-27: half of the first design). lg: cards and the detail pane;
+     md: rating cells, buttons, textareas; xl: sheets; pill: chips, filters and toggles (a rounded rectangle, not a capsule). */
+  --feed-radius-xl: 12px;
+  --feed-radius-lg: 10px;
+  --feed-radius-md: 8px;
+  --feed-radius-pill: 8px;
+  /* Verdict tones for the rating grid. Hue is never the only signal: the cell also carries a CircleCheck or
+     CircleX and the word Match or Miss. Named here, in the feed layer, because the component must not hold
+     literal palette values and because Tailwind's dark: variant (.dark *) never fires in this app. */
+  --feed-verdict-match-tint: #05966933;
+  --feed-verdict-match-ink: #064e3b;
+  --feed-verdict-match-fill: #059669;
+  --feed-verdict-miss-tint: #dc262633;
+  --feed-verdict-miss-ink: #7f1d1d;
+  --feed-verdict-miss-fill: #dc2626;
+  /* The quiet step for an unpredicted cell and a switched-off button. */
+  --feed-quiet: 0.6;
+}
+[data-kanbus-theme][data-color-mode="dark"] [data-feed-surface], [data-kanbus-theme][data-color-mode="dark"][data-feed-surface] {
+  --feed-card: color-mix(in oklab, var(--kb-theme-paper) 94%, var(--kb-theme-ink));
+  --feed-footer: color-mix(in oklab, var(--kb-theme-paper) 90%, var(--kb-theme-ink));
+  --feed-control: color-mix(in oklab, var(--kb-theme-paper) 80%, var(--kb-theme-ink));
+  /* Dark verdicts lift toward the tint rather than down into it, so the ink reads on a dark card. */
+  --feed-verdict-match-tint: #34d39933;
+  --feed-verdict-match-ink: #d1fae5;
+  --feed-verdict-match-fill: #34d399;
+  --feed-verdict-miss-tint: #f8717133;
+  --feed-verdict-miss-ink: #fee2e2;
+  --feed-verdict-miss-fill: #f87171;
+}
+
+/* Borderless detail pane, Add panel and mobile sheet ([data-feed-flat]): no border, rule or box anywhere inside. Regions are told apart
+   by tone (card, footer, control) and shapes are rounded rectangles. The repeated attribute outranks the newsroom chrome's own rules. */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat],
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] * { border-width: 0 !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] *:not(:focus-visible) { box-shadow: none; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is([data-slot=separator], hr) { display: none !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button], [data-slot=badge]):not([aria-pressed=true]):not([data-slot=sheet-close]):not([class*="hover:bg-muted"]) {
+  background: var(--feed-control) !important; border-radius: var(--feed-radius-pill) !important; color: var(--foreground, inherit);
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true]:not([class*="destructive"]) {
+  background: var(--primary) !important; color: var(--primary-foreground) !important; border-radius: var(--feed-radius-pill) !important;
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(button, [role=button])[aria-pressed=true][class*="destructive"] { border-radius: var(--feed-radius-pill) !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] :is(textarea, input:not([type=radio]):not([type=checkbox]), select, details, [data-cyclotron-choice]:not([data-predicted])) {
+  background: var(--feed-control) !important; border-radius: 16px !important;
+}
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-cyclotron-choice] { border-radius: var(--feed-radius-pill) !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-review-queue-bar] { background: var(--feed-footer) !important; }
+/* The decision control keeps one corner across its segments and its reason field, and its predicted segment
+   keeps its tones apart: the flat rules above give every unpressed button the same control fill, which would
+   leave the predicted side and an untouched side looking identical. */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-decision-control] :is(button, textarea) { border-radius: var(--feed-radius-md) !important; }
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-decision-control] [data-review-choice][data-state="idle"] { background: color-mix(in oklab, var(--feed-control) 45%, transparent) !important; }
+
+/* The rating grid keeps its own rounded rectangles in the borderless panes (not the pill shape the flat rules give other buttons). */
+[data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat][data-feed-flat] [data-rating-grid] :is(button, [data-cyclotron-choice]) { border-radius: var(--feed-radius-md) !important; }
+
+/* Flat chrome (Ryan, 2026-10-28): the shell has no outlines or rules either. Controls are tone fills in rounded rectangles; on a phone the
+   page's own heading names the page, so the bar keeps one search field and the account button, nothing cut off. */
+.newsroom-organizer,.organizer-menu,.organizer-account-popup{--org-control:color-mix(in oklab,var(--org-paper) 90%,var(--org-ink))}
+.organizer-sidebar{border-right:0}
+.organizer-search{border-bottom:0;background:var(--org-control);border-radius:8px;padding:6px 10px}
+.newsroom-organizer button.organizer-toggle,.newsroom-organizer button.organizer-account{border:0;background:var(--org-control);border-radius:8px !important}
+.organizer-account-popup{border:0}
+.organizer-menu .organizer-destinations a{border:0;background:var(--org-control);border-radius:8px !important}
+@media(max-width:900px){
+ .organizer-topbar h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+ .organizer-search{flex:1;max-width:none}
+ .organizer-header-settings{display:none}
+ .organizer-bottom-nav{border-top:0;background:color-mix(in oklab,var(--org-paper) 95%,var(--org-ink))}
+}
+
+/* Captured text in the reference detail reads in the feed's own type, not the analysis view's serif and small caps. */
+[data-capture-text] .reference-capture-markdown,[data-capture-text] .reference-capture-markdown :is(h1,h2,h3,h4,h5,h6,p,li,th,td){font-family:inherit;letter-spacing:normal;text-transform:none}
+[data-capture-text] .reference-capture-markdown :is(h3,h4,h5){font-size:1em;font-weight:600;margin:1em 0 .25em}