six-degrees 0.6.0 → 0.8.0

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

@@ -22,8 +22,8 @@ const first = (name) => String(name || '').trim().split(/\s+/)[0] || 'Their';
 
 const rowStyle = {
   display: 'flex', alignItems: 'center', gap: 9, width: '100%', padding: '7px 8px', borderRadius: 8, boxSizing: 'border-box',
-  background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)',
-  color: '#fff', cursor: 'pointer', textAlign: 'left', font: 'inherit', textDecoration: 'none',
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.06)',
+  color: 'var(--sd-fg-1, #fff)', cursor: 'pointer', textAlign: 'left', font: 'inherit', textDecoration: 'none',
 };
 
 /** One person: opens their card, or (with `href`) goes there instead. */
@@ -36,7 +36,7 @@ function Row({ person, tierColors, note, noteColor, onSelect, href, label }) {
           {person.name}
           <span style={{ fontSize: 10, color: tierColors[person.tier] || '#888', fontWeight: 800, marginLeft: 6 }}>{person.tier}</span>
         </span>
-        <span style={{ display: 'block', fontSize: 10.5, color: '#888', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        <span style={{ display: 'block', fontSize: 10.5, color: 'var(--sd-fg-3, #888)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
           {[person.title, person.company].filter(Boolean).join(' · ') || ' '}
         </span>
       </span>
@@ -74,7 +74,7 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
     <div>
       <button onClick={onToggle} style={{
         display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none',
-        color: '#888', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
+        color: 'var(--sd-fg-3, #888)', fontSize: 12, cursor: 'pointer', padding: '0 0 10px', fontWeight: 600,
       }}>
         <span style={{ fontSize: 16 }}>&larr;</span> Close
       </button>
@@ -82,11 +82,11 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
         <Avatar person={person} size={38} tierColors={tierColors} />
         <div style={{ minWidth: 0 }}>
-          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, color: '#888', textTransform: 'uppercase' }}>You&rsquo;re in</div>
+          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, color: 'var(--sd-fg-3, #888)', textTransform: 'uppercase' }}>You&rsquo;re in</div>
           <h3 style={{ fontSize: 16, fontWeight: 800, margin: 0, color }}>{first(person.name)}&rsquo;s circle</h3>
         </div>
       </div>
-      <div style={{ fontSize: 11.5, color: '#999', marginBottom: 12 }}>
+      <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #999)', marginBottom: 12 }}>
         {[person.title, person.company].filter(Boolean).join(' · ')}
         <button type="button" onClick={() => onSelect?.(person)} style={{
           display: 'block', marginTop: 6, padding: 0, background: 'none', border: 'none', color: '#74B9FF',
@@ -96,7 +96,7 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
 
       {/* The same count as the map: the people you added from here were in it too. */}
       <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1 }}>{(members.length + added.length).toLocaleString('en-US')}</div>
-      <div style={{ fontSize: 11, color: '#888', marginBottom: 10 }}>
+      <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #888)', marginBottom: 10 }}>
         {members.length + added.length === 1 ? 'person' : 'people'} in their circle{added.length ? ` · you added ${added.length} of them` : ''}
       </div>
 
@@ -107,11 +107,11 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
             onClick={() => { setTier(tier === t ? null : t); setShown(PAGE); }}
             style={{
               padding: '4px 9px', borderRadius: 12, fontSize: 11, fontWeight: 700, cursor: counts[t] ? 'pointer' : 'default',
-              border: `1px solid ${tier === t ? tierColors[t] : 'rgba(255,255,255,0.1)'}`,
-              background: tier === t ? `${tierColors[t]}26` : 'rgba(255,255,255,0.03)',
-              color: counts[t] ? tierColors[t] : '#444',
+              border: `1px solid ${tier === t ? tierColors[t] : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`,
+              background: tier === t ? `${tierColors[t]}26` : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+              color: counts[t] ? tierColors[t] : 'var(--sd-fg-5, #444)',
             }}>
-            {t} <span style={{ color: '#aaa', fontWeight: 600 }}>{counts[t]}</span>
+            {t} <span style={{ color: 'var(--sd-fg-3, #aaa)', fontWeight: 600 }}>{counts[t]}</span>
           </button>
         ))}
       </div>
@@ -120,12 +120,12 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
         onChange={(e) => { setQuery(e.target.value); setShown(PAGE); }}
         style={{
           width: '100%', padding: '8px 12px', borderRadius: 8, fontSize: 12, marginBottom: 14, boxSizing: 'border-box',
-          border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.05)', color: '#fff', outline: 'none',
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-1, #fff)', outline: 'none',
         }} />
 
       {added.length > 0 && !tier && q.length < 2 && (
         <div style={{ marginBottom: 14 }}>
-          <div style={{ fontSize: 10, fontWeight: 700, color: '#00ff88', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
+          <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--sd-green, #00ff88)', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
             You added from here ({added.length})
           </div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
@@ -140,11 +140,11 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
         </div>
       )}
 
-      <div style={{ fontSize: 10, fontWeight: 700, color: '#888', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
+      <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--sd-fg-3, #888)', letterSpacing: 1, marginBottom: 6, textTransform: 'uppercase' }}>
         {tier ? `${tier} tier in their circle` : added.length ? 'Everyone else in their circle' : 'Everyone in their circle'} ({list.length.toLocaleString('en-US')})
       </div>
       {list.length === 0 ? (
-        <div style={{ fontSize: 11.5, color: '#888', lineHeight: 1.5 }}>
+        <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #888)', lineHeight: 1.5 }}>
           {members.length === 0 ? 'Their circle isn’t scanned yet.' : 'No one here matches.'}
         </div>
       ) : (
@@ -152,7 +152,7 @@ export default function CirclePanel({ person, connections = [], degree2 = [], sc
           {list.slice(0, shown).map((m) => <Row key={m.id} person={m} tierColors={tierColors} onSelect={onSelect} />)}
           {list.length > shown && (
             <button type="button" onClick={() => setShown((n) => n + PAGE * 3)} style={{
-              background: 'none', border: 'none', color: '#888', fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: '6px 0', textAlign: 'left',
+              background: 'none', border: 'none', color: 'var(--sd-fg-3, #888)', fontSize: 11, fontWeight: 600, cursor: 'pointer', padding: '6px 0', textAlign: 'left',
             }}>Show more ({(list.length - shown).toLocaleString('en-US')} left)</button>
           )}
         </div>

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

@@ -0,0 +1,64 @@
+'use client';
+
+// The ↻ of Check for new, as a cluster forming (Blake, 2026-10-03: "use the
+// bridge cluster animation … building dots clock wise and is satisfying. this
+// will make it feel more alive"). A hub with a ring of dots round it, the way
+// the map draws a connection's circle. At rest it's the ↻; hovering the button
+// builds the ring once, clockwise from the top; while it checks, the ring keeps
+// building, round and round. The dots take the look's gold, purple and blue,
+// as every other cluster does (lib/themes.js). Still under Reduce Motion.
+//
+// Hover is the button's own: give it the class "cluster-host".
+
+import { TIER_COLORS } from '../../lib/themes';
+
+const N = 10;
+const CSS = `
+@keyframes csBuild { from { opacity: 0; transform: scale(0.2); } 70% { opacity: 1; transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
+@keyframes csLoop {
+  0% { opacity: 0; transform: scale(0.2); }
+  8% { opacity: 1; transform: scale(1.3); }
+  14%, 72% { opacity: 1; transform: scale(1); }
+  88%, 100% { opacity: 0; transform: scale(0.6); }
+}
+.cs { position: relative; display: inline-block; flex-shrink: 0; }
+.cs .cs-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; transition: opacity .15s, transform .2s; }
+.cs svg { position: absolute; inset: 0; overflow: visible; }
+.cs .cs-dot { transform-box: fill-box; transform-origin: center; opacity: 0; }
+.cs .cs-hub { opacity: 0; transition: opacity .15s; }
+.cluster-host:hover .cs:not(.cs-live) .cs-glyph { opacity: 0; transform: scale(.6) rotate(90deg); }
+.cluster-host:hover .cs:not(.cs-live) .cs-hub { opacity: 1; }
+.cluster-host:hover .cs:not(.cs-live) .cs-dot { animation: csBuild .32s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: calc(var(--i) * 34ms); }
+.cs.cs-live .cs-glyph { opacity: 0; }
+.cs.cs-live .cs-hub { opacity: 1; }
+.cs.cs-live .cs-dot { animation: csLoop 1.5s ease-out infinite; animation-delay: calc(var(--i) * 95ms); }
+@media (prefers-reduced-motion: reduce) {
+  .cluster-host:hover .cs:not(.cs-live) .cs-dot, .cs.cs-live .cs-dot { animation: none; opacity: 1; }
+  .cluster-host:hover .cs:not(.cs-live) .cs-glyph { transform: none; }
+}
+`;
+
+/** @param {{ size?: number, live?: boolean, glyph?: string }} props  live: a check is running */
+export default function ClusterSpinner({ size = 14, live = false, glyph = '↻' }) {
+  const c = size / 2;
+  const r = size * 0.42;
+  const dot = Math.max(1, size * 0.085);
+  const colours = [TIER_COLORS.S, TIER_COLORS.A, TIER_COLORS.B];
+  return (
+    <span className={`cs${live ? ' cs-live' : ''}`} aria-hidden="true" style={{ width: size, height: size }}>
+      <style>{CSS}</style>
+      <span className="cs-glyph" style={{ fontSize: size }}>{glyph}</span>
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <circle className="cs-hub" cx={c} cy={c} r={dot * 1.35} fill="currentColor" />
+        {Array.from({ length: N }, (_, i) => {
+          // Clockwise from twelve o'clock.
+          const a = -Math.PI / 2 + (i * 2 * Math.PI) / N;
+          return (
+            <circle key={i} className="cs-dot sd-dot" style={{ '--i': i }} cx={c + r * Math.cos(a)} cy={c + r * Math.sin(a)} r={dot}
+              fill={colours[i % colours.length]} />
+          );
+        })}
+      </svg>
+    </span>
+  );
+}

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

@@ -7,13 +7,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import LegacyScoresCard from './LegacyScoresCard';
 
-const LINE = '1px solid rgba(255,255,255,0.1)';
+const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 const SOURCE = {
-  yours: { label: 'your score', color: '#00ff88' },
-  known: { label: 'known list', color: '#3498DB' },
+  yours: { label: 'your score', color: 'var(--sd-green, #00ff88)' },
+  known: { label: 'known list', color: 'var(--sd-blue, #3498DB)' },
   data: { label: 'public data', color: '#1abc9c' },
-  network: { label: 'estimated: many of your people', color: '#FF6B35' },
-  default: { label: 'unknown company', color: '#778' },
+  network: { label: 'estimated: many of your people', color: 'var(--sd-orange, #FF6B35)' },
+  default: { label: 'unknown company', color: 'var(--sd-fg-4, #778)' },
 };
 
 async function fetchScores() {
@@ -52,7 +52,7 @@ export function ScorePicker({ company, onSet, compact }) {
   return (
     <select disabled={busy} value={company.source === 'yours' ? String(company.score) : 'auto'} onChange={(e) => pick(e.target.value)}
       title="Set this company's score. Auto uses the known list or an estimate."
-      style={{ padding: compact ? '2px 4px' : '4px 6px', borderRadius: 6, border: LINE, background: '#11131c', color: '#dfe6e9', fontSize: 12 }}>
+      style={{ padding: compact ? '2px 4px' : '4px 6px', borderRadius: 6, border: LINE, background: 'var(--sd-card, #11131c)', color: 'var(--sd-fg-1, #dfe6e9)', fontSize: 12 }}>
       <option value="auto">Auto ({company.source === 'yours' ? (company.suggested ?? 'est.') : company.score})</option>
       {[10, 9, 8, 7, 6, 5, 4, 3, 2, 1].map((n) => <option key={n} value={n}>{n}</option>)}
     </select>
@@ -99,7 +99,7 @@ export default function CompanyScores({ onRescored, version = 0 }) {
   }, [companies, query, only]);
 
   if (error) return <div style={{ padding: 24, color: '#e74c3c' }}>{error}</div>;
-  if (!companies) return <div style={{ padding: 24, color: '#778' }}>Loading companies…</div>;
+  if (!companies) return <div style={{ padding: 24, color: 'var(--sd-fg-4, #778)' }}>Loading companies…</div>;
 
   const count = (src) => companies.filter((c) => c.source === src).length;
 
@@ -107,56 +107,56 @@ export default function CompanyScores({ onRescored, version = 0 }) {
     <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
       <div style={{ maxWidth: 980, margin: '0 auto' }}>
         <LegacyScoresCard onAnswered={legacyAnswered} />
-        <div style={{ padding: 14, borderRadius: 10, border: LINE, background: 'rgba(255,255,255,0.03)', fontSize: 12.5, color: '#cfd8d8', lineHeight: 1.6 }}>
-          <b style={{ color: '#fff' }}>How a power score works.</b> power = <b>title</b> × <b>company weight</b> + bonus.
+        <div style={{ padding: 14, borderRadius: 10, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', fontSize: 12.5, color: 'var(--sd-fg-2, #cfd8d8)', lineHeight: 1.6 }}>
+          <b style={{ color: 'var(--sd-fg-1, #fff)' }}>How a power score works.</b> power = <b>title</b> × <b>company weight</b> + bonus.
           The title (student 1 … founder or C-suite 10) comes from someone&rsquo;s roles, with former roles at 70%; an audience of their own counts like a title (1M+ followers like a director).
           The company weight runs from 0.725 for a company we don’t know (or none found), the middle of the scale, to 1.0 (a company scored 10), so seniority counts for more at a bigger company.
           The bonus is at most +1.5, for investor, YC, an audience in the millions or the top award of any field, and counts half at an unknown company.
           A 1st-degree person whose circle is unusually strong gets up to +2 more: up to +1 for a high share of it at A or S, or +1 for every 25 people there.
-          Tiers are graded on your network’s curve unless you choose the fixed scale (<a href="#tiers" style={{ color: '#3498DB' }}>Tiers</a>, above): your top 3% are S, the next 12% A, the next 25% B (it only lifts, and never lifts anyone under 4 into S or A). On the fixed scale, S ≥ 7.5 · A ≥ 5.5 · B ≥ 4 · C ≥ 2.5.
-          <div style={{ marginTop: 6, color: '#8b9a9a' }}>
+          Tiers are graded on your network’s curve unless you choose the fixed scale (<a href="#tiers" style={{ color: 'var(--sd-blue, #3498DB)' }}>Tiers</a>, above): your top 3% are S, the next 12% A, the next 25% B (it only lifts, and never lifts anyone under 4 into S or A). On the fixed scale, S ≥ 7.5 · A ≥ 5.5 · B ≥ 4 · C ≥ 2.5.
+          <div style={{ marginTop: 6, color: 'var(--sd-fg-3, #8b9a9a)' }}>
             So a VP at a 10 scores 9.0, a founder at an unknown company 7.3, a director at an unknown company 5.4, and an intern at a 10 scores 2.0.
             Set a company&rsquo;s score below and everyone there is rescored.
-            Companies in the sectors you pick (<a href="#sector" style={{ color: '#3498DB' }}>Your sector</a>, above) get +1 or +2; a score you set is never changed.
+            Companies in the sectors you pick (<a href="#sector" style={{ color: 'var(--sd-blue, #3498DB)' }}>Your sector</a>, above) get +1 or +2; a score you set is never changed.
           </div>
         </div>
 
         <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', margin: '14px 0 10px' }}>
           <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, minWidth: 180 }} />
+            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, minWidth: 180 }} />
           {[['all', `All ${companies.length}`], ['known', `Known list ${count('known')}`], ['data', `Public data ${count('data')}`], ['yours', `Yours ${count('yours')}`], ['network', `Estimated ${count('network')}`], ['default', `Unknown ${count('default')}`]].map(([k, l]) => (
             <button key={k} onClick={() => setOnly(k)} style={{
               padding: '5px 10px', borderRadius: 7, border: LINE, cursor: 'pointer', fontSize: 11.5, fontWeight: 600,
-              background: only === k ? 'rgba(52,152,219,0.25)' : 'transparent', color: only === k ? '#cfe6f7' : '#8b9a9a',
+              background: only === k ? 'rgba(52,152,219,0.25)' : 'transparent', color: only === k ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-3, #8b9a9a)',
             }}>{l}</button>
           ))}
         </div>
 
         <div style={{ borderRadius: 10, border: LINE, overflow: 'hidden' }}>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 70px 60px 180px 110px', gap: 8, padding: '8px 12px', fontSize: 10.5, letterSpacing: 0.6, color: '#8b9a9a', background: 'rgba(255,255,255,0.04)' }}>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 70px 60px 180px 110px', gap: 8, padding: '8px 12px', fontSize: 10.5, letterSpacing: 0.6, color: 'var(--sd-fg-3, #8b9a9a)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)' }}>
             <span>COMPANY</span><span style={{ textAlign: 'right' }}>PEOPLE</span><span style={{ textAlign: 'right' }}>YOU KNOW</span><span style={{ textAlign: 'right' }}>DIRECTOR+</span>
             <span style={{ textAlign: 'right' }}>SCORE</span><span>SOURCE</span><span>SET</span>
           </div>
           {shown.slice(0, limit).map((c) => (
-            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 70px 60px 180px 110px', gap: 8, padding: '7px 12px', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.05)', fontSize: 12.5 }}>
+            <div key={c.name} style={{ display: 'grid', gridTemplateColumns: '1fr 70px 70px 70px 60px 180px 110px', gap: 8, padding: '7px 12px', alignItems: 'center', borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.05)', fontSize: 12.5 }}>
               <span style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                 <span title={`${c.industry.label} (inferred)`} style={{ width: 8, height: 8, borderRadius: '50%', background: c.industry.color, flexShrink: 0 }} />
                 <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</span>
               </span>
               <span style={{ textAlign: 'right' }}>{c.people}</span>
-              <span style={{ textAlign: 'right', color: c.d1 ? '#00ff88' : '#556' }}>{c.d1}</span>
-              <span style={{ textAlign: 'right', color: c.senior ? '#FFD700' : '#556' }}>{c.senior}</span>
+              <span style={{ textAlign: 'right', color: c.d1 ? 'var(--sd-green, #00ff88)' : 'var(--sd-fg-5, #556)' }}>{c.d1}</span>
+              <span style={{ textAlign: 'right', color: c.senior ? 'var(--sd-gold, #FFD700)' : 'var(--sd-fg-5, #556)' }}>{c.senior}</span>
               <b style={{ textAlign: 'right', fontSize: 15 }}>{c.score}</b>
               <span style={{ fontSize: 11, color: SOURCE[c.source]?.color }}>
                 {SOURCE[c.source]?.label}
-                {c.sectorBonus > 0 && <span style={{ color: '#00ff88' }}> + {c.sectorBonus} your sector</span>}
+                {c.sectorBonus > 0 && <span style={{ color: 'var(--sd-green, #00ff88)' }}> + {c.sectorBonus} your sector</span>}
               </span>
               <ScorePicker company={c} onSet={set} compact />
             </div>
           ))}
         </div>
         {shown.length > limit && (
-          <button onClick={() => setLimit((n) => n + 300)} style={{ marginTop: 10, padding: '7px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.05)', color: '#dfe6e9', cursor: 'pointer', fontSize: 12 }}>
+          <button onClick={() => setLimit((n) => n + 300)} style={{ marginTop: 10, padding: '7px 14px', borderRadius: 8, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-1, #dfe6e9)', cursor: 'pointer', fontSize: 12 }}>
             Show more ({shown.length - limit} left)
           </button>
         )}

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { loadSampleIntoSession } from '../../lib/demo';
+import { keptCsvProblem } from '../../lib/csv';
 
 // The first thing a new install shows: there is no network yet, so pick a way in.
 //
@@ -44,24 +45,22 @@ export default function EmptyState() {
         }}>
           Welcome to Six Degrees
         </h2>
-        <p style={{ color: 'rgba(255,255,255,0.5)', fontSize: 14.5, lineHeight: 1.7, margin: '0 0 28px' }}>
+        <p style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.5)', fontSize: 14.5, lineHeight: 1.7, margin: '0 0 28px' }}>
           Your network, drawn as a galaxy. Everything stays on this computer.
-          Pick how to bring it in — you can switch later.
+          Pick how to bring it in. You can switch later.
         </p>
 
+        {/* Chrome said up front: the scanner drives it, and step 1 waits for it. */}
         <Choice
           href="/setup"
           primary
           badge="Recommended"
           title="Scan my LinkedIn"
-          body="A few guided steps: set up the scanner, sign into LinkedIn yourself, and watch your galaxy fill in. The only way to see who your connections know."
+          body="A few guided steps: set up the scanner, sign into LinkedIn yourself, and watch your galaxy fill in. The only way to see who your connections know. Needs Google Chrome."
+          note="It runs your own LinkedIn account automatically, and LinkedIn may restrict accounts that do this."
         />
 
-        <Choice
-          href="/import"
-          title="Import my LinkedIn CSV"
-          body="LinkedIn’s official export, read in your browser. Takes about ten minutes to arrive by email. Shows the people you know, not who they know."
-        />
+        <CsvChoice />
 
         <Choice
           onClick={loadSample}
@@ -71,13 +70,13 @@ export default function EmptyState() {
         />
 
         {error && (
-          <div style={{ color: '#ff6b6b', fontSize: 13, marginTop: 18 }}>{error}</div>
+          <div style={{ color: 'var(--sd-red, #ff6b6b)', fontSize: 13, marginTop: 18 }}>{error}</div>
         )}
 
         {/* The new-computer case: a network saved on the old one is brought in from Settings. */}
-        <p style={{ color: 'rgba(255,255,255,0.45)', fontSize: 13, lineHeight: 1.6, margin: '18px 0 0' }}>
+        <p style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.45)', fontSize: 13, lineHeight: 1.6, margin: '18px 0 0' }}>
           Moving from another computer?{' '}
-          <a href="/settings#data" style={{ color: 'rgba(255,255,255,0.75)' }}>
+          <a href="/settings#data" style={{ color: 'rgba(var(--sd-ink, 255, 255, 255), 0.75)' }}>
             Import your saved copy in Settings → Your data.
           </a>
         </p>
@@ -86,16 +85,36 @@ export default function EmptyState() {
   );
 }
 
-function Choice({ href, onClick, disabled, primary, badge, title, body }) {
+// The CSV card. It says where an import is kept, and when one is kept but
+// can't be read, says that too, rather than look as if there were none
+// (lib/csv.js keptCsvProblem; TRAPS §7).
+function CsvChoice() {
+  const [problem, setProblem] = useState(null);
+  useEffect(() => {
+    let off = false;
+    keptCsvProblem().then((p) => { if (!off) setProblem(p); });
+    return () => { off = true; };
+  }, []);
+  return (
+    <Choice
+      href="/import"
+      title="Import my LinkedIn CSV"
+      body="LinkedIn’s official export. Takes about ten minutes to arrive by email. Kept on this computer, in your data folder, until you remove it. Shows the people you know, not who they know."
+      note={problem}
+    />
+  );
+}
+
+function Choice({ href, onClick, disabled, primary, badge, title, body, note }) {
   const style = {
     display: 'block', width: '100%', boxSizing: 'border-box', textAlign: 'left',
     padding: '16px 18px', borderRadius: 12, marginBottom: 12, textDecoration: 'none',
     cursor: disabled ? 'default' : 'pointer', font: 'inherit',
-    border: primary ? '1px solid rgba(255,215,0,0.45)' : '1px solid rgba(255,255,255,0.12)',
+    border: primary ? '1px solid rgba(255,215,0,0.45)' : '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)',
     background: primary
       ? 'linear-gradient(135deg, rgba(255,215,0,0.12), rgba(155,89,182,0.14))'
-      : 'rgba(255,255,255,0.03)',
-    color: '#fff',
+      : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+    color: 'var(--sd-fg-1, #fff)',
   };
   const inner = (
     <>
@@ -107,9 +126,11 @@ function Choice({ href, onClick, disabled, primary, badge, title, body }) {
             padding: '3px 8px', borderRadius: 20, background: '#FFD700', color: '#0a0a1a',
           }}>{badge}</span>
         )}
-        <span style={{ marginLeft: 'auto', color: 'rgba(255,255,255,0.4)' }}>→</span>
+        <span style={{ marginLeft: 'auto', color: 'rgba(var(--sd-ink, 255, 255, 255), 0.4)' }}>→</span>
       </div>
-      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6 }}>{body}</div>
+      <div style={{ fontSize: 13, color: 'rgba(var(--sd-ink, 255, 255, 255), 0.5)', lineHeight: 1.6 }}>{body}</div>
+      {/* What it risks, said where it's recommended (lib/scan-risk.js asks again before the first scan). */}
+      {note && <div style={{ fontSize: 12.5, color: 'var(--sd-gold, #FFD700)', opacity: 0.85, lineHeight: 1.5, marginTop: 6 }}>{note}</div>}
     </>
   );
   return href

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

@@ -1,11 +1,13 @@
 'use client';
 
-// The Scan page's one question before the first scan: what field you're in.
-// The same picks as Settings → Scores → Your field (SectorPicker), saved the same way
-// (lib/settings-client.js), so the first scan is already scored with them.
-// Optional: Skip for now carries on without one. Either answer is kept
-// (`fieldAsked`, lib/sector-focus.js), so it's asked once; when it's asked at
-// all is lib/scanner-setup.js askForField.
+// The Scan page's one question, once your connections are in: what field
+// you're in. The same picks as Settings → Scores → Your field (SectorPicker),
+// saved the same way (lib/settings-client.js), which rescores everyone with
+// them (lib/settings-effects.js) and every scan after. It used to be asked
+// before the first scan, in the way of it; now it's asked under "Your galaxy
+// is ready". Optional: Skip for now carries on without one. Either answer is
+// kept (`fieldAsked`, lib/sector-focus.js), so it's asked once; when it's
+// asked at all is lib/scanner-setup.js askForField.
 
 import { useState } from 'react';
 import Link from 'next/link';
@@ -14,7 +16,7 @@ import SectorPicker from './settings/SectorPicker';
 import { sectorByKey } from '../../lib/sector-directory';
 import { saveSettings } from '../../lib/settings-client';
 
-const link = { color: '#3498DB' };
+const link = { color: 'var(--sd-blue, #3498DB)' };
 // The card's own colour (3% white on the page's #0a0a1a), made solid so the
 // picks scroll behind the buttons rather than through them.
 const FOOT = '#111121';
@@ -29,8 +31,8 @@ export default function FieldStep({ onDone }) {
     setSaving('pick');
     setError(null);
     const d = await saveSettings({ sectorFocus: { sectors, strength: 'lean' }, fieldAsked: true });
-    // Saved even if the rescore it set off failed: there's no one to rescore
-    // yet, and the first scan scores everyone.
+    // Saved even if the rescore it set off failed: the map rescores a network
+    // scored with another focus when it next loads (lib/rpc.js rescoreIfStale).
     if (d.settings) { onDone(d.settings.sectorFocus.sectors); return; }
     setError(d.error);
     setSaving(null);
@@ -47,9 +49,9 @@ export default function FieldStep({ onDone }) {
 
   return (
     <section aria-labelledby="field-question" data-field-question style={{
-      margin: '8px 0 0', padding: '20px 22px 0', borderRadius: 12, border: LINE, background: 'rgba(255,255,255,0.03)',
+      margin: '8px 0 0', padding: '20px 22px 0', borderRadius: 12, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
     }}>
-      <div style={{ fontSize: 12, color: '#788', textTransform: 'uppercase', letterSpacing: 0.6 }}>Before you scan · optional</div>
+      <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #788)', textTransform: 'uppercase', letterSpacing: 0.6 }}>One question · optional</div>
       <h2 id="field-question" style={{ fontSize: 18, fontWeight: 700, margin: '6px 0 4px' }}>What field are you in?</h2>
       <Body style={{ marginTop: 0, marginBottom: 14 }}>
         Pick up to three. Companies in your field count for more when your network is scored, so the people there rank
@@ -87,8 +89,8 @@ export function FieldAnswer({ sectors }) {
   // The labels have commas of their own ("Tech, Software & AI"), so a dot separates them.
   return (
     <Status tone="ok">
-      Your field: {sectors.map((k) => sectorByKey(k).label).join(' · ')}. Your first scan is scored with it. Change it
-      anytime in <Link href="/settings#sector" style={link}>Settings</Link>.
+      Your field: {sectors.map((k) => sectorByKey(k).label).join(' · ')}. Your network is scored with it now, and
+      every scan after. Change it anytime in <Link href="/settings#sector" style={link}>Settings</Link>.
     </Status>
   );
 }

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

@@ -34,13 +34,20 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
   const what = (d) => DEGREE_IS[mode]?.[d];
   // Separation: your connections are the ways in, and all of them stay, whatever their tier.
   const waysIn = mode === 'separation';
+  // Degrees and Separation draw no one past the 2nd degree: the 3rd, the people
+  // company scans find, is on Network Circle. Its dot says so instead of "no one
+  // yet", which read as locked (Blake, 2026-10-03: "the 3rd one is locked even
+  // though … we have 3rd degrees unlocked by now").
+  const elsewhere = (d) => d === 3 && (mode === 'degrees' || mode === 'separation');
   const emptyTitle = (d, t) => (waysIn && d === 1
     ? 'Every connection stays a way in here, whatever their tier: the tiers choose who is ranked'
-    : `No ${t ? `${t}-Tier ` : 'one '}at ${DEGREE_NAMES[d]} degree yet`);
+    : elsewhere(d)
+      ? `${t ? `${t}-Tier at 3rd degree` : '3rd degree'}, the people company scans find, isn't drawn here. Network Circle shows ${t ? 'them' : 'it'}.`
+      : `No ${t ? `${t}-Tier ` : 'one '}at ${DEGREE_NAMES[d]} degree yet`);
   return (
     <div style={{ marginBottom: 18 }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
-        <div style={{ flex: 1, fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, textTransform: 'uppercase' }}>
+        <div style={{ flex: 1, fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)', letterSpacing: 1, textTransform: 'uppercase' }}>
           Tiers
         </div>
         {/* A degree, for every tier at once */}
@@ -54,7 +61,7 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
                 onClick={() => onChange(toggleDegree(grid, d, counts))}
                 style={{
                   width: dot, height: 18, padding: 0, border: 'none', background: 'none', cursor: any ? 'pointer' : 'default',
-                  fontSize: 10, fontWeight: 800, color: !any ? '#333' : on ? '#cfe6f7' : '#778',
+                  fontSize: 10, fontWeight: 800, color: !any ? 'var(--sd-fg-5, #333)' : on ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-4, #778)',
                 }}>
                 {d}
               </button>
@@ -72,16 +79,16 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
           return (
             <div key={t} style={{
               display: 'flex', alignItems: 'center', borderRadius: 8,
-              background: off ? 'rgba(255,255,255,0.02)' : `${color}14`,
+              background: off ? 'rgba(var(--sd-ink, 255, 255, 255), 0.02)' : `${color}14`,
               borderLeft: `3px solid ${off ? 'transparent' : color}`,
             }}>
               <button type="button" aria-pressed={!off} title={off ? `Show ${t}-Tier` : `Hide ${t}-Tier`}
                 onClick={() => onChange(toggleTier(grid, t, counts))}
                 style={{
                   flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', gap: 8, padding: '12px 6px 12px 10px',
-                  border: 'none', background: 'none', cursor: 'pointer', color: off ? '#555' : color, textAlign: 'left',
+                  border: 'none', background: 'none', cursor: 'pointer', color: off ? 'var(--sd-fg-5, #555)' : color, textAlign: 'left',
                 }}>
-                <span style={{ width: 11, height: 11, borderRadius: '50%', background: color, opacity: off ? 0.2 : 1, flexShrink: 0 }} />
+                <span className="sd-dot-html" style={{ width: 11, height: 11, borderRadius: '50%', background: color, opacity: off ? 0.2 : 1, flexShrink: 0 }} />
                 <span style={{ fontSize: 13.5, fontWeight: 700, whiteSpace: 'nowrap', textDecoration: off ? 'line-through' : 'none' }}>{t}-Tier</span>
               </button>
               <div style={{ display: 'flex', gap: 3 }}>
@@ -98,9 +105,9 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
                       style={{
                         width: dot, height: dot, padding: 0, borderRadius: '50%', boxSizing: 'border-box',
                         cursor: people ? 'pointer' : 'default', fontSize: 10, fontWeight: 800, lineHeight: 1,
-                        border: waysIn && d === 1 ? `1px solid ${color}40` : !people ? '1px dashed rgba(255,255,255,0.1)' : on ? `1.5px solid ${color}` : `1.5px solid ${color}70`,
+                        border: waysIn && d === 1 ? `1px solid ${color}40` : !people ? '1px dashed rgba(var(--sd-ink, 255, 255, 255), 0.1)' : on ? `1.5px solid ${color}` : `1.5px solid ${color}70`,
                         background: on ? color : waysIn && d === 1 ? `${color}1f` : 'transparent',
-                        color: waysIn && d === 1 ? `${color}90` : !people ? 'rgba(255,255,255,0.12)' : on ? '#0a0a1a' : `${color}b0`,
+                        color: waysIn && d === 1 ? `${color}90` : !people ? 'rgba(var(--sd-ink, 255, 255, 255), 0.12)' : on ? '#0a0a1a' : `${color}b0`,
                         opacity: off && people ? 0.45 : 1,
                       }}>
                       {d}
@@ -108,7 +115,7 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
                   );
                 })}
               </div>
-              <div style={{ width: 44, textAlign: 'right', paddingRight: 8, fontSize: 10.5, color: off || !n ? '#445' : '#889', fontVariantNumeric: 'tabular-nums' }}>
+              <div style={{ width: 44, textAlign: 'right', paddingRight: 8, fontSize: 10.5, color: off || !n ? 'var(--sd-fg-5, #445)' : 'var(--sd-fg-3, #889)', fontVariantNumeric: 'tabular-nums' }}>
                 {n.toLocaleString('en-US')}
               </div>
             </div>
@@ -117,17 +124,17 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
-        <div style={{ fontSize: 10, color: '#667', lineHeight: 1.4 }}>
+        <div style={{ fontSize: 10, color: 'var(--sd-fg-4, #667)', lineHeight: 1.4 }}>
           {waysIn
             ? 'Tap a tier to leave it out of the ranking. Every connection stays a way in.'
             : 'Tap a tier to hide it, or a dot to show that degree.'}
         </div>
-        <div style={{ fontSize: 10.5, color: '#889', whiteSpace: 'nowrap', marginLeft: 8 }}>
+        <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #889)', whiteSpace: 'nowrap', marginLeft: 8 }}>
           {total.toLocaleString('en-US')} showing
           {grid.hidden.length > 0 && (
             <button type="button" onClick={() => onChange(showAllTiers(grid))} style={{
               marginLeft: 8, padding: '2px 8px', borderRadius: 10, fontSize: 10, cursor: 'pointer',
-              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.05)', color: '#aab',
+              border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-3, #aab)',
             }}>All tiers</button>
           )}
         </div>
@@ -149,7 +156,7 @@ export default function FilterPanel({ collapsed, onToggle, mode, visualMode, gri
           display: 'flex', alignItems: 'center', gap: 0,
           height: 36, borderRadius: 18,
           background: 'rgba(52,152,219,0.15)', border: '2px solid rgba(52,152,219,0.5)',
-          color: '#3498DB', fontWeight: 700,
+          color: 'var(--sd-blue, #3498DB)', fontWeight: 700,
           boxShadow: '0 0 12px rgba(52,152,219,0.3)',
           backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
           overflow: 'hidden', transition: 'width 0.25s ease',
@@ -170,13 +177,13 @@ export default function FilterPanel({ collapsed, onToggle, mode, visualMode, gri
       position: 'fixed', top: 0, left: 0, bottom: 0, zIndex: 100,
       width: '100vw', pointerEvents: 'auto',
     } : { flexShrink: 0, height: '100%' }}>
-      {isMobile && <div onClick={onToggle} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.5)' }} />}
-      <div style={{
+      {isMobile && <div onClick={onToggle} style={{ position: 'absolute', inset: 0, background: 'rgba(var(--sd-shade, 0, 0, 0), 0.5)' }} />}
+      <div data-glass-panel={isMobile ? undefined : 'side'} style={{
         width: isMobile ? '80vw' : 320, minWidth: isMobile ? 0 : 320, maxWidth: isMobile ? 300 : 320, height: '100%',
         borderRight: '1px solid rgba(52,152,219,0.15)',
         padding: isMobile ? '12px 10px' : '16px 14px',
         overflowY: 'auto', overflowX: 'hidden',
-        background: isMobile ? 'rgba(10,15,30,0.98)' : 'var(--sd-panel)', fontSize: 13,
+        background: isMobile ? 'var(--sd-surface, rgba(10,15,30,0.98))' : 'var(--sd-panel)', fontSize: 13,
         backdropFilter: 'var(--sd-panel-blur)', WebkitBackdropFilter: 'var(--sd-panel-blur)',
         boxShadow: 'inset 0 0 60px rgba(52,152,219,0.04), 4px 0 24px rgba(0,0,0,0.3)',
       }}>
@@ -185,8 +192,8 @@ export default function FilterPanel({ collapsed, onToggle, mode, visualMode, gri
           onClick={onToggle}
           style={{
             display: 'flex', alignItems: 'center', gap: 6,
-            background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)',
-            borderRadius: 6, color: '#aaa', fontSize: 12, cursor: 'pointer',
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
+            borderRadius: 6, color: 'var(--sd-fg-3, #aaa)', fontSize: 12, cursor: 'pointer',
             padding: '6px 12px', marginBottom: 14, fontWeight: 600, width: '100%',
           }}
         >