@glossarist/concept-browser 0.7.35 → 0.7.41

package/src/components/CitationDisplay.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Citation } from 'glossarist';
+import type { CitationClassification, CiteResolution } from '../adapters/types';
 import { computed, ref } from 'vue';
 import { getFactory } from '../adapters/factory';
 import { useRouter } from 'vue-router';
@@ -14,22 +15,26 @@ const router = useRouter();
 const store = useVocabularyStore();
 const factory = getFactory();
 
-function resolveCitation(): { registerId: string; conceptId: string } | null {
-  const ref = props.citation.ref;
-  const locality = props.citation.locality;
-  if (!ref?.source || !locality?.referenceFrom) return null;
+// ── Single source of truth for citation resolution ────────────────────────
+// Both classification and navigation target come from the same resolveCite()
+// call, so they can never disagree.
 
-  const resolution = factory.resolveCitation(ref.source, locality.referenceFrom, props.registerId);
-  if (!resolution || resolution.type !== 'internal') return null;
+const citeResolution = computed<CiteResolution>(() =>
+  factory.resolver.resolveCite(props.citation, props.registerId),
+);
 
-  return { registerId: resolution.registerId, conceptId: resolution.conceptId };
-}
+const classification = computed<CitationClassification>(() =>
+  citeResolution.value.classification,
+);
+
+const resolvedTarget = computed(() => citeResolution.value.resolved);
 
-const resolvedTarget = computed(() => resolveCitation());
 const isCrossDataset = computed(() =>
   resolvedTarget.value != null && resolvedTarget.value.registerId !== props.registerId,
 );
 
+// ── Navigation ────────────────────────────────────────────────────────────
+
 async function navigateToCitation() {
   if (!resolvedTarget.value) return;
   const { registerId, conceptId } = resolvedTarget.value;
@@ -37,7 +42,37 @@ async function navigateToCitation() {
   router.push({ name: 'concept', params: { registerId, conceptId } });
 }
 
-// --- Hover preview ---
+// ── Wrapper element determined by classification ──────────────────────────
+// Internal → button (navigates to concept)
+// Self-contained with link → anchor (external link)
+// Everything else → span (plain text)
+
+const sourceTag = computed(() => {
+  if (classification.value === 'internal-citation') return 'button';
+  if (classification.value === 'self-contained-citation' && props.citation.link) return 'a';
+  return 'span';
+});
+
+const sourceAttrs = computed(() => {
+  if (sourceTag.value === 'button') {
+    return { class: 'concept-link font-medium inline-flex items-center gap-0.5' };
+  }
+  if (sourceTag.value === 'a') {
+    return { href: props.citation.link!, target: '_blank', rel: 'noopener', class: 'concept-link font-medium' };
+  }
+  return { class: 'font-medium' };
+});
+
+const sourceEvents = computed(() => {
+  if (sourceTag.value !== 'button') return {};
+  return {
+    onClick: navigateToCitation,
+    onMouseenter: schedulePreview,
+  };
+});
+
+// ── Hover preview ─────────────────────────────────────────────────────────
+
 const triggerEl = ref<HTMLElement | null>(null);
 const preview = ref<{ designation: string; definition: string } | null>(null);
 const previewVisible = ref(false);
@@ -90,39 +125,60 @@ function hidePreview() {
   if (previewTimer) { clearTimeout(previewTimer); previewTimer = null; }
   previewVisible.value = false;
 }
+
+// ── Locality formatting ───────────────────────────────────────────────────
+
+function formatLocality(loc: NonNullable<Citation['locality']>): string {
+  const parts: string[] = [];
+  const lType = (loc as unknown as Record<string, unknown>).type as string | null;
+  const from = (loc as unknown as Record<string, unknown>).referenceFrom ?? (loc as unknown as Record<string, unknown>).reference_from;
+  const to = (loc as unknown as Record<string, unknown>).referenceTo ?? (loc as unknown as Record<string, unknown>).reference_to;
+  if (lType) parts.push(`, ${lType}`);
+  if (from) parts.push(to ? ` ${from}–${to}` : ` ${from}`);
+  return parts.join('');
+}
 </script>
 
 <template>
   <span class="inline" @mouseleave="hidePreview">
-    <template v-if="citation.ref">
-      <button
-        v-if="resolvedTarget"
-        @click="navigateToCitation"
-        @mouseenter="schedulePreview"
-        class="concept-link font-medium inline-flex items-center gap-0.5"
+    <!-- Source reference: dynamic wrapper (button/a/span) -->
+    <template v-if="citation.ref?.source">
+      <component
+        :is="sourceTag"
+        v-bind="sourceAttrs"
+        v-on="sourceEvents"
       >
         {{ citation.ref.source }}
         <span v-if="isCrossDataset" class="text-[10px] opacity-60 leading-none">↗</span>
-      </button>
-      <span v-else-if="citation.ref.source" class="font-medium">{{ citation.ref.source }}</span>
+      </component>
       <span v-if="citation.ref.id"> {{ citation.ref.id }}</span>
       <span v-if="citation.ref.version" class="text-ink-400"> ({{ citation.ref.version }})</span>
     </template>
+
+    <!-- Locality: same formatting across all classifications -->
     <template v-if="citation.locality">
-      <button v-if="resolvedTarget" @click="navigateToCitation" @mouseenter="schedulePreview" class="concept-link">
-        <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
-        <span v-if="citation.locality.referenceFrom" class="text-ink-400">
-          {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
-        </span>
+      <button
+        v-if="classification === 'internal-citation'"
+        @click="navigateToCitation"
+        @mouseenter="schedulePreview"
+        class="concept-link"
+      >
+        {{ formatLocality(citation.locality) }}
       </button>
-      <template v-else>
-        <span v-if="citation.locality.type" class="text-ink-400">, {{ citation.locality.type }}</span>
-        <span v-if="citation.locality.referenceFrom" class="text-ink-400">
-          {{ citation.locality.referenceTo ? ` ${citation.locality.referenceFrom}–${citation.locality.referenceTo}` : ` ${citation.locality.referenceFrom}` }}
-        </span>
-      </template>
+      <span v-else class="text-ink-400">
+        {{ formatLocality(citation.locality) }}
+      </span>
     </template>
-    <a v-if="citation.link" :href="citation.link" target="_blank" rel="noopener" class="concept-link ml-1">[link]</a>
+
+    <!-- External link badge (only for non-self-contained citations that have a link) -->
+    <a
+      v-if="citation.link && classification !== 'self-contained-citation'"
+      :href="citation.link"
+      target="_blank"
+      rel="noopener"
+      class="concept-link ml-1"
+    >[link]</a>
+
     <span v-if="citation.original" class="text-xs text-ink-300 ml-1">(orig: {{ citation.original }})</span>
     <span v-if="resolvedTarget" class="text-[9px] text-ink-300 ml-1">→ {{ resolvedTarget.registerId }}/{{ resolvedTarget.conceptId }}</span>
 

package/src/components/ConceptDetail.vue

@@ -3,8 +3,8 @@ import type { Concept, LocalizedConcept, Designation } from 'glossarist';
 import type { Manifest, GraphEdge } from '../adapters/types';
 import { computed, ref, nextTick, watch } from 'vue';
 import { langName } from '../utils/lang';
-import { renderMath } from '../utils/math';
-import type { RenderOptions } from '../utils/math';
+import { renderContent } from '../utils/content-renderer';
+import type { RenderOptions } from '../utils/content-renderer';
 import { escapeAttr } from '../utils/escape';
 import { entryStatusColor, conceptStatusColor, conceptStatusLabel, conceptStatusDefinition, entryStatusLabel, entryStatusDefinition, getPreferredTerm } from '../utils/concept-helpers';
 import { sourceTypeInfo, sourceStatusInfo } from '../utils/designation-registry';
@@ -74,6 +74,8 @@ const {
   navigateRelated,
 } = useConceptEdges(conceptComputed, registerIdComputed, manifestComputed, edgesComputed, router);
 
+const hoveredEdgeDisplay = ref<{ designation: string; conceptId: string; tooltip: string } | null>(null);
+
 const uriCopied = ref(false);
 function copyUri() {
   const uri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
@@ -88,7 +90,7 @@ const engConcept = computed((): LocalizedConcept | null => {
 });
 
 const primaryTerm = computed(() => getPreferredTerm(engConcept.value, conceptId.value));
-const renderedPrimaryTerm = computed(() => renderMath(primaryTerm.value));
+const renderedPrimaryTerm = computed(() => renderContent(primaryTerm.value));
 
 const managedStatus = computed(() => props.concept.status);
 
@@ -118,7 +120,9 @@ const renderOpts = computed<RenderOptions>(() => ({
     return escapeAttr(term);
   },
   conceptRefResolver: (conceptId, term) => {
-    return `<a href="#" class="xref-link" data-register="${escapeAttr(props.registerId)}" data-concept="${escapeAttr(conceptId)}">${escapeAttr(term)}</a>`;
+    const adapter = factory.getAdapter(props.registerId);
+    const resolvedId = adapter?.lookupByDesignation(conceptId) ?? conceptId;
+    return `<a href="#" class="xref-link" data-register="${escapeAttr(props.registerId)}" data-concept="${escapeAttr(resolvedId)}">${escapeAttr(term)}</a>`;
   },
   bibResolver,
   figResolver,
@@ -471,42 +475,63 @@ const nonVerbalReps = computed(() => {
           <!-- Relations -->
           <div v-if="outgoingEdges.length || incomingEdges.length" class="card p-5">
             <div class="section-label">{{ t('concept.relations') }}</div>
+
+            <!-- Outgoing -->
             <div v-if="outgoingEdges.length" class="mt-3">
-              <div class="text-xs text-ink-300 mb-2">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
-              <div class="space-y-1 max-h-64 overflow-y-auto">
+              <div class="text-xs text-ink-300 mb-1.5">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
+              <div class="space-y-0.5 max-h-56 overflow-y-auto pr-1 -mr-1">
                 <button
                   v-for="edge in outgoingEdges"
                   :key="edge.target + edge.type"
                   @click="navigateEdge(edge)"
-                  :title="getEdgeDisplay(edge.target).tooltip"
-                  class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+                  @mouseenter="hoveredEdgeDisplay = getEdgeDisplay(edge.target)"
+                  @mouseleave="hoveredEdgeDisplay = null"
+                  @focus="hoveredEdgeDisplay = getEdgeDisplay(edge.target)"
+                  class="concept-link block w-full text-left rounded-md px-1.5 py-1 hover:bg-ink-50 transition-colors"
                   :class="getEdgeDisplay(edge.target).isLocal ? '' : 'xref-external'"
                 >
-                  <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'out')">{{ relationshipLabel(edge.type) }} →</span>
-                  <span class="truncate">{{ getEdgeDisplay(edge.target).designation || edge.label || getEdgeDisplay(edge.target).conceptId }}</span>
-                  <span class="text-[9px] text-ink-300 flex-shrink-0 font-mono">{{ getEdgeDisplay(edge.target).conceptId }}</span>
-                  <span v-if="getEdgeDisplay(edge.target).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate max-w-[100px]">{{ getEdgeDisplay(edge.target).badge!.title }}</span>
+                  <div class="flex items-center gap-1 mb-0.5">
+                    <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'out')">{{ relationshipLabel(edge.type) }} →</span>
+                    <span v-if="getEdgeDisplay(edge.target).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate">{{ getEdgeDisplay(edge.target).badge!.title }}</span>
+                  </div>
+                  <div class="text-sm text-ink-700 leading-snug line-clamp-2">{{ getEdgeDisplay(edge.target).designation || edge.label || getEdgeDisplay(edge.target).conceptId }}</div>
                 </button>
               </div>
             </div>
+
+            <!-- Incoming -->
             <div v-if="incomingEdges.length" class="mt-3 pt-3 border-t border-ink-100/60">
-              <div class="text-xs text-ink-300 mb-2">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
-              <div class="space-y-1 max-h-48 overflow-y-auto">
+              <div class="text-xs text-ink-300 mb-1.5">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
+              <div class="space-y-0.5 max-h-40 overflow-y-auto pr-1 -mr-1">
                 <button
                   v-for="edge in incomingEdges"
                   :key="edge.source + edge.type"
                   @click="navigateEdge(edge)"
-                  :title="getEdgeDisplay(edge.source).tooltip"
-                  class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+                  @mouseenter="hoveredEdgeDisplay = getEdgeDisplay(edge.source)"
+                  @mouseleave="hoveredEdgeDisplay = null"
+                  @focus="hoveredEdgeDisplay = getEdgeDisplay(edge.source)"
+                  class="concept-link block w-full text-left rounded-md px-1.5 py-1 hover:bg-ink-50 transition-colors"
                   :class="getEdgeDisplay(edge.source).isLocal ? '' : 'xref-external'"
                 >
-                  <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'in')">← {{ relationshipLabel(inverseEdgeType(edge.type)) }}</span>
-                  <span class="truncate">{{ getEdgeDisplay(edge.source).designation || edge.label || getEdgeDisplay(edge.source).conceptId }}</span>
-                  <span class="text-[9px] text-ink-300 flex-shrink-0 font-mono">{{ getEdgeDisplay(edge.source).conceptId }}</span>
-                  <span v-if="getEdgeDisplay(edge.source).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate max-w-[100px]">{{ getEdgeDisplay(edge.source).badge!.title }}</span>
+                  <div class="flex items-center gap-1 mb-0.5">
+                    <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'in')">← {{ relationshipLabel(inverseEdgeType(edge.type)) }}</span>
+                    <span v-if="getEdgeDisplay(edge.source).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate">{{ getEdgeDisplay(edge.source).badge!.title }}</span>
+                  </div>
+                  <div class="text-sm text-ink-700 leading-snug line-clamp-2">{{ getEdgeDisplay(edge.source).designation || edge.label || getEdgeDisplay(edge.source).conceptId }}</div>
                 </button>
               </div>
             </div>
+
+            <!-- Hover detail strip (fixed area at bottom of card) -->
+            <Transition name="fade">
+              <div
+                v-if="hoveredEdgeDisplay"
+                class="mt-3 pt-3 border-t border-ink-100/60"
+              >
+                <div class="text-xs text-ink-300 mb-0.5">{{ t('concept.identifier') || 'Identifier' }}</div>
+                <div class="font-mono text-[10px] text-ink-500 break-all leading-tight">{{ hoveredEdgeDisplay.conceptId }}</div>
+              </div>
+            </Transition>
           </div>
 
           <!-- Domains -->
@@ -657,3 +682,14 @@ const nonVerbalReps = computed(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/LanguageDetail.vue

@@ -2,8 +2,8 @@
 import type { Concept, LocalizedConcept, Designation, Expression, Abbreviation as AbbreviationType } from 'glossarist';
 import { computed } from 'vue';
 import { langName, langLabel } from '../utils/lang';
-import { renderMath } from '../utils/math';
-import type { RenderOptions } from '../utils/math';
+import { renderContent } from '../utils/content-renderer';
+import type { RenderOptions } from '../utils/content-renderer';
 import { escapeAttr } from '../utils/escape';
 import { entryStatusColor } from '../utils/concept-helpers';
 import { designationTypeInfo, normativeStatusInfo, grammarBadges, pronunciationLabel, pronunciationTooltip } from '../utils/designation-registry';
@@ -115,7 +115,7 @@ function handleContentClick(e: MouseEvent) {
         <div class="section-label">{{ t('concept.designations') }}</div>
         <div class="space-y-2 mt-3">
           <div v-for="(d, i) in designations" :key="i" class="flex items-center gap-2 flex-wrap">
-            <span class="font-medium text-ink-800 text-lg" v-html="renderMath(d.designation)"></span>
+            <span class="font-medium text-ink-800 text-lg" v-html="renderContent(d.designation)"></span>
             <span class="badge text-[10px]" :class="designationTypeInfo(d).color">{{ designationTypeInfo(d).label }}</span>
             <span class="badge text-[10px]" :class="normativeStatusInfo(d.normativeStatus).color">{{ normativeStatusInfo(d.normativeStatus).label }}</span>
             <template v-if="d.type === 'expression' && (d as Expression).grammarInfo?.length">
@@ -142,7 +142,7 @@ function handleContentClick(e: MouseEvent) {
       <!-- Definition -->
       <div v-if="definition" class="card p-5">
         <div class="section-label">{{ t('concept.definition') }}</div>
-        <div class="text-ink-800 leading-relaxed mt-3" v-html="renderMath(definition, renderOpts)"></div>
+        <div class="text-ink-800 leading-relaxed mt-3" v-html="renderContent(definition, renderOpts)"></div>
       </div>
 
       <!-- Notes -->
@@ -151,7 +151,7 @@ function handleContentClick(e: MouseEvent) {
         <div class="space-y-3 mt-3">
           <div v-for="(note, i) in notes" :key="i" class="text-ink-600 text-sm leading-relaxed">
             <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.note') }} {{ i + 1 }}</span>
-            <div class="mt-1" v-html="renderMath(note, renderOpts)"></div>
+            <div class="mt-1" v-html="renderContent(note, renderOpts)"></div>
           </div>
         </div>
       </div>
@@ -162,7 +162,7 @@ function handleContentClick(e: MouseEvent) {
         <div class="space-y-3 mt-3">
           <div v-for="(ex, i) in examples" :key="i" class="text-ink-600 text-sm leading-relaxed">
             <span class="font-medium text-ink-400 text-xs uppercase tracking-wide">{{ t('concept.example') }} {{ i + 1 }}</span>
-            <div class="mt-1" v-html="renderMath(ex, renderOpts)"></div>
+            <div class="mt-1" v-html="renderContent(ex, renderOpts)"></div>
           </div>
         </div>
       </div>

package/src/composables/use-concept-content.ts

@@ -1,8 +1,8 @@
 import { computed, ref, watch, type ComputedRef } from 'vue';
 import type { Concept, LocalizedConcept, ConceptSource, Designation } from 'glossarist';
 import type { Manifest } from '../adapters/types';
-import type { RenderOptions } from '../utils/math';
-import { renderMath, cleanContent } from '../utils/math';
+import type { RenderOptions } from '../utils/content-renderer';
+import { renderContent, cleanContent } from '../utils/content-renderer';
 import { getAnnotations } from '../adapters/model-bridge';
 import { getPreferredTerm, entryStatusColor, entryStatusLabel, entryStatusDefinition } from '../utils/concept-helpers';
 import { sortLanguages } from '../utils/lang';
@@ -68,18 +68,18 @@ export function useConceptContent(
       result.push({
         lang,
         lc,
-        renderedTerm: renderMath(getPreferredTerm(lc, '')),
+        renderedTerm: renderContent(getPreferredTerm(lc, '')),
         definition,
-        renderedDefinition: renderMath(definition, opts),
+        renderedDefinition: renderContent(definition, opts),
         annotations,
-        renderedAnnotations: annotations.map((a: string) => renderMath(a, opts)),
+        renderedAnnotations: annotations.map((a: string) => renderContent(a, opts)),
         notes,
-        renderedNotes: notes.map(n => renderMath(n, opts)),
+        renderedNotes: notes.map(n => renderContent(n, opts)),
         examples,
-        renderedExamples: examples.map(e => renderMath(e, opts)),
+        renderedExamples: examples.map(e => renderContent(e, opts)),
         sources: lc.sources,
         designations: lc.terms,
-        renderedDesignations: new Map(lc.terms.map(d => [d.designation, renderMath(d.designation)])),
+        renderedDesignations: new Map(lc.terms.map(d => [d.designation, renderContent(d.designation)])),
         entryStatus: lc.entryStatus ?? '',
         classification: lc.classification,
         reviewType: lc.reviewType,

package/src/composables/use-concept-edges.ts

@@ -58,12 +58,13 @@ export function useConceptEdges(
       const designation = node
         ? (node.designations[locale.value] || node.designations.eng || Object.values(node.designations)[0] || '')
         : '';
-      const tooltipLines: string[] = [uri];
+      const tooltipLines: string[] = [conceptId];
       if (node) {
         for (const [lang, des] of Object.entries(node.designations)) {
           tooltipLines.push(`${langLabel(lang)}: ${des}`);
         }
       }
+      tooltipLines.push(uri);
       let badge: { id: string; title: string } | null = null;
       if (resolution.type === 'internal' && resolution.registerId !== registerId.value) {
         const m = store.manifests.get(resolution.registerId);

package/src/composables/use-render-options.ts

@@ -1,5 +1,5 @@
 import { ref, watch } from 'vue';
-import type { RenderOptions, BibResolver, FigResolver } from '../utils/math';
+import type { RenderOptions, BibResolver, FigResolver } from '../utils/content-renderer';
 import { getFactory } from '../adapters/factory';
 import { escapeAttr } from '../utils/escape';
 

package/src/graph/GraphEngine.ts

@@ -1,5 +1,5 @@
 import type { GraphNode, GraphEdge } from '../adapters/types';
-import { ReferenceResolver } from '../adapters/ReferenceResolver';
+import { UriRouter } from '../adapters/UriRouter';
 
 function hasDesignations(node: GraphNode): boolean {
   const d = node.designations;
@@ -33,9 +33,9 @@ export class GraphEngine {
     if (this.edgeKeys.has(key)) return;
     this.edgeKeys.add(key);
 
-    const parsed = ReferenceResolver.parseUri(edge.target);
+    const parsed = UriRouter.parseUri(edge.target);
     if (!this.nodes.has(edge.source)) {
-      const sourceParsed = ReferenceResolver.parseUri(edge.source);
+      const sourceParsed = UriRouter.parseUri(edge.source);
       this.nodes.set(edge.source, {
         uri: edge.source,
         register: sourceParsed?.registerId ?? edge.register,

package/src/stores/vocabulary.ts

@@ -6,7 +6,7 @@ import type { Manifest, SearchHit, GraphEdge } from '../adapters/types';
 import type { Concept } from 'glossarist';
 import { conceptUri } from '../adapters/model-bridge';
 import { GraphEngine } from '../graph';
-import { ReferenceResolver } from '../adapters/ReferenceResolver';
+import { UriRouter } from '../adapters/UriRouter';
 import { deduplicateSearchHits } from '../utils/search';
 
 export const useVocabularyStore = defineStore('vocabulary', () => {
@@ -159,7 +159,7 @@ export const useVocabularyStore = defineStore('vocabulary', () => {
     if (adapter && loadedEdges.length > 0) {
       const targetRegisters = new Set<string>();
       for (const edge of loadedEdges) {
-        const parsed = ReferenceResolver.parseUri(edge.target);
+        const parsed = UriRouter.parseUri(edge.target);
         if (parsed?.registerId && parsed.registerId !== registerId) {
           targetRegisters.add(parsed.registerId);
         }

package/src/style.css

@@ -334,6 +334,35 @@
   color: #dddde6;
 }
 
+/* ── Brand colors: lighten for dark backgrounds ── */
+/* ISO red (#e3000f) is too harsh on dark — use a softer coral */
+.dark {
+  --brand-primary: #ff5d5d;
+  --brand-primary-rgb: 255, 93, 93;
+  --brand-dark: #1a1b2e;
+}
+
+/* Concept/xref links: lighten in dark mode (override pure red) */
+.dark .concept-link,
+.dark .xref-link {
+  color: #ff6b6b;
+}
+.dark .concept-link:hover,
+.dark .xref-link:hover {
+  filter: brightness(1.15);
+}
+
+/* Brand badges: readable background in dark mode */
+.dark .badge-brand {
+  background-color: rgba(255, 93, 93, 0.15);
+  color: #ff8a8a;
+}
+
+/* Primary buttons: avoid harsh red hover in dark mode */
+.dark .btn-primary:hover {
+  background-color: #c41818;
+}
+
 /* ── Surfaces ── */
 .dark .bg-surface { background-color: #0f1020 !important; }
 .dark .bg-surface-alt { background-color: #161728 !important; }