six-degrees 0.6.0 → 0.8.0

package/.next/standalone/app/components/OutlinkQuest.js

@@ -13,16 +13,17 @@ import { buildQuest, XP_SEND, STAGE_SIZE } from '../../lib/quest';
 import { initialsFor } from '../../lib/tiers';
 import { localPhoto } from '../../lib/photos';
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
+import ConnectChoice from './AutoConnect';
 
 const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
-const LINE = '1px solid rgba(255,255,255,0.1)';
+const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 
 function Face({ person, size = 36, ring }) {
   const color = TIER[person?.tier] || '#667';
   return (
     <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
       <div style={{
-        width: size, height: size, borderRadius: '50%', background: color, color: person?.tier === 'S' ? '#000' : '#fff',
+        width: size, height: size, borderRadius: '50%', background: color, color: person?.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
         display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: size * 0.34, fontWeight: 800,
         border: `2px solid ${ring || color}`,
       }}>{initialsFor(person?.name || '?')}</div>
@@ -40,7 +41,7 @@ function Ring({ progress, size = 86, color = '#FF6B35', children }) {
   return (
     <div style={{ position: 'relative', width: size, height: size }}>
       <svg width={size} height={size} style={{ position: 'absolute', inset: 0, transform: 'rotate(-90deg)' }}>
-        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={5} />
+        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="rgba(var(--sd-ink, 255, 255, 255), 0.08)" strokeWidth={5} />
         <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={color} strokeWidth={5} strokeLinecap="round"
           strokeDasharray={`${c * Math.min(1, progress)} ${c}`} style={{ transition: 'stroke-dasharray 0.5s ease' }} />
       </svg>
@@ -49,7 +50,8 @@ function Ring({ progress, size = 86, color = '#FF6B35', children }) {
   );
 }
 
-export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, onSend, onUndo }) {
+// canAuto: Auto beside every invite (components/AutoConnect.js; Blake, 2026-10-03), on your own network.
+export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, onSend, onUndo, canAuto = false }) {
   const quest = useMemo(() => buildQuest({ recs, sentIds, added, mappedIds, reach }), [recs, sentIds, added, mappedIds, reach]);
   const [open, setOpen] = useState(null);         // bridge id of the expanded cluster
   const [toast, setToast] = useState(null);
@@ -57,10 +59,15 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
 
   async function send(person, cluster) {
     await onSend(person);
+    cheer(person, cluster);
+  }
+
+  // The points and the circle's progress, for an invite sent by hand or by Auto.
+  function cheer(person, cluster) {
     const done = cluster.done + 1;
     const first = String(cluster.bridge.name || '').split(/[\s,]+/)[0];
     setToast(done >= cluster.targets.length
-      ? `+${XP_SEND[person.tier] || 2} · Stage ${cluster.stage} of ${first}'s circle cleared — the next ${STAGE_SIZE} are up`
+      ? `+${XP_SEND[person.tier] || 2} · Stage ${cluster.stage} of ${first}'s circle cleared. The next ${STAGE_SIZE} are up`
       : `+${XP_SEND[person.tier] || 2} · ${first}'s circle ${done}/${cluster.targets.length}`);
     setTimeout(() => setToast(null), 3500);
   }
@@ -76,20 +83,20 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
           <div style={{ fontSize: 26, fontWeight: 900, lineHeight: 1 }}>{level.level}</div>
         </div>
         <div style={{ flex: 1, minWidth: 220 }}>
-          <div style={{ fontSize: 13, color: '#dfe6e9' }}>
+          <div style={{ fontSize: 13, color: 'var(--sd-fg-1, #dfe6e9)' }}>
             <b>{quest.points}</b> points · <b>{level.next - quest.points}</b> to level {level.level + 1}
           </div>
-          <div style={{ height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.08)', marginTop: 6, overflow: 'hidden' }}>
+          <div style={{ height: 8, borderRadius: 4, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', marginTop: 6, overflow: 'hidden' }}>
             <div style={{ height: '100%', width: `${Math.round(level.progress * 100)}%`, background: 'linear-gradient(90deg, #FFD700, #FF6B35)', transition: 'width 0.5s' }} />
           </div>
-          <div style={{ fontSize: 11.5, color: '#8b9a9a', marginTop: 6 }}>
-            Points come from invites you send and people who accept — not from browsing.
+          <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 6 }}>
+            Points come from invites you send and people who accept, not from browsing.
           </div>
         </div>
         {[[quest.sentTotal, 'invites sent'], [quest.addedTotal, 'people added'], [quest.clearedStages, 'stages cleared']].map(([n, l]) => (
           <div key={l} style={{ textAlign: 'center', minWidth: 80 }}>
             <div style={{ fontSize: 24, fontWeight: 900 }}>{n}</div>
-            <div style={{ fontSize: 11, color: '#8b9a9a' }}>{l}</div>
+            <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)' }}>{l}</div>
           </div>
         ))}
       </div>
@@ -97,7 +104,7 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
       {quest.newDoors.length > 0 && (
         <div style={{ marginTop: 12, padding: '10px 14px', borderRadius: 10, border: '1px solid rgba(0,255,136,0.3)', background: 'rgba(0,255,136,0.06)', fontSize: 13 }}>
           🚪 <b>{quest.newDoors.length} new {quest.newDoors.length === 1 ? 'door' : 'doors'}:</b> people you added through a circle, whose own circle isn&rsquo;t mapped yet.
-          That&rsquo;s the next degree. <Link href="/setup" style={{ color: '#00ff88' }}>Map them on the Scan page →</Link>
+          That&rsquo;s the next degree. <Link href="/setup" style={{ color: 'var(--sd-green, #00ff88)' }}>Map them on the Scan page →</Link>
         </div>
       )}
 
@@ -107,24 +114,29 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
           <h3 style={{ margin: '22px 0 10px', fontSize: 15 }}>Next best moves</h3>
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 12 }}>
             {quest.nextMoves.map(({ person, cluster }, i) => (
-              <div key={person.id} style={{ padding: 14, borderRadius: 12, border: `1px solid ${TIER[person.tier]}55`, background: 'rgba(255,255,255,0.03)', position: 'relative' }}>
-                <div style={{ position: 'absolute', top: 10, right: 12, fontSize: 11, fontWeight: 800, color: '#FF6B35' }}>#{i + 1}</div>
+              <div key={person.id} style={{ padding: 14, borderRadius: 12, border: `1px solid ${TIER[person.tier]}55`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', position: 'relative' }}>
+                <div style={{ position: 'absolute', top: 10, right: 12, fontSize: 11, fontWeight: 800, color: 'var(--sd-orange, #FF6B35)' }}>#{i + 1}</div>
                 <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
                   <Face person={person} size={44} />
                   <div style={{ minWidth: 0 }}>
                     <div style={{ fontWeight: 700, fontSize: 14 }}>{person.name}</div>
-                    <div style={{ fontSize: 11.5, color: '#8b9a9a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 220 }}>{person.headline}</div>
+                    <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 220 }}>{person.headline}</div>
                   </div>
                 </div>
-                <div style={{ fontSize: 11.5, color: '#aab7b7', margin: '10px 0' }}>
+                <div style={{ fontSize: 11.5, color: 'var(--sd-fg-2, #aab7b7)', margin: '10px 0' }}>
                   via <b style={{ color: TIER[cluster.bridge.tier] }}>{cluster.bridge.name}</b> · their circle {cluster.done}/{cluster.targets.length} this stage
                 </div>
-                <div style={{ display: 'flex', gap: 8 }}>
-                  {person.profile_url && (
-                    <a href={person.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>Open on LinkedIn</a>
-                  )}
-                  <button onClick={() => send(person, cluster)} style={btnHot}>I sent an invite · +{XP_SEND[person.tier] || 2}</button>
-                </div>
+                <ConnectChoice person={person} canAuto={canAuto} size="quest" onSent={(p) => cheer(p, cluster)} connect={(second) => {
+                  const by = (
+                    <>
+                      {person.profile_url && (
+                        <a href={person.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>Open on LinkedIn</a>
+                      )}
+                      <button onClick={() => send(person, cluster)} style={second ? btnGhost : btnHot}>I sent an invite · +{XP_SEND[person.tier] || 2}</button>
+                    </>
+                  );
+                  return second ? by : <div style={{ display: 'flex', gap: 8 }}>{by}</div>;
+                }} />
               </div>
             ))}
           </div>
@@ -133,7 +145,7 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
 
       {/* 3. clusters */}
       <h3 style={{ margin: '26px 0 4px', fontSize: 15 }}>Circles to work through</h3>
-      <div style={{ fontSize: 12, color: '#8b9a9a', marginBottom: 12 }}>
+      <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', marginBottom: 12 }}>
         Each is one of your connections and the best people they know, {STAGE_SIZE} at a time. Fill the ring to clear a stage.
       </div>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))', gap: 12 }}>
@@ -141,15 +153,15 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
           const isOpen = open === c.bridge.id;
           return (
             <button key={c.bridge.id} onClick={() => setOpen(isOpen ? null : c.bridge.id)} style={{
-              padding: 12, borderRadius: 12, cursor: 'pointer', textAlign: 'center', color: '#fff',
-              border: isOpen ? '1px solid #FF6B35' : LINE, background: c.complete ? 'rgba(0,255,136,0.06)' : 'rgba(255,255,255,0.03)',
+              padding: 12, borderRadius: 12, cursor: 'pointer', textAlign: 'center', color: 'var(--sd-fg-1, #fff)',
+              border: isOpen ? '1px solid #FF6B35' : LINE, background: c.complete ? 'rgba(0,255,136,0.06)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
               display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
             }}>
               <Ring progress={c.progress} color={c.complete ? '#00ff88' : '#FF6B35'}>
                 <Face person={c.bridge} size={60} />
               </Ring>
               <div style={{ fontWeight: 700, fontSize: 13, maxWidth: 170, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.bridge.name}</div>
-              <div style={{ fontSize: 11, color: c.complete ? '#00ff88' : '#aab7b7' }}>
+              <div style={{ fontSize: 11, color: c.complete ? 'var(--sd-green, #00ff88)' : 'var(--sd-fg-2, #aab7b7)' }}>
                 {c.complete ? 'Circle cleared' : `Stage ${c.stage} of ${c.stages} · ${c.done}/${c.targets.length}`}
               </div>
               <div style={{ display: 'flex', gap: 4 }}>
@@ -160,7 +172,7 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
                   }} />
                 ))}
               </div>
-              <div style={{ fontSize: 10.5, color: '#778' }}>
+              <div style={{ fontSize: 10.5, color: 'var(--sd-fg-4, #778)' }}>
                 {c.open.S ? `${c.open.S} S · ` : ''}{c.open.A ? `${c.open.A} A · ` : ''}{c.people.length} worth adding{c.added.length ? ` · ★ ${c.added.length} added` : ''}
               </div>
             </button>
@@ -174,27 +186,36 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
             <Face person={expanded.bridge} size={40} />
             <div>
               <div style={{ fontWeight: 800 }}>{expanded.bridge.name}&rsquo;s circle · stage {expanded.stage} of {expanded.stages}</div>
-              <div style={{ fontSize: 12, color: '#aab7b7' }}>Ask {expanded.bridge.name?.split(' ')[0]} for an intro, or invite them directly. Mark each one when it&rsquo;s sent.</div>
+              <div style={{ fontSize: 12, color: 'var(--sd-fg-2, #aab7b7)' }}>Ask {expanded.bridge.name?.split(' ')[0]} for an intro, or invite them directly. Mark each one when it&rsquo;s sent.</div>
             </div>
           </div>
           {expanded.targets.map((p) => {
             const sent = sentIds.has(p.id);
             return (
-              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: '1px solid rgba(255,255,255,0.05)' }}>
+              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.05)' }}>
                 <Face person={p} size={34} ring={sent ? '#00ff88' : undefined} />
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <div style={{ fontWeight: 600, fontSize: 13 }}>{p.name} <span style={{ color: TIER[p.tier], fontSize: 11 }}>{p.tier}</span></div>
-                  <div style={{ fontSize: 11.5, color: '#8b9a9a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.headline}</div>
+                  <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.headline}</div>
                 </div>
-                {p.profile_url && <a href={p.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>LinkedIn</a>}
-                {sent
-                  ? <button onClick={() => onUndo(p)} style={{ ...btnGhost, color: '#00ff88' }}>Sent ✓ (undo)</button>
-                  : <button onClick={() => send(p, expanded)} style={btnHot}>Sent · +{XP_SEND[p.tier] || 2}</button>}
+                {sent ? (
+                  <>
+                    {p.profile_url && <a href={p.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>LinkedIn</a>}
+                    <button onClick={() => onUndo(p)} style={{ ...btnGhost, color: 'var(--sd-green, #00ff88)' }}>Sent ✓ (undo)</button>
+                  </>
+                ) : (
+                  <ConnectChoice person={p} canAuto={canAuto} size="quest" onSent={(x) => cheer(x, expanded)} connect={(second) => (
+                    <>
+                      {p.profile_url && <a href={p.profile_url} target="_blank" rel="noopener noreferrer" style={btnGhost}>LinkedIn</a>}
+                      <button onClick={() => send(p, expanded)} style={second ? btnGhost : btnHot}>Sent · +{XP_SEND[p.tier] || 2}</button>
+                    </>
+                  )} />
+                )}
               </div>
             );
           })}
           {expanded.added.length > 0 && (
-            <div style={{ marginTop: 10, fontSize: 12, color: '#00ff88' }}>
+            <div style={{ marginTop: 10, fontSize: 12, color: 'var(--sd-green, #00ff88)' }}>
               ★ Added from this circle: {expanded.added.map((a) => a.name).join(', ')}
             </div>
           )}
@@ -211,4 +232,4 @@ export default function OutlinkQuest({ recs, sentIds, added, mappedIds, reach, o
 }
 
 const btnHot = { padding: '7px 12px', borderRadius: 8, border: 'none', cursor: 'pointer', fontWeight: 800, fontSize: 12, background: 'linear-gradient(135deg, #FF6B35, #FFD700)', color: '#000' };
-const btnGhost = { padding: '7px 12px', borderRadius: 8, border: LINE, cursor: 'pointer', fontWeight: 600, fontSize: 12, background: 'rgba(255,255,255,0.05)', color: '#dfe6e9', textDecoration: 'none' };
+const btnGhost = { padding: '7px 12px', borderRadius: 8, border: LINE, cursor: 'pointer', fontWeight: 600, fontSize: 12, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-1, #dfe6e9)', textDecoration: 'none' };

package/.next/standalone/app/components/PathsAnalyzer.js

@@ -28,7 +28,7 @@ import {
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
 const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
-const LINE = '1px solid rgba(255,255,255,0.1)';
+const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 const MAX_BUBBLES = 140;
 const ALL_INDUSTRIES = [...INDUSTRIES, UNKNOWN_INDUSTRY];
 
@@ -44,7 +44,7 @@ export function Seg({ value, onChange, options }) {
       {options.map(([v, label]) => (
         <button key={v} onClick={() => onChange(v)} style={{
           padding: '5px 10px', fontSize: 11.5, fontWeight: 600, border: 'none', cursor: 'pointer',
-          background: value === v ? 'rgba(52,152,219,0.25)' : 'transparent', color: value === v ? '#cfe6f7' : '#8b9a9a',
+          background: value === v ? 'rgba(52,152,219,0.25)' : 'transparent', color: value === v ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-3, #8b9a9a)',
         }}>{label}</button>
       ))}
     </div>
@@ -80,27 +80,28 @@ export function SidePanel({ open, onToggle, children }) {
       <button type="button" onClick={onToggle} style={{
         position: 'fixed', left: 16, top: 140, zIndex: 30, cursor: 'pointer', height: 36, borderRadius: 18, padding: '0 14px 0 10px',
         display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(52,152,219,0.15)', border: '2px solid rgba(52,152,219,0.5)',
-        color: '#3498DB', fontWeight: 700, boxShadow: '0 0 12px rgba(52,152,219,0.3)', backdropFilter: 'blur(8px)',
+        color: 'var(--sd-blue, #3498DB)', fontWeight: 700, boxShadow: '0 0 12px rgba(52,152,219,0.3)', backdropFilter: 'blur(8px)',
       }}>
         <span style={{ fontSize: 18 }}>›</span><span style={{ fontSize: 11, fontWeight: 600 }}>Filters</span>
       </button>
     );
   }
   return (
-    <aside style={{
+    <aside data-glass-panel="side" style={{
       width: 300, flexShrink: 0, height: '100%', overflowY: 'auto', boxSizing: 'border-box', padding: '16px 14px',
       borderRight: '1px solid rgba(52,152,219,0.15)', background: 'var(--sd-panel)', fontSize: 13,
+      backdropFilter: 'var(--sd-panel-blur)', WebkitBackdropFilter: 'var(--sd-panel-blur)',
     }}>
       <button type="button" onClick={onToggle} style={{
         display: 'flex', alignItems: 'center', gap: 6, width: '100%', marginBottom: 14, padding: '6px 12px', borderRadius: 6, cursor: 'pointer',
-        background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: '#aaa', fontSize: 12, fontWeight: 600,
+        background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', color: 'var(--sd-fg-3, #aaa)', fontSize: 12, fontWeight: 600,
       }}><span style={{ fontSize: 16 }}>›</span> Close</button>
       {children}
     </aside>
   );
 }
 
-export const panelHeading = { fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, margin: '14px 0 6px', textTransform: 'uppercase' };
+export const panelHeading = { fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)', letterSpacing: 1, margin: '14px 0 6px', textTransform: 'uppercase' };
 
 /** Does this person pass the filters? Tier and degree from the grid, as in Network Circle. */
 function passes(p, f) {
@@ -195,9 +196,9 @@ export default function PathsAnalyzer({ d1 = [], d2 = [], d3 = [], initialShow =
           industries={industries} hidden={hidden} setHidden={setHidden}
           onIndustry={(key) => setFocus({ kind: 'industry', key })} />
         <div style={panelHeading}>Read the map</div>
-        <div style={{ fontSize: 11, color: '#8b9a9a', marginBottom: 4 }}>Bubble size</div>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', marginBottom: 4 }}>Bubble size</div>
         <Seg value={sizeBy} onChange={setSizeBy} options={[['people', 'Your people'], ['sa', 'S & A there'], ['known', 'You know']]} />
-        <div style={{ fontSize: 11, color: '#8b9a9a', margin: '10px 0 4px' }}>Names</div>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', margin: '10px 0 4px' }}>Names</div>
         <Seg value={labels} onChange={setLabels} options={[['top', 'Biggest'], ['all', 'All'], ['none', 'None']]} />
         {look('How strong your people at each company are: the average power score of the five strongest. The hotter, the stronger; size is still how many.')}
       </SidePanel>
@@ -226,10 +227,10 @@ function Filters({ filters, setFilters, counts, query, setQuery, industries, hid
     <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
       <div style={panelHeading}>Filter</div>
       <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Find a company"
-        style={{ padding: '6px 10px', borderRadius: 7, border: LINE, background: 'rgba(255,255,255,0.05)', color: '#fff', fontSize: 13, width: '100%', boxSizing: 'border-box' }} />
+        style={{ padding: '6px 10px', borderRadius: 7, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-1, #fff)', fontSize: 13, width: '100%', boxSizing: 'border-box' }} />
       {/* The same tiers × degrees as Network Circle (Blake, 2026-10-02) */}
       <TierGrid grid={filters.grid} counts={counts} onChange={(g) => set('grid', g)} mode="paths" />
-      <div style={{ fontSize: 11, color: '#8b9a9a', marginTop: -10 }}>Level</div>
+      <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: -10 }}>Level</div>
       <Seg value={filters.seniority} onChange={(v) => set('seniority', v)} options={[['all', 'Any level'], ['senior', 'Director+'], ['csuite', 'C-suite']]} />
       <div style={panelHeading}>Industries</div>
       <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
@@ -241,13 +242,13 @@ function Filters({ filters, setFilters, counts, query, setQuery, industries, hid
                 onClick={() => setHidden((h) => { const n = new Set(h); if (n.has(i.key)) n.delete(i.key); else n.add(i.key); return n; })}
                 style={{ padding: '3px 7px', border: 'none', background: `${i.color}22`, cursor: 'pointer', color: i.color, fontSize: 11 }}>●</button>
               <button onClick={() => onIndustry(i.key)} title="Analyse this industry"
-                style={{ padding: '3px 9px 3px 5px', border: 'none', background: 'transparent', cursor: 'pointer', color: '#cfd8d8', fontSize: 11.5 }}>
-                {i.label} <span style={{ color: '#778' }}>{i.people.length}</span>
+                style={{ padding: '3px 9px 3px 5px', border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--sd-fg-2, #cfd8d8)', fontSize: 11.5 }}>
+                {i.label} <span style={{ color: 'var(--sd-fg-4, #778)' }}>{i.people.length}</span>
               </button>
             </span>
           );
         })}
-        <span style={{ fontSize: 11, color: '#667', alignSelf: 'center' }}>Inferred from companies and headlines. ● hides one; its name opens it.</span>
+        <span style={{ fontSize: 11, color: 'var(--sd-fg-4, #667)', alignSelf: 'center' }}>Inferred from companies and headlines. ● hides one; its name opens it.</span>
       </div>
     </div>
   );
@@ -349,7 +350,7 @@ function CompanyMap({ companies, links, focus, onCompany, onIndustry, onClear, s
               const on = active && (e.source.id === active || e.target.id === active);
               return (
                 <line key={i} x1={e.source.x} y1={e.source.y} x2={e.target.x} y2={e.target.y}
-                  stroke={on ? '#FF6B35' : '#8fa6c0'} strokeOpacity={on ? 0.8 : active ? 0.04 : 0.14}
+                  stroke={on ? '#FF6B35' : 'var(--sd-fg-3, #8fa6c0)'} strokeOpacity={on ? 0.8 : active ? 0.04 : 0.14}
                   strokeWidth={on ? 1 + Math.log2(1 + e.weight) : 0.4 + Math.log2(1 + e.weight) * 0.5} />
               );
             })}
@@ -371,19 +372,19 @@ function CompanyMap({ companies, links, focus, onCompany, onIndustry, onClear, s
                 onPointerDown={drag ? (ev) => drag(ev, n) : undefined}
                 onClick={(ev) => { ev.stopPropagation(); if (clicked()) onCompany(n.id); }}>
                 <title>{`${n.co.name} · ${n.co.industry.label} (inferred)\n${n.co.d1} you know · ${n.co.d2} reachable${n.co.d3 ? ` · ${n.co.d3} further` : ''}`}</title>
-                <circle r={n.r} fill={hot ? heatColour(heat(n)) : n.co.industry.color} fillOpacity={hot ? 0.9 : 0.75}
-                  stroke={sel ? '#fff' : n.co.S ? TIER.S : 'rgba(0,0,0,0.35)'} strokeWidth={sel ? 2.5 : n.co.S ? 1.5 : 0.6} />
+                <circle className="sd-dot" r={n.r} fill={hot ? heatColour(heat(n)) : n.co.industry.color} fillOpacity={hot ? 0.9 : 0.75}
+                  stroke={sel ? 'var(--sd-fg-1, #fff)' : n.co.S ? TIER.S : 'rgba(0,0,0,0.35)'} strokeWidth={sel ? 2.5 : n.co.S ? 1.5 : 0.6} />
                 {/* the share you already know, as an inner disc */}
-                {n.co.d1 > 0 && <circle r={n.r * Math.sqrt(n.co.d1 / Math.max(1, n.co.people.length))} fill="#fff" fillOpacity={0.35} />}
+                {n.co.d1 > 0 && <circle r={n.r * Math.sqrt(n.co.d1 / Math.max(1, n.co.people.length))} fill="var(--sd-fg-1, #fff)" fillOpacity={0.35} />}
                 {(labelled.has(n.id) || n.id === active || sel) && (
-                  <text y={n.r + 11} textAnchor="middle" fontSize={10} fill="#e6edf0" style={{ pointerEvents: 'none' }}>{n.co.name}</text>
+                  <text y={n.r + 11} textAnchor="middle" fontSize={10} fill="var(--sd-fg-1, #e6edf0)" style={{ pointerEvents: 'none' }}>{n.co.name}</text>
                 )}
               </g>
             );
           })}
         </svg>
       )}
-      <div style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 11, color: '#778', lineHeight: 1.6, pointerEvents: 'none' }}>
+      <div style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 11, color: 'var(--sd-fg-4, #778)', lineHeight: 1.6, pointerEvents: 'none' }}>
         Bubble = a company, sized by your people there; {hot ? 'colour = how strong they are, cold to white hot' : 'colour = its industry'}; white centre = the share you already know; gold ring = an S-tier person inside.<br />
         A line = one of your connections at one company knows people at the other.
         {layout.cut ? ` Showing the ${MAX_BUBBLES} largest; ${layout.cut} smaller companies are in Companies.` : ''}
@@ -394,7 +395,7 @@ function CompanyMap({ companies, links, focus, onCompany, onIndustry, onClear, s
 
 function Bar({ parts, total }) {
   return (
-    <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden', background: 'rgba(255,255,255,0.06)' }}>
+    <div style={{ display: 'flex', height: 6, borderRadius: 3, overflow: 'hidden', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' }}>
       {parts.map(([n, color], i) => <div key={i} style={{ width: `${(n / Math.max(1, total)) * 100}%`, background: color }} />)}
     </div>
   );
@@ -406,7 +407,7 @@ function PersonLine({ p, note }) {
       <span style={{ width: 7, height: 7, borderRadius: '50%', background: TIER[p.tier] || '#667', flexShrink: 0 }} />
       <div style={{ minWidth: 0, flex: 1 }}>
         <div style={{ fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
-        <div style={{ fontSize: 11, color: '#8b9a9a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{note || p.headline}</div>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{note || p.headline}</div>
       </div>
     </div>
   );
@@ -437,9 +438,9 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
   const topCos = !isCompany ? [...data.companies.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10) : [];
 
   return (
-    <aside style={{ width: 360, flexShrink: 0, borderLeft: LINE, overflow: 'auto', padding: 16, background: 'rgba(255,255,255,0.02)' }}>
-      <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#888', cursor: 'pointer', fontSize: 12, padding: 0 }}>✕ Close</button>
-      <div style={{ fontSize: 10, letterSpacing: 1, color: '#8b9a9a', marginTop: 8 }}>{isCompany ? 'COMPANY' : 'INDUSTRY'} ANALYZER</div>
+    <aside style={{ width: 360, flexShrink: 0, borderLeft: LINE, overflow: 'auto', padding: 16, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.02)' }}>
+      <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--sd-fg-3, #888)', cursor: 'pointer', fontSize: 12, padding: 0 }}>✕ Close</button>
+      <div style={{ fontSize: 10, letterSpacing: 1, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 8 }}>{isCompany ? 'COMPANY' : 'INDUSTRY'} ANALYZER</div>
       <h2 style={{ margin: '4px 0 6px', fontSize: 20 }}>{isCompany ? data.name : data.label}</h2>
       {/* A company's industry opens that industry here (Blake, 2026-10-02: industries live in the side card, not a tab). */}
       {isCompany && onIndustry ? (
@@ -455,9 +456,9 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
 
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, margin: '14px 0' }}>
         {[[d1n, 'you know', '#00ff88'], [d2n, 'reachable', '#FF6B35'], [people.filter((p) => isSenior(p.headline)).length, 'director+', '#FFD700']].map(([n, l, c]) => (
-          <div key={l} style={{ padding: 8, borderRadius: 8, background: 'rgba(255,255,255,0.04)', textAlign: 'center' }}>
+          <div key={l} style={{ padding: 8, borderRadius: 8, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', textAlign: 'center' }}>
             <div style={{ fontSize: 20, fontWeight: 800, color: c }}>{n}</div>
-            <div style={{ fontSize: 10.5, color: '#8b9a9a' }}>{l}</div>
+            <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #8b9a9a)' }}>{l}</div>
           </div>
         ))}
       </div>
@@ -465,16 +466,16 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
       <Section title="By level">
         {levels.map(([label, { n }]) => (
           <div key={label} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 28px', gap: 8, alignItems: 'center', fontSize: 11.5, marginBottom: 4 }}>
-            <span style={{ color: '#aab7b7' }}>{label}</span>
+            <span style={{ color: 'var(--sd-fg-2, #aab7b7)' }}>{label}</span>
             <Bar total={people.length} parts={[[n, '#3498DB']]} />
-            <span style={{ color: '#778', textAlign: 'right' }}>{n}</span>
+            <span style={{ color: 'var(--sd-fg-4, #778)', textAlign: 'right' }}>{n}</span>
           </div>
         ))}
       </Section>
 
       {isCompany && ways && (
         <Section title="Ways in">
-          {ways.direct.length > 0 && <div style={{ fontSize: 11, color: '#00ff88', margin: '2px 0' }}>You already know {ways.direct.length} here</div>}
+          {ways.direct.length > 0 && <div style={{ fontSize: 11, color: 'var(--sd-green, #00ff88)', margin: '2px 0' }}>You already know {ways.direct.length} here</div>}
           {(() => {
             // One line per person: someone who works here and also knows others
             // here is the best way in of all, so they lead, with both facts.
@@ -492,7 +493,7 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
               </>
             );
           })()}
-          {!ways.direct.length && !ways.bridges.length && <div style={{ fontSize: 12, color: '#778' }}>No one you know links here yet.</div>}
+          {!ways.direct.length && !ways.bridges.length && <div style={{ fontSize: 12, color: 'var(--sd-fg-4, #778)' }}>No one you know links here yet.</div>}
         </Section>
       )}
 
@@ -504,8 +505,8 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
         <Section title="Connected companies">
           <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
             {related.map((r) => (
-              <button key={r.name} onClick={() => onCompany(r.name)} style={{ padding: '3px 9px', borderRadius: 10, border: LINE, background: `${(index.get(r.name)?.industry.color || '#666')}22`, color: '#dfe6e9', fontSize: 11.5, cursor: 'pointer' }}>
-                {r.name} <span style={{ color: '#778' }}>{r.weight}</span>
+              <button key={r.name} onClick={() => onCompany(r.name)} style={{ padding: '3px 9px', borderRadius: 10, border: LINE, background: `${(index.get(r.name)?.industry.color || '#666')}22`, color: 'var(--sd-fg-1, #dfe6e9)', fontSize: 11.5, cursor: 'pointer' }}>
+                {r.name} <span style={{ color: 'var(--sd-fg-4, #778)' }}>{r.weight}</span>
               </button>
             ))}
           </div>
@@ -518,7 +519,7 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
             <div key={name} onClick={() => onCompany(name)} style={{ display: 'grid', gridTemplateColumns: '1fr 60px 24px', gap: 8, alignItems: 'center', fontSize: 12, padding: '3px 0', cursor: 'pointer' }}>
               <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{name}</span>
               <Bar total={topCos[0][1]} parts={[[n, industry.color]]} />
-              <span style={{ color: '#778', textAlign: 'right' }}>{n}</span>
+              <span style={{ color: 'var(--sd-fg-4, #778)', textAlign: 'right' }}>{n}</span>
             </div>
           ))}
         </Section>
@@ -536,7 +537,7 @@ function AnalyzerPanel({ focus, data, index, links, d1, d2, filters, onClose, on
 function Section({ title, children }) {
   return (
     <div style={{ marginTop: 14 }}>
-      <div style={{ fontSize: 10.5, letterSpacing: 0.8, color: '#8b9a9a', fontWeight: 700, marginBottom: 6 }}>{title.toUpperCase()}</div>
+      <div style={{ fontSize: 10.5, letterSpacing: 0.8, color: 'var(--sd-fg-3, #8b9a9a)', fontWeight: 700, marginBottom: 6 }}>{title.toUpperCase()}</div>
       {children}
     </div>
   );
@@ -550,8 +551,8 @@ function CompanyScoreLine({ name }) {
   if (!c) return null;
   const from = { yours: 'your score', known: 'known list', network: 'estimated', default: 'unknown company' }[c.source];
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 12, color: '#aab7b7' }}>
-      Company score <b style={{ color: '#fff', fontSize: 15 }}>{c.score}</b>/10 · {from}
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 12, color: 'var(--sd-fg-2, #aab7b7)' }}>
+      Company score <b style={{ color: 'var(--sd-fg-1, #fff)', fontSize: 15 }}>{c.score}</b>/10 · {from}
       <span style={{ marginLeft: 'auto' }}><ScorePicker company={c} onSet={setScore} compact /></span>
     </div>
   );

package/.next/standalone/app/components/PeopleMap.js

@@ -25,7 +25,7 @@ import { clusterStrength } from '../../lib/map-heat';
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
 const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
-const LINE = '1px solid rgba(255,255,255,0.1)';
+const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 const UNSCANNED = '#3a3f55';
 const MAX_BUBBLES = 400;
 const ALL_INDUSTRIES = [...INDUSTRIES, UNKNOWN_INDUSTRY];
@@ -88,7 +88,7 @@ export default function PeopleMap({ d1 = [], d2 = [], top = null, look = null, c
         {top}
         <div style={panelHeading}>Filter</div>
         <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Find a person"
-          style={{ width: '100%', boxSizing: 'border-box', padding: '6px 10px', borderRadius: 7, border: LINE, background: 'rgba(255,255,255,0.05)', color: '#fff', fontSize: 13, marginBottom: 8 }} />
+          style={{ width: '100%', boxSizing: 'border-box', padding: '6px 10px', borderRadius: 7, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-1, #fff)', fontSize: 13, marginBottom: 8 }} />
         <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
           <Seg value={who} onChange={setWho} options={[['scanned', `Scanned (${fmt(scannedCount)})`], ['all', `All (${fmt(model.people.length)})`]]} />
         </div>
@@ -103,18 +103,18 @@ export default function PeopleMap({ d1 = [], d2 = [], top = null, look = null, c
               <button key={i.key} title={off ? 'Show on the map' : 'Hide from the map'}
                 onClick={() => setHidden((h) => { const n = new Set(h); if (n.has(i.key)) n.delete(i.key); else n.add(i.key); return n; })}
                 style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 10px', borderRadius: 14, cursor: 'pointer',
-                  border: `1px solid ${i.color}55`, background: off ? 'transparent' : `${i.color}14`, color: '#cfd8d8', fontSize: 11.5, opacity: off ? 0.4 : 1 }}>
+                  border: `1px solid ${i.color}55`, background: off ? 'transparent' : `${i.color}14`, color: 'var(--sd-fg-2, #cfd8d8)', fontSize: 11.5, opacity: off ? 0.4 : 1 }}>
                 <span style={{ width: 7, height: 7, borderRadius: '50%', background: i.color }} />
-                {i.label} <span style={{ color: '#778' }}>{fmt(i.count)}</span>
+                {i.label} <span style={{ color: 'var(--sd-fg-4, #778)' }}>{fmt(i.count)}</span>
               </button>
             );
           })}
         </div>
-        <div style={{ fontSize: 10.5, color: '#667', marginTop: 6 }}>Inferred from where each connection works.</div>
+        <div style={{ fontSize: 10.5, color: 'var(--sd-fg-4, #667)', marginTop: 6 }}>Inferred from where each connection works.</div>
         <div style={panelHeading}>Read the map</div>
-        <div style={{ fontSize: 11, color: '#8b9a9a', marginBottom: 4 }}>Bubble size</div>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', marginBottom: 4 }}>Bubble size</div>
         <Seg value={sizeBy} onChange={setSizeBy} options={Object.entries(SIZE_BY).map(([k, v]) => [k, v.label])} />
-        <div style={{ fontSize: 11, color: '#8b9a9a', margin: '10px 0 4px' }}>Names</div>
+        <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #8b9a9a)', margin: '10px 0 4px' }}>Names</div>
         <Seg value={labels} onChange={setLabels} options={[['top', 'Biggest'], ['all', 'All'], ['none', 'None']]} />
         {look}
       </SidePanel>
@@ -221,7 +221,7 @@ function Bubbles({ people, links, sizeBy, sectorOf, rank, onOpen, names = 'top',
               const on = hover && (e.source.id === hover || e.target.id === hover);
               return (
                 <line key={i} x1={e.source.x} y1={e.source.y} x2={e.target.x} y2={e.target.y}
-                  stroke={on ? '#FF6B35' : '#8fa6c0'} strokeOpacity={on ? 0.8 : hover ? 0.03 : 0.09}
+                  stroke={on ? '#FF6B35' : 'var(--sd-fg-3, #8fa6c0)'} strokeOpacity={on ? 0.8 : hover ? 0.03 : 0.09}
                   strokeWidth={on ? 1 + Math.log2(1 + e.weight) : 0.4 + Math.log2(1 + e.weight) * 0.4} />
               );
             })}
@@ -239,14 +239,14 @@ function Bubbles({ people, links, sizeBy, sectorOf, rank, onOpen, names = 'top',
                 onMouseEnter={() => setHover(n.id)} onMouseLeave={() => setHover(null)}
                 onPointerDown={drag ? (ev) => drag(ev, n) : undefined}
                 onClick={() => { if (clicked() && p.size) onOpen(n.id); }}>
-                <circle r={n.r} fill={!p.size ? UNSCANNED : hot ? heatColour(heat(n)) : n.sector.color} fillOpacity={p.size ? 0.92 : 0.6}
-                  stroke={hover === n.id ? '#fff' : p.S ? TIER.S : 'rgba(0,0,0,0.35)'}
+                <circle className="sd-dot" r={n.r} fill={!p.size ? UNSCANNED : hot ? heatColour(heat(n)) : n.sector.color} fillOpacity={p.size ? 0.92 : 0.6}
+                  stroke={hover === n.id ? 'var(--sd-fg-1, #fff)' : p.S ? TIER.S : 'rgba(0,0,0,0.35)'}
                   strokeWidth={hover === n.id ? 2.5 : p.S ? Math.min(4, 1 + p.S / 40) : 0.6} />
                 {/* The share of their cluster only they can open, as an inner disc */}
-                {p.size > 0 && p.only > 0 && <circle r={n.r * Math.sqrt(p.share) * 0.85} fill="#fff" fillOpacity={0.3} />}
+                {p.size > 0 && p.only > 0 && <circle r={n.r * Math.sqrt(p.share) * 0.85} fill="var(--sd-fg-1, #fff)" fillOpacity={0.3} />}
                 {(labelled.has(n.id) || hover === n.id) && (
-                  <text y={n.r + 11} textAnchor="middle" fontSize={10} fill="#e6edf0" style={{ pointerEvents: 'none' }}
-                    paintOrder="stroke" stroke="rgba(0,0,0,0.6)" strokeWidth={3}>{p.person.name}</text>
+                  <text y={n.r + 11} textAnchor="middle" fontSize={10} fill="var(--sd-fg-1, #e6edf0)" style={{ pointerEvents: 'none' }}
+                    paintOrder="stroke" stroke="rgba(var(--sd-shade, 0, 0, 0), 0.6)" strokeWidth={3}>{p.person.name}</text>
                 )}
               </g>
             );
@@ -254,7 +254,7 @@ function Bubbles({ people, links, sizeBy, sectorOf, rank, onOpen, names = 'top',
         </svg>
       )}
       {hovered && <Card n={hovered} at={onScreen(hovered)} w={w} rank={rank(hovered.id)} />}
-      <div style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 11, color: '#778', lineHeight: 1.6, pointerEvents: 'none' }}>
+      <div style={{ position: 'absolute', left: 12, bottom: 10, fontSize: 11, color: 'var(--sd-fg-4, #778)', lineHeight: 1.6, pointerEvents: 'none' }}>
         Bubble = one of your connections, sized by {sizeBy.label.toLowerCase()} (value: S tier counts 3, A tier 2, everyone else 1){hot ? '; colour = how strong their cluster is, person for person, cold to white hot' : ''};
         white centre = the share of their cluster only they can open; gold ring = S tier inside.<br />
         A line = two of your connections whose clusters share people. Grey = not scanned yet.
@@ -273,11 +273,11 @@ function Card({ n, at, w, rank }) {
   return (
     <div style={{
       position: 'absolute', left, top: Math.max(8, at.y - 70), width, pointerEvents: 'none', zIndex: 5,
-      padding: '12px 14px', borderRadius: 12, background: 'rgba(8,10,22,0.96)', border: `1px solid ${n.sector.color}99`,
-      boxShadow: '0 12px 40px rgba(0,0,0,0.6)', fontSize: 12, lineHeight: 1.45, color: '#ddd',
+      padding: '12px 14px', borderRadius: 12, background: 'var(--sd-surface, rgba(8,10,22,0.96))', border: `1px solid ${n.sector.color}99`,
+      boxShadow: '0 12px 40px rgba(0,0,0,0.6)', fontSize: 12, lineHeight: 1.45, color: 'var(--sd-fg-1, #ddd)',
     }}>
-      <div style={{ fontSize: 15, fontWeight: 800, color: '#fff' }}>{p.person.name}</div>
-      <div style={{ fontSize: 11.5, color: '#8a8fa8' }}>
+      <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--sd-fg-1, #fff)' }}>{p.person.name}</div>
+      <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8a8fa8)' }}>
         {role}{p.person.tier ? ` · ${p.person.tier}-tier` : ''} · {n.sector.label}
       </div>
       {p.size ? (
@@ -288,12 +288,12 @@ function Card({ n, at, w, rank }) {
             <Stat value={`${fmt(p.S)} S · ${fmt(p.A)} A`} label="the strongest among them" color="#FFD700" />
             <Stat value={`${fmt(p.only)} (${Math.round(p.share * 100)}%)`} label="only through them" color="#00E5FF" />
           </div>
-          <div style={{ fontSize: 11.5, color: '#aab' }}>
+          <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #aab)' }}>
             {rank === 1 ? 'The most valuable cluster you’ve scanned. ' : rank != null ? `Worth more than ${Math.round(rank * 100)}% of the clusters you’ve scanned. ` : ''}Click to open it in Bridge Chains.
           </div>
         </>
       ) : (
-        <div style={{ fontSize: 11.5, color: '#aab', marginTop: 8 }}>Their circle isn’t scanned yet, so there’s no cluster to size.</div>
+        <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #aab)', marginTop: 8 }}>Their circle isn’t scanned yet, so there’s no cluster to size.</div>
       )}
     </div>
   );
@@ -303,7 +303,7 @@ function Stat({ value, label, color = '#fff' }) {
   return (
     <div>
       <div style={{ fontSize: 15, fontWeight: 800, color }}>{value}</div>
-      <div style={{ fontSize: 10.5, color: '#8a8fa8' }}>{label}</div>
+      <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #8a8fa8)' }}>{label}</div>
     </div>
   );
 }