six-degrees 0.6.0 → 0.7.0

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

@@ -98,6 +98,9 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
   // The slider, 0 (rarest ways in first) to 100 (easiest first); 50 is power alone.
   // The list follows a deferred copy, so the thumb never waits for a sort.
   const [at, setAt] = useState(SLIDER_MIDDLE);
+  // The map's zoom: null fits the whole map in the window (Blake, 2026-10-03: "hard
+  // to see the whole graph on the single screen ... at least have a plus and minus").
+  const [zoom, setZoom] = useState(null);
   const atSlow = useDeferredValue(at);
   const [tier, setTier] = useState('all');
   // Rarity beside the tier (lib/rarity.js): any bands switched on; none is everyone.
@@ -244,9 +247,22 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
       : summitLayout(top, cw || 800, isMobile, { cards })),
     [single, target, top, cw, isMobile, cards, rarityBy],
   );
-  const captionH = isMobile ? 58 : 28;   // fixed, so HEAD is arithmetic; the phone legend takes two lines, a computer's is the tooltip
+  const captionH = isMobile ? 58 : 36;   // fixed, so HEAD is arithmetic; the phone legend takes two lines, a computer's is the tooltip and the zoom
   const NEXT_H = nextUp.length ? 38 : 0;
-  const mapH = single ? (target ? layout.height + NEXT_H : 0) : layout.height;
+  // Fit: as big as it can be with all of it in the window, never bigger than
+  // life. A phone scrolls instead, unless you zoom.
+  const fitZoom = isMobile ? 1 : Math.max(ZOOM_MIN, Math.min(1, (box.h - captionH - 22 - (single ? NEXT_H : 0)) / Math.max(1, layout.height)));
+  // Dynamic (Blake, 2026-10-03: "it should be dynamic"): what the map shows
+  // changes — the slider moves, you aim at someone else — and it fits again,
+  // whatever zoom you'd set. A new window size re-fits on its own.
+  const viewKey = single ? `aim:${target?.key ?? ''}` : `top:${top.map((t) => t.key).join(',')}`;
+  const [zoomFor, setZoomFor] = useState(viewKey);
+  if (zoomFor !== viewKey) {
+    setZoomFor(viewKey);
+    if (zoom != null) setZoom(null);
+  }
+  const scale = zoom ?? fitZoom;
+  const mapH = single ? (target ? Math.round(layout.height * scale) + NEXT_H : 0) : Math.round(layout.height * scale);
   const mapBlockH = mapH ? captionH + mapH + 12 : 0;
   const titleH = isMobile ? 0 : TITLE_ROW;
   const HEAD = mapBlockH + titleH + LABEL_ROW;
@@ -330,16 +346,16 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
       aria-label="Search people, companies, or who knows them"
       style={{
         width: isMobile ? '100%' : 300, flexShrink: 0, minWidth: 0, height: isMobile ? 44 : 32, boxSizing: 'border-box',
-        padding: '0 12px', borderRadius: 8, outline: 'none', color: '#fff',
+        padding: '0 12px', borderRadius: 8, outline: 'none', color: 'var(--sd-fg-1, #fff)',
         fontSize: isMobile ? 16 : 13,        // under 16px, iOS zooms the page on focus
-        border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.05)',
+        border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)',
       }}
     />
   );
   // "Only show": the rarity chips, beside the tiers on a computer, on their own row on a phone.
   const rarityChips = (
     <>
-      <span title={RARITY_NOTE} style={{ fontSize: 10, color: '#666', whiteSpace: 'nowrap', flexShrink: 0, textTransform: 'uppercase', letterSpacing: 0.5, cursor: 'help' }}>Only show</span>
+      <span title={RARITY_NOTE} style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', whiteSpace: 'nowrap', flexShrink: 0, textTransform: 'uppercase', letterSpacing: 0.5, cursor: 'help' }}>Only show</span>
       {RARITY.map((r) => {
         const on = rarities.has(r.key);
         return (
@@ -347,12 +363,12 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
             title={`${r.label}: ${r.range} mutual connection${r.range === '1' ? '' : 's'}. ${RARITY_NOTE}`} style={{
               height: isMobile ? 40 : 28, padding: isMobile ? '0 10px' : '0 8px', borderRadius: 14, cursor: 'pointer', flexShrink: 0,
               fontSize: 11.5, fontWeight: 700, whiteSpace: 'nowrap',
-              border: `1px solid ${on ? r.color : 'rgba(255,255,255,0.1)'}`,
-              background: on ? `${r.color}22` : 'rgba(255,255,255,0.03)',
-              color: on ? r.color : '#999',
+              border: `1px solid ${on ? r.color : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`,
+              background: on ? `${r.color}22` : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+              color: on ? r.color : 'var(--sd-fg-3, #999)',
             }}>
             {r.label}
-            <span style={{ marginLeft: 5, fontWeight: 500, color: on ? r.color : '#666', opacity: 0.85 }}>{fmt(byRarity[r.key])}</span>
+            <span style={{ marginLeft: 5, fontWeight: 500, color: on ? r.color : 'var(--sd-fg-4, #666)', opacity: 0.85 }}>{fmt(byRarity[r.key])}</span>
           </button>
         );
       })}
@@ -362,7 +378,7 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
   return (
     <div style={{
       flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column',
-      background: 'var(--sd-page)', color: '#fff', overflow: 'hidden',
+      background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', overflow: 'hidden',
     }}>
       {/* ── Header: what this is, how many, and what it can't say ── */}
       <div style={{ padding: `${notch ? 48 : 14}px ${SIDE}px 8px`, flexShrink: 0 }}>
@@ -372,7 +388,7 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
             background: 'linear-gradient(135deg, #FFD700, #FF6B35)',
             WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
           }}>Separation</h2>
-          <span style={{ fontSize: 12, color: '#aaa', ...(isMobile ? {} : { flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }}>
+          <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #aaa)', ...(isMobile ? {} : { flex: 1, minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) }}>
             {isMobile
               ? `${plural(summary.people, 'person', 'people')} · ${fmt(summary.byTier.S)} S · ${fmt(summary.multi)} with 2+ ways`
               : `${plural(summary.people, 'person', 'people')} two steps away · ${fmt(summary.byTier.S)} S-tier · ${fmt(summary.multi)} reachable 2+ ways · through ${fmt(summary.bridges)} of your connections`}
@@ -380,18 +396,18 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
           {!isMobile && searchBox}
         </div>
         {/* The whole population at a glance: one segment per tier, to scale. */}
-        <div aria-hidden="true" style={{ display: 'flex', gap: 1, height: 6, borderRadius: 3, overflow: 'hidden', margin: '8px 0 6px', background: 'rgba(255,255,255,0.04)' }}>
+        <div aria-hidden="true" style={{ display: 'flex', gap: 1, height: 6, borderRadius: 3, overflow: 'hidden', margin: '8px 0 6px', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)' }}>
           {TIERS.filter((t) => summary.byTier[t] > 0).map((t) => (
             <div key={t} style={{ flex: summary.byTier[t], background: tierColors[t] || '#555' }} />
           ))}
         </div>
         {/* On a computer the line says it on its own; what it ranks is the title's tooltip (RANK_NOTE). */}
         {isMobile && (
-          <div style={{ fontSize: 11, color: '#777', lineHeight: 1.4 }}>Ranks reachability, not people · lists scanned so far</div>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-4, #777)', lineHeight: 1.4 }}>Ranks reachability, not people · lists scanned so far</div>
         )}
         {summary.peopleOnlyUnresolved > 0 && (
           <div style={{
-            marginTop: 8, padding: '8px 10px', borderRadius: 8, fontSize: 11.5, lineHeight: 1.5, color: '#e8d9a0',
+            marginTop: 8, padding: '8px 10px', borderRadius: 8, fontSize: 11.5, lineHeight: 1.5, color: 'var(--sd-fg-2, #e8d9a0)',
             background: 'rgba(255,215,0,0.06)', border: '1px solid rgba(255,215,0,0.25)',
           }}>
             {/* Worded without a cause on purpose: the one time this happened, the
@@ -406,12 +422,12 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
       </div>
 
       {/* ── Controls: search, then the slider with their tier and rarity ── */}
-      <div style={{ padding: `0 ${SIDE}px 10px`, flexShrink: 0, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
+      <div style={{ padding: `0 ${SIDE}px 10px`, flexShrink: 0, borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.06)' }}>
         <style>{SLIDER_CSS}</style>
         {isMobile && searchBox}
         <div style={{
           marginTop: isMobile ? 8 : 2, padding: isMobile ? '8px 10px' : '8px 14px', borderRadius: 12, position: 'relative',
-          border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.025)',
+          border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.025)',
         }}>
           {pathOpen && (
             <PathPicker facets={facets} text={pathText} onText={setPathText} isMobile={isMobile}
@@ -420,21 +436,21 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
           <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 8 : 6, flexWrap: isMobile ? 'nowrap' : 'wrap', minWidth: 0,
             // A phone scrolls this strip sideways, so the page itself never does.
             overflowX: isMobile ? 'auto' : 'visible', scrollbarWidth: 'thin' }}>
-            <span style={{ fontSize: 10, color: '#666', whiteSpace: 'nowrap', flexShrink: 0, textTransform: 'uppercase', letterSpacing: 0.5 }}>Their tier</span>
+            <span style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', whiteSpace: 'nowrap', flexShrink: 0, textTransform: 'uppercase', letterSpacing: 0.5 }}>Their tier</span>
             {['all', ...TIERS].map((t) => {
               const on = tier === t;
-              const c = t === 'all' ? '#fff' : tierColors[t] || '#888';
+              const c = t === 'all' ? 'var(--sd-fg-1, #fff)' : tierColors[t] || '#888';
               const n = t === 'all' ? summary.people : summary.byTier[t];
               return (
                 <button key={t} type="button" aria-pressed={on} onClick={() => changeTier(t)} style={{
                   height: isMobile ? 40 : 28, padding: isMobile ? '0 10px' : '0 8px', borderRadius: 14, cursor: 'pointer', flexShrink: 0,
                   fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap',
-                  border: `1px solid ${on ? c : 'rgba(255,255,255,0.1)'}`,
-                  background: on ? `${c === '#fff' ? '#ffffff' : c}22` : 'rgba(255,255,255,0.03)',
-                  color: on ? c : '#999',
+                  border: `1px solid ${on ? c : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`,
+                  background: on ? (t === 'all' ? 'rgba(var(--sd-ink, 255, 255, 255), 0.13)' : `${c}22`) : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+                  color: on ? c : 'var(--sd-fg-3, #999)',
                 }}>
                   {t === 'all' ? 'All' : t}
-                  <span style={{ marginLeft: 5, fontWeight: 500, color: on ? c : '#666', opacity: 0.85 }}>{fmt(n)}</span>
+                  <span style={{ marginLeft: 5, fontWeight: 500, color: on ? c : 'var(--sd-fg-4, #666)', opacity: 0.85 }}>{fmt(n)}</span>
                 </button>
               );
             })}
@@ -446,7 +462,7 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
                   padding: path ? '0 6px 0 12px' : '0 12px', border: 'none', background: 'none', cursor: 'pointer',
                   fontSize: 12, fontWeight: 700, whiteSpace: 'nowrap', color: PATH, maxWidth: isMobile ? 200 : 300, overflow: 'hidden', textOverflow: 'ellipsis',
                 }}>
-                {path ? <>Path<span style={{ fontWeight: 500, color: '#cfe' }}> · {path.label}</span></> : 'Path ▾'}
+                {path ? <>Path<span style={{ fontWeight: 500, color: 'var(--sd-fg-1, #cfe)' }}> · {path.label}</span></> : 'Path ▾'}
               </button>
               {path && (
                 <button type="button" aria-label={`Clear the path: ${path.label}`} onClick={() => pickPath(null)} style={{
@@ -455,7 +471,7 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
               )}
             </span>
             {!isMobile && <>
-              <span aria-hidden="true" style={{ width: 1, height: 18, background: 'rgba(255,255,255,0.12)', margin: '0 2px' }} />
+              <span aria-hidden="true" style={{ width: 1, height: 18, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.12)', margin: '0 2px' }} />
               {rarityChips}
             </>}
             {isMobile && pillEl}
@@ -464,9 +480,9 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
           {/* The slider: the rarest ways in at one end, the easiest at the other, power alone in the middle */}
           {/* On a computer the pill saying where the slider is sits over its middle, in place of "Power" */}
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: isMobile ? 'baseline' : 'center', marginTop: 8, fontSize: 10.5, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>
-            <span style={{ color: RARE, flex: isMobile ? undefined : 1 }}>Rare{isMobile ? '' : ' · one way in'}</span>
-            {isMobile ? <span style={{ color: '#FFD700' }}>Power</span> : pillEl}
-            <span style={{ color: EASY, flex: isMobile ? undefined : 1, textAlign: 'right' }}>Easy{isMobile ? '' : ' · many mutual connections'}</span>
+            <span style={{ color: 'var(--sd-cyan, #00E5FF)', flex: isMobile ? undefined : 1 }}>Rare{isMobile ? '' : ' · one way in'}</span>
+            {isMobile ? <span style={{ color: 'var(--sd-gold, #FFD700)' }}>Power</span> : pillEl}
+            <span style={{ color: 'var(--sd-coral, #FF7043)', flex: isMobile ? undefined : 1, textAlign: 'right' }}>Easy{isMobile ? '' : ' · many mutual connections'}</span>
           </div>
           <input
             className="sepslide" type="range" min={0} max={100} step={1} value={at}
@@ -480,13 +496,13 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
             {[[0, 'Rarest'], [25, ''], [SLIDER_MIDDLE, 'By power'], [75, ''], [100, 'Easiest']].map(([v, name]) => (
               <button key={v} type="button" onClick={() => changeAt(v)} aria-label={`Set the slider to ${v}${name ? `: ${name}` : ''}`} style={{
                 padding: '2px 4px', border: 'none', background: 'none', cursor: 'pointer', fontSize: 10,
-                color: at === v ? '#fff' : '#667', fontWeight: at === v ? 700 : 500, fontVariantNumeric: 'tabular-nums',
+                color: at === v ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-4, #667)', fontWeight: at === v ? 700 : 500, fontVariantNumeric: 'tabular-nums',
               }}>{v}{name && !isMobile ? ` · ${name}` : ''}</button>
             ))}
           </div>
           {/* On a phone: the sentence, and the rarity chips on a row of their own */}
           {isMobile && <>
-            <div style={{ marginTop: 4, fontSize: 11.5, lineHeight: 1.45, color: '#bbb' }}>
+            <div style={{ marginTop: 4, fontSize: 11.5, lineHeight: 1.45, color: 'var(--sd-fg-2, #bbb)' }}>
               <span style={{ color: slideColor, fontWeight: 700 }}>{slide.name}.</span>{' '}{slide.detail}
             </div>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, minWidth: 0, flexWrap: 'nowrap',
@@ -505,25 +521,30 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
       >
         <div style={{ position: 'relative', maxWidth: 980, margin: '0 auto', height: total }}>
           {mapBlockH > 0 && (
-            <div style={{ height: mapBlockH, boxSizing: 'border-box', paddingTop: 10 }}>
-              <div style={{ height: captionH - 10, overflow: 'hidden' }}>
+            <div className="sepblock" style={{ height: mapBlockH, boxSizing: 'border-box', paddingTop: 10 }}>
+              <div style={{ height: captionH - 10, overflow: 'hidden', display: isMobile ? 'block' : 'flex', alignItems: 'flex-start', gap: 10 }}>
                 <div title={isMobile ? undefined : `${!single && askedShown > 0 ? `${fmt(askedShown)} asked or connected, so it moved on. ` : ''}Solid orange: the top-scored bridge. Dashed: other routes.${single ? ' Pick anyone in the list to aim at them instead.' : cards ? ' A lit pill is someone’s best way in.' : ' Dot size: ways in.'}`}
-                  style={{ fontSize: 12, fontWeight: 700, color: '#ddd', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                  style={{ flex: 1, minWidth: 0, fontSize: 12, fontWeight: 700, color: 'var(--sd-fg-1, #ddd)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                   {single
                     ? <>Aiming at {target.person.name} · {layout.unscanned
                       ? `${fmt(target.waysIn + layout.unscanned)} mutual connections: ${fmt(target.waysIn)} drawn, ${fmt(layout.unscanned)} in circles not scanned yet`
                       : target.waysIn === 1 ? 'the one connection of yours who leads to them' : `all ${fmt(target.waysIn)} connections of yours who lead to them`}</>
                     : <>Top {fmt(top.length)} you haven’t asked, of {fmt(visible.length)}{filtered ? ' shown' : ''}{at !== SLIDER_MIDDLE ? ` · ${slide.name.toLowerCase()}` : ''} · every way in drawn</>}
                 </div>
-                {isMobile && <div style={{ fontSize: 10, color: '#777', marginTop: 2, whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: 1.35 }}>
-                  {!single && askedShown > 0 && <span style={{ color: '#FFD700' }}>{fmt(askedShown)} asked or connected, so it moved on · </span>}
-                  <span style={{ color: ORANGE }}>solid orange</span> = top-scored bridge · dashed = other routes
+                {!isMobile && <ZoomControl scale={scale} fitted={zoom == null}
+                  onOut={() => setZoom(Math.max(ZOOM_MIN, Math.round((scale - 0.1) * 10) / 10))}
+                  onFit={() => setZoom(null)}
+                  onIn={() => setZoom(Math.min(ZOOM_MAX, Math.round((scale + 0.1) * 10) / 10))} />}
+                {isMobile && <div style={{ fontSize: 10, color: 'var(--sd-fg-4, #777)', marginTop: 2, whiteSpace: 'normal', overflow: 'hidden', textOverflow: 'ellipsis', lineHeight: 1.35 }}>
+                  {!single && askedShown > 0 && <span style={{ color: 'var(--sd-gold, #FFD700)' }}>{fmt(askedShown)} asked or connected, so it moved on · </span>}
+                  <span style={{ color: 'var(--sd-orange, #FF6B35)' }}>solid orange</span> = top-scored bridge · dashed = other routes
                   {single ? ' · pick anyone in the list to aim at them instead' : cards ? ' · a lit pill is someone’s best way in' : ' · dot size = ways in'}
                 </div>}
               </div>
               {cw > 0 && (
                 <SummitMap
                   layout={layout}
+                  scale={scale}
                   selectedKey={selectedKey}
                   tierColors={tierColors}
                   youLabel={youLabel}
@@ -540,17 +561,17 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
                 <>
                   {nextUp.length > 0 && (
                     <div style={{ height: NEXT_H, display: 'flex', alignItems: 'center', gap: 6, overflow: 'hidden' }}>
-                      <span style={{ fontSize: 10, color: '#666', textTransform: 'uppercase', letterSpacing: 0.5, flexShrink: 0 }}>Next</span>
+                      <span style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', textTransform: 'uppercase', letterSpacing: 0.5, flexShrink: 0 }}>Next</span>
                       {nextUp.map((p) => (
                         <button key={p.key} type="button" onClick={() => onPick(p)} title={`Aim at ${p.person.name}`} style={{
                           height: 26, padding: '0 10px', borderRadius: 13, cursor: 'pointer', flexShrink: 1, minWidth: 0,
                           fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
-                          border: `1px solid ${(tierColors[p.tier] || '#888')}55`, background: 'rgba(255,255,255,0.03)', color: '#ccc',
+                          border: `1px solid ${(tierColors[p.tier] || '#888')}55`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', color: 'var(--sd-fg-2, #ccc)',
                         }}>
                           {shortName(p.person.name)}
                           <span style={{ marginLeft: 5, color: tierColors[p.tier] || '#888', fontWeight: 700 }}>{p.score.toFixed(1)}</span>
                           {/* The count they're ordered by: every mutual, scanned or not */}
-                          <span style={{ marginLeft: 5, color: '#667', fontWeight: 500 }}>
+                          <span style={{ marginLeft: 5, color: 'var(--sd-fg-4, #667)', fontWeight: 500 }}>
                             {(() => { const n = Math.max(rarityBy.get(p.key)?.count || 0, p.waysIn); return n === 1 ? '1 mutual' : `${fmt(n)} mutuals`; })()}
                           </span>
                         </button>
@@ -565,13 +586,13 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
           {visible.length > 0 && !isMobile && (
             <div style={{
               height: TITLE_ROW, display: 'flex', alignItems: 'center', gap: 10, padding: '0 12px 0 15px', boxSizing: 'border-box',
-              borderTop: '1px solid rgba(255,255,255,0.06)',
+              borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.06)',
             }}>
               <span style={{ fontSize: 15, fontWeight: 800 }}>Ranked by reach</span>
               <span style={{ fontSize: 11, fontWeight: 800, color: '#000', background: '#FFD700', borderRadius: 10, padding: '2px 8px' }}>
                 {fmt(visible.length)}{filtered ? ` of ${fmt(summary.people)}` : ''}
               </span>
-              <span style={{ marginLeft: 'auto', fontSize: 11, color: '#777' }}>
+              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--sd-fg-4, #777)' }}>
                 order follows the slider · <span style={{ color: slideColor }}>{slide.name.toLowerCase()}</span>
               </span>
             </div>
@@ -580,8 +601,8 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
             <div style={{
               height: LABEL_ROW, display: 'grid', alignItems: 'center', gap: 10, padding: '0 12px 0 15px',
               gridTemplateColumns: isMobile ? '44px 36px 1fr 44px' : COLUMNS,
-              fontSize: 9, fontWeight: 700, color: '#555', textTransform: 'uppercase', letterSpacing: 0.5,
-              borderBottom: '1px solid rgba(255,255,255,0.08)', boxSizing: 'border-box',
+              fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)', textTransform: 'uppercase', letterSpacing: 0.5,
+              borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', boxSizing: 'border-box',
             }}>
               <span title="Rank by score, then ways in. = means tied">#</span>
               <span />
@@ -607,14 +628,14 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
           ))}
 
           {visible.length === 0 && (
-            <div style={{ position: 'absolute', top: 40, left: 0, right: 0, textAlign: 'center', color: '#888', fontSize: 13, padding: '0 16px' }}>
+            <div style={{ position: 'absolute', top: 40, left: 0, right: 0, textAlign: 'center', color: 'var(--sd-fg-3, #888)', fontSize: 13, padding: '0 16px' }}>
               {q
                 ? <>No one matches ‘{query.trim()}’. Search covers names, headlines, companies and who knows them.</>
                 : <>No one here with those filters.</>}
               <div style={{ marginTop: 12 }}>
                 <button type="button" onClick={clearAll} style={{
                   padding: '8px 16px', borderRadius: 8, cursor: 'pointer', fontSize: 12, fontWeight: 700,
-                  border: '1px solid rgba(255,255,255,0.15)', background: 'rgba(255,255,255,0.06)', color: '#fff',
+                  border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.15)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', color: 'var(--sd-fg-1, #fff)',
                 }}>Clear</button>
               </div>
             </div>
@@ -625,6 +646,41 @@ export default function SeparationView({ connections = [], degree2 = [], fullDeg
   );
 }
 
+// ── Zoom ───────────────────────────────────────────────────────────────────
+// Low enough that even aiming at someone with dozens of ways in fits the window
+// whole: the layout stays as it is, only smaller (Blake, 2026-10-03: "it should
+// just be more zoomed out").
+const ZOOM_MIN = 0.15;
+const ZOOM_MAX = 1.5;
+
+/** − | Fit | +, one segmented control as a Mac draws one. The middle says the zoom once you've changed it. */
+function ZoomControl({ scale, fitted, onOut, onFit, onIn }) {
+  const seg = (extra = {}) => ({
+    height: 22, minWidth: 26, padding: '0 7px', border: 'none', background: 'none', color: 'var(--sd-fg-2, #c9cdd6)',
+    fontSize: 12, fontWeight: 600, lineHeight: 1, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+    ...extra,
+  });
+  const line = { width: 1, alignSelf: 'stretch', margin: '4px 0', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.14)' };
+  return (
+    <div role="group" aria-label="Zoom the map" style={{
+      display: 'inline-flex', alignItems: 'center', flexShrink: 0, borderRadius: 7, overflow: 'hidden',
+      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.13)',
+      boxShadow: '0 1px 0 rgba(var(--sd-ink, 255, 255, 255), 0.05) inset, 0 1px 2px rgba(0,0,0,0.35)',
+    }}>
+      <button type="button" onClick={onOut} disabled={scale <= ZOOM_MIN + 0.001} title="Zoom out" aria-label="Zoom out"
+        style={seg({ fontSize: 15, opacity: scale <= ZOOM_MIN + 0.001 ? 0.35 : 1 })}>−</button>
+      <span style={line} />
+      <button type="button" onClick={onFit} title={fitted ? 'The whole map fits the window' : 'Fit the whole map in the window'}
+        style={seg({ minWidth: 44, fontSize: 11, fontVariantNumeric: 'tabular-nums', color: fitted ? 'var(--sd-fg-3, #8f96a3)' : 'var(--sd-fg-1, #e6e9ef)' })}>
+        {fitted ? 'Fit' : `${Math.round(scale * 100)}%`}
+      </button>
+      <span style={line} />
+      <button type="button" onClick={onIn} disabled={scale >= ZOOM_MAX - 0.001} title="Zoom in" aria-label="Zoom in"
+        style={seg({ fontSize: 15, opacity: scale >= ZOOM_MAX - 0.001 ? 0.35 : 1 })}>+</button>
+    </div>
+  );
+}
+
 // ── The summit map ─────────────────────────────────────────────────────────
 // A plain React <svg>: no d3, no canvas, no zoom — at most about 150 elements
 // whatever the network's size. Hover is pure CSS from the scoped <style>, so a
@@ -644,9 +700,13 @@ const MAP_CSS = `
 .sepmap .mv { transition: transform ${MOVE}; }
 .sepmap .rt, .sepmap .spk { transition: d ${MOVE}, stroke-opacity .12s; }
 .sepmap .in { animation: sepIn .3s ease-out both; }
+/* The zoom glides too, and the list under the map with it. */
+.sepmap { transition: width ${MOVE}, height ${MOVE}; }
+.sepblock { transition: height ${MOVE}; }
+.seprow { transition: top ${MOVE}; }
 @keyframes sepIn { from { opacity: 0; } to { opacity: 1; } }
 @media (prefers-reduced-motion: reduce) {
-  .sepmap .mv, .sepmap .rt, .sepmap .spk { transition: none; }
+  .sepmap .mv, .sepmap .rt, .sepmap .spk, .sepmap, .sepblock, .seprow { transition: none; }
   .sepmap .in { animation: none; }
 }
 `;
@@ -666,7 +726,7 @@ function waysTag(p, mutuals) {
   return p.waysIn === 1 ? { text: 'only way in', rare: true, more: 0 } : { text: `${fmt(p.waysIn)} ways in`, rare: false, more: 0 };
 }
 
-const SummitMap = memo(function SummitMap({ layout, selectedKey, tierColors, youLabel, isMobile, onPick, onPickBridge, mutualsBy, doors = false, cards = false }) {
+const SummitMap = memo(function SummitMap({ layout, scale = 1, selectedKey, tierColors, youLabel, isMobile, onPick, onPickBridge, mutualsBy, doors = false, cards = false }) {
   const { width, height, you, people, bridges, links, spokes, ghosts = [], unscanned = 0, ghostLabel = null, drawn = 1 } = layout;
   const linksBy = useMemo(() => {
     const m = new Map();
@@ -677,7 +737,10 @@ const SummitMap = memo(function SummitMap({ layout, selectedKey, tierColors, you
   const fs = isMobile ? 12 : 11;
 
   return (
-    <svg className="sepmap" width={width} height={height} aria-hidden="true" style={{ display: 'block', overflow: 'visible' }}>
+    // Drawn at its own size and scaled whole by the viewBox, so zooming never
+    // lays it out again and everything stays sharp.
+    <svg className="sepmap" width={Math.round(width * scale)} height={Math.round(height * scale)} viewBox={`0 0 ${width} ${height}`} aria-hidden="true"
+      style={{ display: 'block', overflow: 'visible', margin: '0 auto', width: Math.round(width * scale), height: Math.round(height * scale) }}>
       <style>{MAP_CSS}</style>
       <defs>
         <linearGradient id="sepYouGrad" x1="0" y1="0" x2="1" y2="1">
@@ -709,7 +772,7 @@ const SummitMap = memo(function SummitMap({ layout, selectedKey, tierColors, you
           })}
           {ghosts.map((g, i) => <circle key={`gd-${i}`} cx={g.x} cy={g.y} r={3.3} fill="#4a4f68" stroke="#6b7090" strokeWidth={0.6} strokeOpacity={0.6} />)}
           {ghostLabel && (
-            <text x={ghostLabel.x} y={ghostLabel.y} fontSize={10.5} fontWeight={700} fill="#8a8fa8" style={HALO}>
+            <text x={ghostLabel.x} y={ghostLabel.y} fontSize={10.5} fontWeight={700} fill="var(--sd-fg-3, #8a8fa8)" style={HALO}>
               {`+${fmt(unscanned)} more mutual${unscanned === 1 ? '' : 's'}, in circles not scanned yet`}
               {unscanned > ghosts.length ? ` (${fmt(ghosts.length)} shown)` : ''}
             </text>
@@ -771,12 +834,12 @@ const SummitMap = memo(function SummitMap({ layout, selectedKey, tierColors, you
                   <>
                     <circle r={pp.r} fill="var(--sd-bg)" stroke={c} strokeWidth={3} strokeOpacity={0.35 + 0.65 * drawn} />
                     <text dy="0.35em" textAnchor="middle" fontSize={11} fontWeight={800} fill={c}>{initialsFor(p.person.name)}</text>
-                    <text x={lx} y={-20} fontSize={fs + 3} fontWeight={800} fill="#fff" style={HALO}>{clip(p.person.name)}</text>
-                    <text x={lx} y={-4} fontSize={fs} fill="#aaa" style={HALO}>{clip(subline(p.person))}</text>
+                    <text x={lx} y={-20} fontSize={fs + 3} fontWeight={800} fill="var(--sd-fg-1, #fff)" style={HALO}>{clip(p.person.name)}</text>
+                    <text x={lx} y={-4} fontSize={fs} fill="var(--sd-fg-3, #aaa)" style={HALO}>{clip(subline(p.person))}</text>
                     <text x={lx} y={13} fontSize={fs} fontWeight={700} fill={c} style={HALO}>
                       #{p.rank}{p.tied ? '=' : ''} · {p.tier}-tier · {p.score.toFixed(1)}
                     </text>
-                    <text x={lx} y={29} fontSize={fs} fill="#ccc" style={HALO}>
+                    <text x={lx} y={29} fontSize={fs} fill="var(--sd-fg-2, #ccc)" style={HALO}>
                       {clip(tag.more
                         ? `${fmt(tag.more)} mutual connections · ${fmt(p.waysIn)} drawn here`
                         : p.waysIn === 1 ? '1 mutual connection: the only way in' : `${fmt(p.waysIn)} mutual connections, all drawn`)}
@@ -790,13 +853,13 @@ const SummitMap = memo(function SummitMap({ layout, selectedKey, tierColors, you
                 ) : (
                   <>
                     {sel && <circle r={pp.r + 3.5} fill="none" stroke="#fff" strokeWidth={1.5} />}
-                    <circle r={pp.r} fill={c} />
-                    <text x={14} dy="0.35em" fontSize={fs} fill="#ddd" style={HALO}>
+                    <circle className="sd-dot" r={pp.r} fill={c} />
+                    <text x={14} dy="0.35em" fontSize={fs} fill="var(--sd-fg-1, #ddd)" style={HALO}>
                       {pp.label}
                       <tspan dx={6} fill={c} fontWeight={700}>{p.score.toFixed(1)}</tspan>
                       {/* How many mutual connections lead to them: one is the rare kind */}
                       {doors && (
-                        <tspan dx={8} fontSize={fs - 2} fontWeight={700} fill={tag.rare ? RARE : '#778'}>{tag.text}</tspan>
+                        <tspan dx={8} fontSize={fs - 2} fontWeight={700} fill={tag.rare ? 'var(--sd-cyan, #00E5FF)' : 'var(--sd-fg-4, #778)'}>{tag.text}</tspan>
                       )}
                     </text>
                   </>
@@ -820,10 +883,10 @@ const SummitMap = memo(function SummitMap({ layout, selectedKey, tierColors, you
               : `${b.bridge.name} · ${b.bridge.tier}-tier${b.count > 1 ? ` · a way in to ${b.count} of these` : ''} · click to open`}</title>
             <g className="mv in" style={at(b.x, b.y)}>
               {cards ? <Pill b={b} c={c} big={people.length === 1 && people[0].big} /> : (<>
-              <circle
+              <circle className="sd-dot"
                 r={b.r}
                 fill={b.unresolved ? 'none' : c}
-                stroke={b.unresolved ? '#777' : 'var(--sd-bg)'}
+                stroke={b.unresolved ? 'var(--sd-fg-4, #777)' : 'var(--sd-bg)'}
                 strokeWidth={b.unresolved ? 1 : 1.5}
                 strokeDasharray={b.unresolved ? '2 2' : undefined}
               />
@@ -860,8 +923,8 @@ function Pill({ b, c, big }) {
   if (b.unresolved) {
     return (
       <g>
-        <rect x={-PILL_W} y={-14} width={PILL_W} height={28} rx={14} fill="#11132a" stroke="#555" strokeDasharray="3 3" />
-        <text x={-PILL_W + 14} dy="0.35em" fontSize={11.5} fontStyle="italic" fill="#888">{clipText(b.label, 30)}</text>
+        <rect x={-PILL_W} y={-14} width={PILL_W} height={28} rx={14} fill="var(--sd-card, #11132a)" stroke="#555" strokeDasharray="3 3" />
+        <text x={-PILL_W + 14} dy="0.35em" fontSize={11.5} fontStyle="italic" fill="var(--sd-fg-3, #888)">{clipText(b.label, 30)}</text>
       </g>
     );
   }
@@ -874,11 +937,11 @@ function Pill({ b, c, big }) {
   const tw = chipW(tag);
   return (
     <g>
-      <rect x={-PILL_W} y={-14} width={PILL_W} height={28} rx={14} fill="#14172e"
-        stroke={hot ? 'rgba(255,215,0,0.55)' : 'rgba(255,255,255,0.09)'} strokeWidth={hot ? 1.3 : 1} />
-      <circle cx={-PILL_W + 15} r={10} fill={c} />
+      <rect x={-PILL_W} y={-14} width={PILL_W} height={28} rx={14} fill="var(--sd-card, #14172e)"
+        stroke={hot ? 'rgba(255,215,0,0.55)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.09)'} strokeWidth={hot ? 1.3 : 1} />
+      <circle className="sd-dot" cx={-PILL_W + 15} r={10} fill={c} />
       <text x={-PILL_W + 15} dy="0.35em" textAnchor="middle" fontSize={8} fontWeight={800} fill="#000">{initialsFor(b.bridge.name)}</text>
-      <text x={-PILL_W + 31} dy="0.35em" fontSize={12} fontWeight={600} fill="#e8e8f0">
+      <text x={-PILL_W + 31} dy="0.35em" fontSize={12} fontWeight={600} fill="var(--sd-fg-1, #e8e8f0)">
         {clipText(b.bridge.name, Math.max(6, Math.floor((PILL_W - 31 - tw - 10) / 6.4)))}
       </text>
       <rect x={-tw - 7} y={-9} width={tw} height={18} rx={9} fill={`${c}22`} />
@@ -892,14 +955,14 @@ function SmallCard({ p, c, tag, width, sel }) {
   const tw = chipW(tag.text);
   return (
     <g>
-      <rect x={0} y={-20} width={width} height={40} rx={10} fill="#151830" stroke={sel ? '#fff' : 'rgba(255,255,255,0.09)'} strokeWidth={sel ? 1.5 : 1} />
-      <text x={12} dy="0.35em" fontSize={11} fontWeight={800} fill="#FFD700">#{p.rank}{p.tied ? '=' : ''}</text>
-      <text x={60} y={-3} fontSize={13} fontWeight={700} fill="#fff">{clipText(p.person.name, Math.floor((width - 60 - 70) / 7))}</text>
-      <text x={60} y={12} fontSize={10.5} fill="#8a8fa8">{clipText(subline(p.person), Math.floor((width - 60 - tw - 20) / 5.6))}</text>
+      <rect x={0} y={-20} width={width} height={40} rx={10} fill="var(--sd-card, #151830)" stroke={sel ? 'var(--sd-fg-1, #fff)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.09)'} strokeWidth={sel ? 1.5 : 1} />
+      <text x={12} dy="0.35em" fontSize={11} fontWeight={800} fill="var(--sd-gold, #FFD700)">#{p.rank}{p.tied ? '=' : ''}</text>
+      <text x={60} y={-3} fontSize={13} fontWeight={700} fill="var(--sd-fg-1, #fff)">{clipText(p.person.name, Math.floor((width - 60 - 70) / 7))}</text>
+      <text x={60} y={12} fontSize={10.5} fill="var(--sd-fg-3, #8a8fa8)">{clipText(subline(p.person), Math.floor((width - 60 - tw - 20) / 5.6))}</text>
       <text x={width - 12} y={-2} textAnchor="end" fontSize={14} fontWeight={800} fill={c}>{p.score.toFixed(1)}</text>
       <rect x={width - 12 - tw} y={4} width={tw} height={14} rx={7}
-        fill={tag.rare ? 'rgba(0,229,255,0.1)' : 'rgba(255,255,255,0.06)'} stroke={tag.rare ? 'rgba(0,229,255,0.35)' : 'rgba(255,255,255,0.14)'} />
-      <text x={width - 12 - tw / 2} y={11} dy="0.35em" textAnchor="middle" fontSize={9.5} fontWeight={800} fill={tag.rare ? RARE : '#cfd3e6'}>{tag.text}</text>
+        fill={tag.rare ? 'rgba(0,229,255,0.1)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'} stroke={tag.rare ? 'rgba(0,229,255,0.35)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.14)'} />
+      <text x={width - 12 - tw / 2} y={11} dy="0.35em" textAnchor="middle" fontSize={9.5} fontWeight={800} fill={tag.rare ? 'var(--sd-cyan, #00E5FF)' : 'var(--sd-fg-2, #cfd3e6)'}>{tag.text}</text>
     </g>
   );
 }
@@ -915,16 +978,16 @@ function BigCard({ p, c, tag, width, fs }) {
   const room = Math.floor((width - tx - 14) / 6.6);
   return (
     <g>
-      <rect x={0} y={-76} width={width} height={152} rx={16} fill="#151830" stroke="rgba(255,215,0,0.45)" />
+      <rect x={0} y={-76} width={width} height={152} rx={16} fill="var(--sd-card, #151830)" stroke="rgba(255,215,0,0.45)" />
       <circle cx={48} r={32} fill="var(--sd-bg)" stroke={c} strokeWidth={3} />
       <text x={48} dy="0.35em" textAnchor="middle" fontSize={18} fontWeight={800} fill={c}>{initialsFor(p.person.name)}</text>
-      <text x={tx} y={-40} fontSize={11} fontWeight={800} fill="#FFD700">#{p.rank}{p.tied ? '=' : ''} · {p.tier}-tier · {p.score.toFixed(1)}</text>
-      <text x={tx} y={-17} fontSize={fs + 8} fontWeight={800} fill="#fff">{clipText(p.person.name, Math.floor(room * 0.72))}</text>
-      <text x={tx} y={1} fontSize={12} fill="#8a8fa8">{clipText(subline(p.person), room)}</text>
+      <text x={tx} y={-40} fontSize={11} fontWeight={800} fill="var(--sd-gold, #FFD700)">#{p.rank}{p.tied ? '=' : ''} · {p.tier}-tier · {p.score.toFixed(1)}</text>
+      <text x={tx} y={-17} fontSize={fs + 8} fontWeight={800} fill="var(--sd-fg-1, #fff)">{clipText(p.person.name, Math.floor(room * 0.72))}</text>
+      <text x={tx} y={1} fontSize={12} fill="var(--sd-fg-3, #8a8fa8)">{clipText(subline(p.person), room)}</text>
       <rect x={tx} y={12} width={w1} height={20} rx={10} fill="rgba(255,112,67,0.12)" stroke="rgba(255,112,67,0.4)" />
       <text x={tx + w1 / 2} y={22} dy="0.35em" textAnchor="middle" fontSize={10.5} fontWeight={800} fill={EASY}>{first}</text>
-      <rect x={tx + w1 + 6} y={12} width={w2} height={20} rx={10} fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.14)" />
-      <text x={tx + w1 + 6 + w2 / 2} y={22} dy="0.35em" textAnchor="middle" fontSize={10.5} fontWeight={800} fill="#cfd3e6">{second}</text>
+      <rect x={tx + w1 + 6} y={12} width={w2} height={20} rx={10} fill="rgba(var(--sd-ink, 255, 255, 255), 0.06)" stroke="rgba(var(--sd-ink, 255, 255, 255), 0.14)" />
+      <text x={tx + w1 + 6 + w2 / 2} y={22} dy="0.35em" textAnchor="middle" fontSize={10.5} fontWeight={800} fill="var(--sd-fg-2, #cfd3e6)">{second}</text>
       <text x={tx} y={50} fontSize={10.5} fill="#6b7090">
         {tag.more ? `The ${fmt(tag.more)} is LinkedIn’s count. The other ${fmt(tag.more - p.waysIn)}` : named === 1 ? 'Only one of your connections knows them.' : `${fmt(named)} of your connections know them.`}
       </text>
@@ -944,19 +1007,19 @@ const ellipsis = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'no
 function Via({ p, route, tierColors, compact }) {
   if (!compact) return <WayIn p={p} route={route} tierColors={tierColors} />;
   if (!route?.bridge) {
-    return <span style={{ ...ellipsis, color: '#777', fontStyle: 'italic', fontSize: compact ? 11 : 12 }}>via {CANT_NAME}</span>;
+    return <span style={{ ...ellipsis, color: 'var(--sd-fg-4, #777)', fontStyle: 'italic', fontSize: compact ? 11 : 12 }}>via {CANT_NAME}</span>;
   }
   const b = route.bridge;
   const extra = p.waysIn - 1;
   return (
     <span style={{ display: 'flex', alignItems: 'center', gap: 5, minWidth: 0, fontSize: compact ? 11 : 12 }}>
-      <span style={{ color: '#666', flexShrink: 0 }}>via</span>
+      <span style={{ color: 'var(--sd-fg-4, #666)', flexShrink: 0 }}>via</span>
       {!compact && <Avatar person={b} size={16} tierColors={tierColors} />}
       <span style={{ ...ellipsis, color: tierColors[b.tier] || '#aaa', fontWeight: 600, minWidth: 0 }}>{compact ? shortName(b.name) : b.name}</span>
       {extra > 0 && (
         <span title={`Every way in:\n${everyRoute(p)}`} style={{
           flexShrink: 0, padding: '1px 6px', borderRadius: 8, fontSize: 10, fontWeight: 800,
-          color: ORANGE, background: 'rgba(255,107,53,0.15)',
+          color: 'var(--sd-orange, #FF6B35)', background: 'rgba(255,107,53,0.15)',
         }}>+{extra}</span>
       )}
     </span>
@@ -971,10 +1034,10 @@ function WayIn({ p, route, tierColors }) {
     <span style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`Every way in:\n${everyRoute(p)}`}>
       {b ? <Avatar person={b} size={26} tierColors={tierColors} /> : <span style={{ width: 26, height: 26, borderRadius: '50%', border: '1px dashed #666', flexShrink: 0 }} />}
       <span style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
-        <span style={{ ...ellipsis, fontSize: 13, fontWeight: 700, color: b ? tierColors[b.tier] || '#ddd' : '#777', fontStyle: b ? 'normal' : 'italic' }}>
+        <span style={{ ...ellipsis, fontSize: 13, fontWeight: 700, color: b ? tierColors[b.tier] || 'var(--sd-fg-1, #ddd)' : 'var(--sd-fg-4, #777)', fontStyle: b ? 'normal' : 'italic' }}>
           {b ? b.name : CANT_NAME}
         </span>
-        <span style={{ ...ellipsis, fontSize: 10.5, marginTop: 1, color: extra > 0 ? '#99a' : RARE, fontWeight: extra > 0 ? 500 : 700 }}>
+        <span style={{ ...ellipsis, fontSize: 10.5, marginTop: 1, color: extra > 0 ? 'var(--sd-fg-3, #99a)' : RARE, fontWeight: extra > 0 ? 500 : 700 }}>
           {extra > 0 ? `+${extra} more way${extra > 1 ? 's' : ''} in` : 'only way in'}
         </span>
       </span>
@@ -991,7 +1054,7 @@ function RarityBar({ p, rarity }) {
   return (
     <span style={{ display: 'flex', flexDirection: 'column', gap: 5, minWidth: 0 }}
       title={`${rarity.count} mutual connection${rarity.count === 1 ? '' : 's'}${rarity.from === 'scans' ? ' (from your scans, so it can only go up)' : ' (LinkedIn’s count)'}. ${RARITY_NOTE}`}>
-      <span style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.07)', overflow: 'hidden' }}>
+      <span style={{ height: 6, borderRadius: 3, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)', overflow: 'hidden' }}>
         <span style={{ display: 'block', height: '100%', width: `${fill * 100}%`, borderRadius: 3, background: info.color }} />
       </span>
       <span style={{ ...ellipsis, fontSize: 10.5, fontWeight: 700, color: info.color }}>
@@ -1008,12 +1071,12 @@ function Tags({ status, rarity }) {
     <>
       {status === 'asked' && (
         <span title="You sent a request. It shows everywhere in the app." style={{
-          flexShrink: 0, fontSize: 9, fontWeight: 800, color: '#FFD700', border: '1px dashed rgba(255,215,0,0.6)', borderRadius: 4, padding: '0 4px',
+          flexShrink: 0, fontSize: 9, fontWeight: 800, color: 'var(--sd-gold, #FFD700)', border: '1px dashed rgba(255,215,0,0.6)', borderRadius: 4, padding: '0 4px',
         }}>Request sent</span>
       )}
       {status === 'connected' && (
         <span title="Already one of your connections" style={{
-          flexShrink: 0, fontSize: 9, fontWeight: 800, color: '#00ff88', border: '1px solid rgba(0,255,136,0.5)', borderRadius: 4, padding: '0 4px',
+          flexShrink: 0, fontSize: 9, fontWeight: 800, color: 'var(--sd-green, #00ff88)', border: '1px solid rgba(0,255,136,0.5)', borderRadius: 4, padding: '0 4px',
         }}>Connected</span>
       )}
       {info && status !== 'connected' && (
@@ -1039,21 +1102,21 @@ function PathPicker({ facets, text, onText, onPick, onClose, isMobile }) {
       else if (companies.length === 1 && !sectors.length) onPick({ kind: 'company', key: companies[0].name, label: companies[0].name });
     }
   };
-  const sub = { fontSize: 9, fontWeight: 700, color: '#667', letterSpacing: 1, textTransform: 'uppercase', margin: '10px 0 6px' };
+  const sub = { fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-4, #667)', letterSpacing: 1, textTransform: 'uppercase', margin: '10px 0 6px' };
   return (
     <>
       <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />
       <div role="dialog" aria-label="Pick a sector or a company" style={{
         position: 'absolute', zIndex: 41, top: isMobile ? 52 : 44, left: isMobile ? 6 : 14, width: isMobile ? 'calc(100% - 12px)' : 'min(560px, calc(100% - 28px))',
         maxHeight: 340, overflowY: 'auto', boxSizing: 'border-box', padding: 12, borderRadius: 12,
-        background: '#0c101e', border: `1px solid ${PATH}55`, boxShadow: '0 12px 40px rgba(0,0,0,0.6)',
+        background: 'var(--sd-surface, #0c101e)', border: `1px solid ${PATH}55`, boxShadow: '0 12px 40px rgba(0,0,0,0.6)',
       }}>
         <input
           autoFocus type="search" value={text} onChange={(e) => onText(e.target.value)} onKeyDown={onKey}
           placeholder="Type a sector or a company" aria-label="Type a sector or a company"
           style={{
             width: '100%', height: isMobile ? 44 : 34, boxSizing: 'border-box', padding: '0 12px', borderRadius: 8, outline: 'none',
-            color: '#fff', fontSize: isMobile ? 16 : 13, border: '1px solid rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.06)',
+            color: 'var(--sd-fg-1, #fff)', fontSize: isMobile ? 16 : 13, border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.14)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)',
           }}
         />
         {sectors.length > 0 && <div style={sub}>Sectors · inferred from company names and headlines</div>}
@@ -1061,11 +1124,11 @@ function PathPicker({ facets, text, onText, onPick, onClose, isMobile }) {
           {sectors.map((i) => (
             <button key={i.key} type="button" onClick={() => onPick({ kind: 'sector', key: i.key, label: i.label, color: i.color })} style={{
               height: 28, padding: '0 10px', borderRadius: 14, cursor: 'pointer', fontSize: 11.5, fontWeight: 700, whiteSpace: 'nowrap',
-              border: `1px solid ${i.color}66`, background: `${i.color}14`, color: '#ddd', display: 'inline-flex', alignItems: 'center', gap: 6,
+              border: `1px solid ${i.color}66`, background: `${i.color}14`, color: 'var(--sd-fg-1, #ddd)', display: 'inline-flex', alignItems: 'center', gap: 6,
             }}>
               <span style={{ width: 7, height: 7, borderRadius: '50%', background: i.color }} />
               {i.label}
-              <span style={{ fontWeight: 500, color: '#889' }}>{fmt(i.count)}</span>
+              <span style={{ fontWeight: 500, color: 'var(--sd-fg-3, #889)' }}>{fmt(i.count)}</span>
             </button>
           ))}
         </div>
@@ -1074,15 +1137,15 @@ function PathPicker({ facets, text, onText, onPick, onClose, isMobile }) {
           {companies.map((c) => (
             <button key={c.name} type="button" onClick={() => onPick({ kind: 'company', key: c.name, label: c.name })} style={{
               height: 28, padding: '0 10px', borderRadius: 14, cursor: 'pointer', fontSize: 11.5, fontWeight: 600, whiteSpace: 'nowrap',
-              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.04)', color: '#ccc',
+              border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: 'var(--sd-fg-2, #ccc)',
             }}>
               {c.name}
-              <span style={{ marginLeft: 6, fontWeight: 500, color: '#889' }}>{fmt(c.count)}</span>
+              <span style={{ marginLeft: 6, fontWeight: 500, color: 'var(--sd-fg-3, #889)' }}>{fmt(c.count)}</span>
             </button>
           ))}
         </div>
         {!sectors.length && !companies.length && (
-          <div style={{ fontSize: 12, color: '#888', padding: '12px 2px 4px' }}>
+          <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #888)', padding: '12px 2px 4px' }}>
             {facets ? `Nothing matches ‘${text.trim()}’.` : 'Reading where everyone works…'}
           </div>
         )}
@@ -1098,10 +1161,10 @@ const EASY = '#FF7043';
 const SLIDER_CSS = `
 .sepslide { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 4px 0 0; background: transparent; cursor: pointer; }
 .sepslide::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, ${RARE} 0%, #FFD700 50%, ${EASY} 100%); }
-.sepslide::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--sd-bg); border: 3px solid #fff; box-shadow: 0 0 10px rgba(255,255,255,0.45); }
+.sepslide::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--sd-bg); border: 3px solid #fff; box-shadow: 0 0 10px rgba(var(--sd-ink, 255, 255, 255), 0.45); }
 .sepslide::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, ${RARE} 0%, #FFD700 50%, ${EASY} 100%); }
-.sepslide::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--sd-bg); border: 3px solid #fff; box-shadow: 0 0 10px rgba(255,255,255,0.45); }
-.sepslide:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 3px; border-radius: 6px; }
+.sepslide::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--sd-bg); border: 3px solid #fff; box-shadow: 0 0 10px rgba(var(--sd-ink, 255, 255, 255), 0.45); }
+.sepslide:focus-visible { outline: 2px solid rgba(var(--sd-ink, 255, 255, 255), 0.7); outline-offset: 3px; border-radius: 6px; }
 `;
 const RARITY_NOTE = 'Rarity is how many mutual connections lead to them: few is a rare way in, many is warm (likely to accept). It never changes a score or a tier.';
 
@@ -1126,47 +1189,48 @@ const Row = memo(function Row({ p, top, height, isMobile, selected, tierColors,
       aria-pressed={selected}
       onClick={() => onPick(p)}
       onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onPick(p); } }}
-      onMouseEnter={(e) => { if (!selected) e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
+      onMouseEnter={(e) => { if (!selected) e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.04)'; }}
       onMouseLeave={(e) => { e.currentTarget.style.background = base; }}
+      className="seprow"
       style={{
         position: 'absolute', top, left: 0, right: 0, height, boxSizing: 'border-box',
         display: 'grid', alignItems: 'center', gap: 10, padding: '0 12px',
         gridTemplateColumns: isMobile ? '44px 36px 1fr 44px' : COLUMNS,
         borderLeft: `3px solid ${selected ? ORANGE : 'transparent'}`,
-        borderBottom: '1px solid rgba(255,255,255,0.04)',
+        borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)',
         background: base, cursor: 'pointer',
       }}
     >
-      <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 800, color: podium ? c : '#555', whiteSpace: 'nowrap' }}>{rank}</span>
+      <span style={{ fontSize: isMobile ? 11 : 12, fontWeight: 800, color: podium ? c : 'var(--sd-fg-5, #555)', whiteSpace: 'nowrap' }}>{rank}</span>
       <Avatar person={person} size={32} tierColors={tierColors} />
 
       {isMobile ? (
         <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
           <span style={{ display: 'flex', alignItems: 'center', gap: 4, minWidth: 0 }}>
-            <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? '#888' : '#fff', minWidth: 0 }}>
-              {person.name}{member && <span style={{ fontSize: 10, color: '#666', fontWeight: 400 }}> · out of network</span>}
+            <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? 'var(--sd-fg-3, #888)' : 'var(--sd-fg-1, #fff)', minWidth: 0 }}>
+              {person.name}{member && <span style={{ fontSize: 10, color: 'var(--sd-fg-4, #666)', fontWeight: 400 }}> · out of network</span>}
             </span>
             <Tags status={status} rarity={rarity} />
           </span>
           <Via p={p} route={route} tierColors={tierColors} compact />
-          <span style={{ ...ellipsis, fontSize: 10, color: '#666' }}>{subline(person)}</span>
+          <span style={{ ...ellipsis, fontSize: 10, color: 'var(--sd-fg-4, #666)' }}>{subline(person)}</span>
         </div>
       ) : (
         <>
           <div style={{ minWidth: 0 }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
-              <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? '#888' : '#fff' }}>{person.name}</span>
+              <span style={{ ...ellipsis, fontSize: 13, fontWeight: 600, color: member ? 'var(--sd-fg-3, #888)' : 'var(--sd-fg-1, #fff)' }}>{person.name}</span>
               <span style={{ flexShrink: 0, fontSize: 9, fontWeight: 800, color: c, border: `1px solid ${c}55`, borderRadius: 4, padding: '0 4px' }}>{p.tier}</span>
               {/* The rarity has its own column here */}
               <Tags status={status} rarity={null} />
-              {member && <span style={{ flexShrink: 0, fontSize: 10, color: '#666' }}>out of network</span>}
+              {member && <span style={{ flexShrink: 0, fontSize: 10, color: 'var(--sd-fg-4, #666)' }}>out of network</span>}
             </div>
-            <div style={{ ...ellipsis, fontSize: 10, color: '#777', marginTop: 2 }}>{subline(person)}</div>
+            <div style={{ ...ellipsis, fontSize: 10, color: 'var(--sd-fg-4, #777)', marginTop: 2 }}>{subline(person)}</div>
           </div>
           <Via p={p} route={route} tierColors={tierColors} />
           <RarityBar p={p} rarity={rarity} />
           <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <div style={{ flex: 1, height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
+            <div style={{ flex: 1, height: 6, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', borderRadius: 3 }}>
               <div style={{ height: '100%', borderRadius: 3, background: c, width: `${Math.max(0, Math.min(1, p.score / 10)) * 100}%` }} />
             </div>
             <span style={{ fontSize: 15, fontWeight: 800, color: c, width: 30, textAlign: 'right' }}>{p.score.toFixed(1)}</span>
@@ -1177,7 +1241,7 @@ const Row = memo(function Row({ p, top, height, isMobile, selected, tierColors,
       {isMobile && (
         <div style={{ textAlign: 'right' }}>
           <div style={{ fontSize: 13, fontWeight: 800, color: c }}>{p.score.toFixed(1)}</div>
-          <div style={{ fontSize: 9, color: '#666', fontWeight: 700 }}>{p.tier}</div>
+          <div style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)', fontWeight: 700 }}>{p.tier}</div>
         </div>
       )}
     </div>