@semiont/react-ui 0.5.26 → 0.5.27

package/src/components/navigation/NavigationTabs.css

@@ -36,10 +36,6 @@
   align-items: center;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-button {
-  color: inherit;
-}
-
 .semiont-nav-section__header-button:hover {
   opacity: 0.8;
 }
@@ -68,10 +64,6 @@
   text-align: left;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-text {
-  color: inherit;
-}
-
 .semiont-nav-section__header-icon {
   display: flex;
   align-items: center;
@@ -99,14 +91,6 @@
   outline-offset: 2px;
 }
 
-[data-theme="dark"] .semiont-nav-section__header-icon {
-  color: var(--semiont-text-secondary);
-}
-
-[data-theme="dark"] .semiont-nav-section__header-icon:hover {
-  background: var(--semiont-bg-tertiary);
-}
-
 [data-theme="dark"] .semiont-nav-section__header-icon:focus-visible {
   outline-color: var(--semiont-color-primary-400);
 }
@@ -361,10 +345,6 @@
   outline-color: var(--semiont-color-primary-400);
 }
 
-[data-theme="dark"] .semiont-resource-tab__link:visited {
-  color: inherit !important;
-}
-
 /* Resource tab icon (emoji) */
 .semiont-resource-tab__icon {
   flex-shrink: 0;

package/src/components/pdf-annotation/PdfAnnotationCanvas.css

@@ -101,9 +101,16 @@
   scrollbar-width: none; /* standard; Firefox + recent Chromium */
 }
 
-/* WebKit/Safari, which has no `scrollbar-width` support to rely on. */
+/*
+ * WebKit/Safari, which has no `scrollbar-width` support to rely on.
+ *
+ * This hides a SCROLLBAR, not content: `scrollbar-width: none` above already
+ * does the same for every other engine, the rail still scrolls by wheel and
+ * drag, and each page is a focusable button — so tabbing through the rail
+ * scrolls it, which is the keyboard path the rule is protecting.
+ */
 .semiont-pdf-annotation-canvas__strip::-webkit-scrollbar {
-  display: none;
+  display: none; /* stylelint-disable-line semiont/accessibility */
 }
 
 /*
@@ -160,6 +167,18 @@
   font-weight: var(--semiont-font-semibold);
 }
 
+/*
+ * Palette tokens are one fixed hue in both themes, so this marker needs a real
+ * variant — the accent steps lighter against a dark surface (the treatment
+ * `.semiont-checkbox:checked` uses), and the number flips to dark type, which
+ * at this size reads far better on that lighter blue than white does.
+ */
+[data-theme="dark"] .semiont-pdf-annotation-canvas__strip-page[aria-current="page"] {
+  border-color: var(--semiont-color-primary-400);
+  background: var(--semiont-color-primary-400);
+  color: var(--semiont-color-neutral-900);
+}
+
 .semiont-pdf-annotation-canvas__strip-page:focus-visible {
   outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 1px;

package/src/components/pdf-annotation/PdfAnnotationCanvas.tsx

@@ -353,7 +353,7 @@ function PdfPageView({
         });
 
         if (hit) {
-          session?.client.browse.click(hit.annId, hit.annotation.motivation, hitRect);
+          session?.client.browse.click(hit.annId, hitRect);
           setIsDrawing(false);
           setSelection(null);
           return;
@@ -515,7 +515,7 @@ function PdfPageView({
                       cursor: 'pointer',
                       opacity: isSelected ? 1 : isHovered ? 0.9 : 0.7
                     }}
-                    onClick={(e) => session?.client.browse.click(r.annId, r.annotation.motivation, e.currentTarget.getBoundingClientRect())}
+                    onClick={(e) => session?.client.browse.click(r.annId, e.currentTarget.getBoundingClientRect())}
                     onMouseEnter={() => handleMouseEnter(r.annId)}
                     onMouseLeave={handleMouseLeave}
                   />

package/src/components/pdf-annotation/__tests__/PdfAnnotationCanvas.test.tsx

@@ -275,7 +275,7 @@ describe('PdfAnnotationCanvas', () => {
     });
   });
 
-  test('passes the annotation rect as browse.click third argument (A1 anchor)', async () => {
+  test('passes the annotation rect as browse.click second argument (A1 anchor)', async () => {
     const click = vi.fn();
     const session = {
       client: { browse: { click }, beckon: { hover: vi.fn() } },
@@ -328,8 +328,7 @@ describe('PdfAnnotationCanvas', () => {
 
     expect(click).toHaveBeenCalledTimes(1);
     expect(click.mock.calls[0]?.[0]).toBe('ann-1');
-    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
-    const anchorRect = click.mock.calls[0]?.[2];
+    const anchorRect = click.mock.calls[0]?.[1];
     expect(anchorRect).toBeDefined();
     expect(typeof anchorRect.width).toBe('number');
   });
@@ -401,8 +400,7 @@ describe('PdfAnnotationCanvas', () => {
 
     expect(click).toHaveBeenCalledTimes(1);
     expect(click.mock.calls[0]?.[0]).toBe('ann-hit-1');
-    expect(click.mock.calls[0]?.[1]).toBe('highlighting');
-    expect(click.mock.calls[0]?.[2]).toMatchObject({
+    expect(click.mock.calls[0]?.[1]).toMatchObject({
       left: displayRect.x,
       top: displayRect.y,
       width: displayRect.width,

package/src/components/resource/AnnotateView.tsx

@@ -53,7 +53,7 @@ interface Props {
  *
  * @emits mark:requested - User requested to create annotation. Payload: { selector: Selector | Selector[], motivation: SelectionMotivation }
  * @subscribes beckon:hover - Annotation hovered. Payload: { annotationId: string | null }
- * @subscribes beckon:focus - Scroll to and highlight annotation. Payload: { annotationId: string }
+ * @subscribes beckon:focus - Scroll to and highlight annotation, unless `resourceId` names a different resource (D7). Payload: { annotationId: string, resourceId?: string }
  */
 export function AnnotateView({
   content,
@@ -111,10 +111,21 @@ export function AnnotateView({
   // serves, so the behaviour no longer depends on which view mode is active.
   // The `scrollToAnnotationId` prop path (uiState → renderer) stays as the
   // host-facing capability it is; this is the in-app producer's route.
-  const handleAnnotationFocus = useCallback(({ annotationId }: { annotationId?: string | null }) => {
-    if (!containerRef.current) return;
-    scrollAnnotationIntoView(annotationId ?? null, containerRef.current, { pulse: true });
-  }, []);
+  // `resourceId` is a GUARD, not navigation (GUIDED-TOUR D7): it names the
+  // resource this focus applies to, and a viewer showing a different one
+  // ignores it. Absent means unscoped — the in-app emitters (history panel,
+  // annotation list) omit it because they are already scoped to the open
+  // resource, so treating absence as "not mine" would silence all of them.
+  // Focus never navigates; driving the Browser to a resource is
+  // `browse:resource-open`'s job.
+  const handleAnnotationFocus = useCallback(
+    ({ annotationId, resourceId }: { annotationId?: string | null; resourceId?: string }) => {
+      if (resourceId && resourceId !== resourceUri) return;
+      if (!containerRef.current) return;
+      scrollAnnotationIntoView(annotationId ?? null, containerRef.current, { pulse: true });
+    },
+    [resourceUri],
+  );
 
   // Annotation hover (session-scoped). Toolbar preference changes flow through
   // props/callbacks, not the bus (TOOLBAR-PREFS-AS-PROPS).

package/src/components/resource/AnnotationHistory.tsx

@@ -51,6 +51,8 @@ export function AnnotationHistory({
 
   // Sort events by oldest first (most recent at bottom)
   // Filter out job events - they're represented by mark:body-updated events instead
+  // `job:progress` is no longer a persisted event type, but logs written before it
+  // was retired still hold them; naming it here keeps those out of the history.
   const events: StoredEventLike[] = eventsData
     .filter((e) => {
       return e.type !== 'job:started' && e.type !== 'job:progress' && e.type !== 'job:completed';

package/src/components/resource/BrowseView.tsx

@@ -155,7 +155,7 @@ export const BrowseView = memo(function BrowseView({
         if (annotation) {
           // The emission site owns the geometry: the clicked span's viewport
           // rect rides the event so hosts can anchor popovers (A1).
-          session.client.browse.click(annotation.id, annotation.motivation, annotationElement.getBoundingClientRect());
+          session.client.browse.click(annotation.id, annotationElement.getBoundingClientRect());
         }
       }
     };
@@ -263,9 +263,20 @@ export const BrowseView = memo(function BrowseView({
     scrollToAnnotation(annotationId);
   }, [scrollToAnnotation]);
 
-  const handleAnnotationFocus = useCallback(({ annotationId }: { annotationId?: string | null }) => {
-    scrollToAnnotation(annotationId ?? null, true);
-  }, [scrollToAnnotation]);
+  // `resourceId` is a GUARD, not navigation (GUIDED-TOUR D7): it names the
+  // resource this focus applies to, and a viewer showing a different one
+  // ignores it. Absent means unscoped — the in-app emitters (history panel,
+  // annotation list) omit it because they are already scoped to the open
+  // resource, so treating absence as "not mine" would silence all of them.
+  // Focus never navigates; driving the Browser to a resource is
+  // `browse:resource-open`'s job.
+  const handleAnnotationFocus = useCallback(
+    ({ annotationId, resourceId }: { annotationId?: string | null; resourceId?: string }) => {
+      if (resourceId && resourceId !== resourceUri) return;
+      scrollToAnnotation(annotationId ?? null, true);
+    },
+    [scrollToAnnotation, resourceUri],
+  );
 
   useSessionEventSubscriptions(session, {
     'beckon:hover': handleAnnotationHover,

package/src/components/resource/ResourceViewer.tsx

@@ -8,7 +8,7 @@ import { BrowseView, type ReferenceHover } from './BrowseView';
 import type { BrowseMediaRenderers } from './browse-renderers';
 import { PopupContainer } from '../annotation-popups/SharedPopupElements';
 import { JsonLdView } from '../annotation-popups/JsonLdView';
-import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, components, EventMap, AnchorRect } from '@semiont/core';
+import type { Annotation, AnnotationId, ResourceDescriptor as SemiontResource, EventMap, AnchorRect } from '@semiont/core';
 import { getExactText, getTargetSelector, getPrimaryMediaType, isHighlight, isAssessment, isReference, isComment, isTag, getBodySource } from '@semiont/core';
 import type { SemiontSession } from '@semiont/sdk';
 import { useSessionEventSubscriptions } from '../../hooks/useSessionEventSubscriptions';
@@ -102,7 +102,10 @@ interface Props {
  * panel opening invokes the host's `onOpenPanel` callback — the host owns
  * the panel and any `panel:open` emission.
  *
- * @subscribes browse:click - User clicked on annotation. Payload: { annotationId: string, motivation, anchorRect? }
+ * @subscribes browse:click - An annotation was clicked — locally, or driven over
+ *   the wire by another participant. Payload: { annotationId: string, anchorRect? };
+ *   the motivation is derived from the annotation the id names, and an id this
+ *   viewer has not loaded is a no-op.
  */
 export function ResourceViewer({
   resource,
@@ -270,38 +273,34 @@ export function ResourceViewer({
   }, [annotateMode, selectedClick, onOpenResource]);
 
   // Annotation click coordinator - handles panel opening and scrolling
-  const handleAnnotationClickEvent = useCallback(({ annotationId, motivation, anchorRect }: {
+  const handleAnnotationClickEvent = useCallback(({ annotationId, anchorRect }: {
     annotationId: string;
-    motivation: components['schemas']['Motivation'];
     anchorRect?: AnchorRect;
   }) => {
-    // Find the annotation metadata
-    const metadata = Object.values(ANNOTATORS).find(a => a.matchesAnnotation({ motivation } as Annotation));
-
-    if (!metadata?.hasSidePanel) {
-      // Annotation doesn't have a side panel - let handleAnnotationClick handle it
-      const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
-      const annotation = allAnnotations.find(a => a.id === annotationId);
-      if (annotation) {
-        handleAnnotationClick(annotation);
-      }
-      return;
-    }
+    // Resolve the annotation FIRST. The id is the whole address, and the
+    // motivation is derived from the annotation it names rather than carried
+    // beside it (TOUR-CLICK D2) — one fact, one encoding. Resolving first also
+    // means a click naming an annotation this viewer has not loaded (a remote
+    // drive that arrived while the participant was elsewhere) finds nothing
+    // and does nothing, which is why the channel needs no resourceId guard.
+    const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
+    const annotation = allAnnotations.find(a => a.id === annotationId);
+    if (!annotation) return;
+
+    // The real annotation, not a `{ motivation } as Annotation` stand-in.
+    const metadata = Object.values(ANNOTATORS).find(a => a.matchesAnnotation(annotation));
 
-    if (selectedClick !== 'detail') {
-      // Only open panels in detail mode - for other modes, let handleAnnotationClick handle it
-      const allAnnotations = [...highlights, ...references, ...assessments, ...comments, ...tags];
-      const annotation = allAnnotations.find(a => a.id === annotationId);
-      if (annotation) {
-        handleAnnotationClick(annotation);
-      }
+    // No side panel, or a click mode other than detail: this is a plain
+    // annotation click, not a panel-opening one.
+    if (!metadata?.hasSidePanel || selectedClick !== 'detail') {
+      handleAnnotationClick(annotation);
       return;
     }
 
     // All annotations open the unified annotations panel — the host owns the panel.
     // The panel internally switches tabs based on the motivation → tab mapping in UnifiedAnnotationsPanel.
     // View geometry passes through untouched: the emitter owned it, the host anchors with it.
-    onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation, ...(anchorRect ? { anchorRect } : {}) });
+    onOpenPanel?.({ panel: 'annotations', scrollToAnnotationId: annotationId, motivation: annotation.motivation, ...(anchorRect ? { anchorRect } : {}) });
   }, [highlights, references, assessments, comments, tags, handleAnnotationClick, selectedClick, onOpenPanel]);
 
   // Single subscription call per file (see scripts/compliance/audit-hooks-ordering.ts).

package/src/components/resource/__tests__/AnnotateView.focus.test.tsx

@@ -56,3 +56,53 @@ describe('AnnotateView — beckon:focus scrolls the content', () => {
     expect(scrollSpy.mock.calls[0]?.[0]).toBe('ann-7');
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────
+// GUIDED-TOUR P6 (D7) — `resourceId` is a GUARD, not navigation.
+//
+// The schema now says so out loud: "it names the resource this focus applies
+// to, and a viewer currently showing a different resource ignores the event".
+// Without the comparison the field was decorative — a guide beckoning a
+// reference in doc B scrolled every participant's doc A.
+// ─────────────────────────────────────────────────────────────────────
+describe('AnnotateView — beckon:focus is guarded by resourceId (P6/D7)', () => {
+  beforeEach(() => { scrollSpy.mockClear(); });
+
+  const renderAt = (resourceUri: string) => {
+    const { session, client } = createTestSemiontWrapper();
+    render(
+      <AnnotateView
+        content="hello world"
+        mimeType="text/plain"
+        resourceUri={resourceUri}
+        annotations={emptyAnnotations}
+        uiState={uiState}
+        session={session}
+        annotateMode
+      />,
+    );
+    return client;
+  };
+
+  it('ignores a focus aimed at a DIFFERENT resource', () => {
+    const client = renderAt('res-1');
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-2' });
+    expect(scrollSpy).not.toHaveBeenCalled();
+  });
+
+  it('still scrolls when the resource matches', () => {
+    const client = renderAt('res-1');
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-1' });
+    expect(scrollSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('still scrolls when the event names no resource at all', () => {
+    // `resourceId` is optional in the schema (`required: []`), and the in-app
+    // emitters — the history panel, the annotation list — omit it because they
+    // are already scoped to the open resource. A guard that treated absence as
+    // "not mine" would break every one of them.
+    const client = renderAt('res-1');
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7' });
+    expect(scrollSpy).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/resource/__tests__/AnnotationHistory.test.tsx

@@ -173,6 +173,8 @@ describe('AnnotationHistory', () => {
   });
 
   it('filters out job events', () => {
+    // e3 is `job:progress`, a retired event type. Logs written before it was
+    // retired still hold them, so the filter must keep excluding it.
     const events = [
       makeStoredEvent('e1', 'mark:added', 1),
       makeStoredEvent('e2', 'job:started', 2),

package/src/components/resource/__tests__/BrowseView.test.tsx

@@ -427,7 +427,7 @@ describe('BrowseView Component', () => {
         { id: 'comment-1', type: 'comment', motivation: 'commenting' },
       ] as const;
 
-      for (const { id, type, motivation } of clickCases) {
+      for (const { id, type } of clickCases) {
         const el = document.createElement('span');
         el.setAttribute('data-annotation-id', id);
         el.setAttribute('data-annotation-type', type);
@@ -439,8 +439,7 @@ describe('BrowseView Component', () => {
         await waitFor(() => {
           expect(tracker.events.some(e =>
             e.event === 'browse:click' &&
-            e.payload?.annotationId === id &&
-            e.payload?.motivation === motivation
+            e.payload?.annotationId === id
           )).toBe(true);
         });
       }
@@ -653,3 +652,30 @@ describe('BrowseView Component', () => {
     });
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────
+// GUIDED-TOUR P6 (D7) — the same guard BrowseView's sibling carries.
+// BrowseView subscribed to `beckon:focus` first, so it is the one that has
+// been scrolling on other people's resources the longest.
+// ─────────────────────────────────────────────────────────────────────
+describe('BrowseView — beckon:focus is guarded by resourceId (P6/D7)', () => {
+  it('ignores a focus aimed at a different resource, honours one that matches', () => {
+    const { session, client } = createTestSemiontWrapper();
+    const { container } = render(
+      <BrowseView
+        content="hello world"
+        mimeType="text/plain"
+        resourceUri="res-1"
+        annotations={{ highlights: [], references: [], assessments: [], comments: [], tags: [] }}
+        session={session}
+        annotateMode={false}
+      />,
+    );
+    expect(container).toBeTruthy();
+
+    // Neither call may throw; the assertion that matters is the guard's
+    // existence, pinned in AnnotateView where the scroll helper is mockable.
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-2' });
+    client.bus.get('beckon:focus').next({ annotationId: 'ann-7', resourceId: 'res-1' });
+  });
+});

package/src/components/resource/__tests__/ResourceViewer.embeddable.test.tsx

@@ -15,7 +15,8 @@ import { describe, it, expect, vi } from 'vitest';
 import { render, screen, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import type { SemiontSession } from '@semiont/sdk';
-import type { ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
+import type { Annotation, ResourceDescriptor as SemiontResource, ResourceId } from '@semiont/core';
+import { annotationId } from '@semiont/core';
 import { createTestSemiontWrapper } from '../../../test-utils';
 import { ResourceViewer } from '../ResourceViewer';
 
@@ -46,6 +47,23 @@ const resource: SemiontResource & { content: string } = {
 
 const annotations = { highlights: [], references: [], assessments: [], comments: [], tags: [] };
 
+/**
+ * A highlight the viewer has actually loaded. Required since TOUR-CLICK D2: the
+ * click handler resolves the annotation by id and derives the motivation from
+ * it, so a click for an id absent from this collection is a no-op. Before that,
+ * the wire carried the motivation and the viewer never looked — which is why
+ * the anchorRect test below used to pass against an empty collection.
+ */
+const loadedHighlight: Annotation = {
+  '@context': 'http://www.w3.org/ns/anno.jsonld',
+  type: 'Annotation',
+  id: annotationId('ann-1'),
+  motivation: 'highlighting',
+  target: { source: 'res-1', selector: { type: 'TextPositionSelector', start: 0, end: 10 } },
+};
+
+const annotationsWithHighlight = { ...annotations, highlights: [loadedHighlight] };
+
 describe('ResourceViewer — embeddable (bring-your-own-session, no providers)', () => {
   // GREEN: the whole browse-mode subtree (ResourceViewer → BrowseView →
   // AnnotateToolbar) renders provider-free from a bare session.
@@ -73,7 +91,7 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
       <ResourceViewer
         session={session}
         resource={resource}
-        annotations={annotations}
+        annotations={annotationsWithHighlight}
         onOpenResource={vi.fn()}
         onOpenPanel={onOpenPanel}
       />,
@@ -86,7 +104,6 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
     act(() => {
       eventBus.get('browse:click').next({
         annotationId: 'ann-1',
-        motivation: 'highlighting',
         anchorRect,
       });
     });
@@ -95,8 +112,35 @@ describe('ResourceViewer — embeddable (bring-your-own-session, no providers)',
       expect(onOpenPanel).toHaveBeenCalledWith(expect.objectContaining({
         panel: 'annotations',
         scrollToAnnotationId: 'ann-1',
+        // Derived from the annotation the id names, never carried on the wire.
+        motivation: 'highlighting',
         anchorRect: expect.objectContaining({ left: 5, width: 7 }),
       }));
     });
   });
+
+  it('ignores a browse:click naming an annotation this viewer has not loaded', async () => {
+    // A remote drive can arrive while the participant is looking at something
+    // else. Resolving the annotation FIRST makes that a no-op by construction,
+    // which is why the channel carries no resourceId guard (TOUR-CLICK D3).
+    const { session, eventBus } = createTestSemiontWrapper();
+    const onOpenPanel = vi.fn();
+
+    render(
+      <ResourceViewer
+        session={session}
+        resource={resource}
+        annotations={annotationsWithHighlight}
+        onOpenResource={vi.fn()}
+        onOpenPanel={onOpenPanel}
+      />,
+    );
+
+    act(() => {
+      eventBus.get('browse:click').next({ annotationId: 'ann-not-here' });
+    });
+
+    await new Promise((r) => setTimeout(r, 20));
+    expect(onOpenPanel).not.toHaveBeenCalled();
+  });
 });

package/src/components/resource/event-formatting.ts

@@ -81,7 +81,6 @@ export function formatEventType(type: PersistedEventType, t: TranslateFn, payloa
 
     case 'job:completed':
     case 'job:started':
-    case 'job:progress':
     case 'job:failed':
       return t('jobEvent');
 
@@ -128,7 +127,6 @@ export function getEventEmoji(type: PersistedEventType, payload?: any): string {
     case 'job:completed':
       return '🔗';  // Link emoji for linked document creation
     case 'job:started':
-    case 'job:progress':
       return '⚙️';  // Gear for job processing
     case 'job:failed':
       return '❌';  // X mark for failed jobs
@@ -276,7 +274,6 @@ export function getEventDisplayContent(
     }
 
     case 'job:started':
-    case 'job:progress':
     case 'job:failed':
     case 'yield:representation-added':
     case 'yield:representation-removed':

package/src/components/resource/panels/AssessmentEntry.tsx

@@ -88,7 +88,7 @@ export function AssessmentEntry({
       data-type="assessment"
       data-focused={isFocused ? 'true' : 'false'}
       onClick={() => {
-        session?.client.browse.click(assessment.id, assessment.motivation);
+        session?.client.browse.click(assessment.id);
       }}
       {...hoverProps}
     >

package/src/components/resource/panels/AssessmentPanel.css

@@ -30,10 +30,6 @@
   letter-spacing: 0.05em;
 }
 
-[data-theme="dark"] .semiont-assessment-panel__label {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-assessment-panel__rating {
   display: flex;
   gap: var(--semiont-panel-padding-xs);
@@ -46,8 +42,11 @@
   transition: color 0.2s ease;
 }
 
+/* An UNRATED star must recede. gray-300 is near-white: on a dark panel the
+   empty stars outshone the filled ones, inverting the reading. Dark takes a
+   dim grey; the filled star keeps the warning hue. */
 [data-theme="dark"] .semiont-assessment-panel__star {
-  color: var(--semiont-color-gray-300);
+  color: var(--semiont-color-gray-600);
 }
 
 .semiont-assessment-panel__star:hover {
@@ -59,7 +58,7 @@
 }
 
 [data-theme="dark"] .semiont-assessment-panel__star--filled {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }
 
 .semiont-assessment-panel__textarea {