six-degrees 0.6.0 → 0.8.0

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

@@ -237,13 +237,13 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
       {/* The replay's date, written by the scene as it plays. */}
       <div ref={stampRef} style={{
         position: 'absolute', bottom: 56, left: '50%', transform: 'translateX(-50%)', display: 'none',
-        padding: '6px 14px', borderRadius: 16, background: 'rgba(10,15,30,0.8)', border: '1px solid rgba(255,255,255,0.12)',
-        color: '#e6edf5', fontSize: 13, fontWeight: 600, pointerEvents: 'none', fontVariantNumeric: 'tabular-nums',
+        padding: '6px 14px', borderRadius: 16, background: 'var(--sd-surface, rgba(10,15,30,0.8))', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)',
+        color: 'var(--sd-fg-1, #e6edf5)', fontSize: 13, fontWeight: 600, pointerEvents: 'none', fontVariantNumeric: 'tabular-nums',
       }} />
-      <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20, display: 'flex', flexWrap: 'wrap', gap: '4px 12px', fontSize: 11, color: '#888', pointerEvents: 'none' }}>
+      <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20, display: 'flex', flexWrap: 'wrap', gap: '4px 12px', fontSize: 11, color: 'var(--sd-fg-3, #888)', pointerEvents: 'none' }}>
         {scheme.legend.map(([label, color]) => (
           <span key={label} style={{ display: 'flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
-            <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, display: 'inline-block' }} />
+            <span className="sd-dot-html" style={{ width: 8, height: 8, borderRadius: '50%', background: color, display: 'inline-block' }} />
             {label}
           </span>
         ))}
@@ -268,7 +268,7 @@ function createTooltip() {
     .style('background', 'rgba(0,0,0,0.92)').style('color', '#fff')
     .style('padding', '8px 12px').style('border-radius', '6px').style('font-size', '12px')
     .style('pointer-events', 'none').style('opacity', 0).style('z-index', 1000)
-    .style('border', '1px solid rgba(255,255,255,0.2)').style('max-width', '280px');
+    .style('border', '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.2)').style('max-width', '280px');
 }
 
 // A hovered dot eases up to 1.5 times its size and back, rather than jumping.
@@ -547,7 +547,8 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   // rather than being drawn into one even disc with all the others.
   const gravity = d => 0.15 * L.gravity * (hubs.has(d.id) ? 0.5 : d.degree >= 2 ? 0.2 : 1);
   // Thicker lines show more of themselves too, so a cluster's links read at a distance.
-  const lineOpacity = () => Math.min(0.45, 0.1 + 0.05 * L.lines);
+  // On a light page lines need more of themselves to read.
+  const lineOpacity = () => (MAP_LOOK.light ? Math.min(0.7, 0.22 + 0.08 * L.lines) : Math.min(0.45, 0.1 + 0.05 * L.lines));
   const simulation = d3.forceSimulation(nodes)
     .force('link', d3.forceLink(links).id(d => d.id).distance(linkDistance).strength(Math.min(1, linkBase * L.pull)))
     .force('charge', d3.forceManyBody().strength(isMobileGraph ? 0 : charge))
@@ -648,20 +649,52 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   }
   dotRings.each(drawDotRing);
 
-  const node = g.append('g').selectAll('circle').data(nodes).join('circle')
+  // How the theme draws a dot (lib/themes.js DOTS). Droplet: a drop of glass,
+  // lit from the top left and clear at the rim, with a fine edge (Glass).
+  // Flat: one plain fill and quiet names, as Obsidian draws its notes. Glow: a
+  // soft light round each (Space, Synthwave; up to 6,000 dots). Solid otherwise.
+  const dotStyle = MAP_LOOK.dots;
+  const defs = svg.select('defs').size() ? svg.select('defs') : svg.append('defs');
+  const drops = new Map();
+  const dotFill = (colour) => {
+    if (dotStyle !== 'droplet' || !colour || !/^#[0-9a-f]{6}$/i.test(colour)) return colour;
+    if (!drops.has(colour)) {
+      if (drops.size >= 64) return colour;   // a map with more colours than that (Heat): plain fills
+      const id = `drop-${drops.size}`;
+      const grad = defs.append('radialGradient').attr('id', id).attr('cx', '50%').attr('cy', '50%').attr('r', '50%').attr('fx', '34%').attr('fy', '30%');
+      grad.append('stop').attr('offset', '0').attr('stop-color', '#ffffff').attr('stop-opacity', 0.95);
+      grad.append('stop').attr('offset', '0.22').attr('stop-color', colour).attr('stop-opacity', 0.9);
+      grad.append('stop').attr('offset', '0.72').attr('stop-color', colour).attr('stop-opacity', 0.5);
+      grad.append('stop').attr('offset', '1').attr('stop-color', colour).attr('stop-opacity', 0.12);
+      drops.set(colour, `url(#${id})`);
+    }
+    return drops.get(colour);
+  };
+  const nodeG = g.append('g');
+  if (dotStyle === 'glow' && nodes.length <= 6000) {
+    if (!defs.select('#dot-glow').size()) {
+      const f = defs.append('filter').attr('id', 'dot-glow').attr('x', '-50%').attr('y', '-50%').attr('width', '200%').attr('height', '200%');
+      f.append('feGaussianBlur').attr('stdDeviation', 2.2).attr('result', 'b');
+      f.append('feMerge').html('<feMergeNode in="b"/><feMergeNode in="SourceGraphic"/>');
+    }
+    nodeG.attr('filter', 'url(#dot-glow)');
+  }
+  const node = nodeG.selectAll('circle').data(nodes).join('circle')
     .attr('class', 'gn')
     .attr('r', nodeRadius)
-    .attr('fill', d => d.id === CENTER_ID ? MAP_LOOK.you : colourOf(d))
-    .attr('fill-opacity', d => (d.degree >= 3 ? 0.55 : d.degree === 2 ? 0.75 : 1))
+    .attr('fill', d => d.id === CENTER_ID ? MAP_LOOK.you : dotFill(colourOf(d)))
+    .attr('fill-opacity', d => (dotStyle === 'droplet' || dotStyle === 'plain' ? 1 : d.degree >= 3 ? 0.55 : d.degree === 2 ? 0.75 : 1))
     .attr('stroke', d => {
       if (d.id === CENTER_ID) return '#FFD700';
       if (d.is_catalyst) return '#00ff88';
-      return 'none';
+      // Plain: an analysis tool's node, a solid dot with a thin dark ring.
+      return dotStyle === 'droplet' ? colourOf(d) : dotStyle === 'plain' ? '#2b2b2b' : 'none';
     })
+    .attr('stroke-opacity', d => (d.id === CENTER_ID || d.is_catalyst ? 1 : dotStyle === 'droplet' ? 0.45 : dotStyle === 'plain' ? 0.75 : 1))
     .attr('stroke-width', d => {
       if (d.id === CENTER_ID) return 3;
       if (d.is_catalyst) return 2.5;
-      return 0;
+      return dotStyle === 'droplet' ? 0.7 : dotStyle === 'plain' ? 0.8 : 0;
     })
     .style('cursor', 'pointer')
     .on('click', (event, d) => {
@@ -758,8 +791,10 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
       .attr('font-size', d => d.id === CENTER_ID ? 14 : hubs.has(d.id) ? Math.max(12, Math.min(22, nodeRadius(d) * 0.5)) : 10)
       .attr('font-weight', d => d.id === CENTER_ID || hubs.has(d.id) ? 700 : 500)
       .attr('fill', d => {
-        if (d.id === CENTER_ID) return '#fff';
-        if (d.is_catalyst) return '#00ff88';
+        if (d.id === CENTER_ID) return MAP_LOOK.text;
+        if (dotStyle === 'flat') return MAP_LOOK.light ? '#4d5566' : '#b9bec8';   // Obsidian's grey names
+        if (dotStyle === 'plain') return MAP_LOOK.text;                          // an analysis tool's black labels
+        if (d.is_catalyst) return MAP_LOOK.light ? '#0b7a47' : '#00ff88';
         return colourOf(d);
       })
       .attr('text-anchor', 'middle').attr('dy', d => nodeRadius(d) + 14)
@@ -937,7 +972,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     colourOf = next.of;
     heatFn = next.heat || null;
     drawHeat();
-    node.attr('fill', d => d.id === CENTER_ID ? MAP_LOOK.you : colourOf(d));
+    node.attr('fill', d => d.id === CENTER_ID ? MAP_LOOK.you : dotFill(colourOf(d)));
     link.attr('stroke', lineColour);
     drawLabels();
     showBorn();

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

@@ -37,20 +37,20 @@ const DISPLAY = [
   { key: 'lines', label: 'Link thickness', min: 0, max: 20, step: 0.1, fmt: (v) => `${v.toFixed(1)}×` },
 ];
 
-const heading = { fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, margin: '12px 0 6px', textTransform: 'uppercase' };
-const small = { fontSize: 10, color: '#667', lineHeight: 1.4 };
+const heading = { fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)', letterSpacing: 1, margin: '12px 0 6px', textTransform: 'uppercase' };
+const small = { fontSize: 10, color: 'var(--sd-fg-4, #667)', lineHeight: 1.4 };
 
 function Slider({ spec, value }) {
   return (
     <label title={spec.hint} style={{ display: 'block', marginBottom: 7 }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: '#aab' }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--sd-fg-3, #aab)' }}>
         <span>{spec.label}</span>
-        <span style={{ color: value === LAB_DEFAULTS[spec.key] ? '#556' : '#cfe6f7', fontVariantNumeric: 'tabular-nums' }}>{spec.fmt(value)}</span>
+        <span style={{ color: value === LAB_DEFAULTS[spec.key] ? 'var(--sd-fg-5, #556)' : 'var(--sd-fg-1, #cfe6f7)', fontVariantNumeric: 'tabular-nums' }}>{spec.fmt(value)}</span>
       </div>
       <input
         type="range" min={spec.min} max={spec.max} step={spec.step} value={value}
         onChange={(e) => setLab({ [spec.key]: Number(e.target.value) })}
-        style={{ width: '100%', accentColor: '#3498DB' }}
+        style={{ width: '100%', accentColor: 'var(--sd-accent, #3498DB)' }}
       />
     </label>
   );
@@ -62,9 +62,9 @@ function Choice({ options, value, onPick }) {
       {options.map(([v, label]) => (
         <button key={v} onClick={() => onPick(v)} aria-pressed={value === v} style={{
           flex: 1, padding: '5px 4px', borderRadius: 6, fontSize: 10.5, fontWeight: 600, cursor: 'pointer',
-          border: value === v ? '1px solid rgba(52,152,219,0.6)' : '1px solid rgba(255,255,255,0.08)',
-          background: value === v ? 'rgba(52,152,219,0.18)' : 'rgba(255,255,255,0.03)',
-          color: value === v ? '#cfe6f7' : '#888',
+          border: value === v ? '1px solid rgba(52,152,219,0.6)' : '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)',
+          background: value === v ? 'rgba(52,152,219,0.18)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+          color: value === v ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-3, #888)',
         }}>{label}</button>
       ))}
     </div>
@@ -76,7 +76,7 @@ export function NamesSwitch() {
   const lab = useSyncExternalStore(watchLab, labNow, () => LAB_DEFAULTS);
   return (
     <div style={{ marginBottom: 18 }}>
-      <div style={{ fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>Names</div>
+      <div style={{ fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)', letterSpacing: 1, marginBottom: 8, textTransform: 'uppercase' }}>Names</div>
       <Choice value={lab.labels} options={[[true, 'On'], [false, 'Off']]} onPick={(v) => setLab({ labels: v })} />
     </div>
   );
@@ -122,8 +122,8 @@ export default function GalaxyLab() {
   const still = useSyncExternalStore(subscribeMotion, reducedMotion, () => false);
 
   return (
-    <div style={{ marginBottom: 18, borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 12 }}>
-      <div style={{ fontSize: 13.5, fontWeight: 700, color: '#dde' }}>Physics</div>
+    <div style={{ marginBottom: 18, borderTop: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.06)', paddingTop: 12 }}>
+      <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--sd-fg-1, #dde)' }}>Physics</div>
       <div style={{ ...small, marginTop: 3 }}>The forces that lay the Galaxy out. Everything here moves it in place.</div>
 
           <div style={heading}>Names</div>
@@ -136,7 +136,7 @@ export default function GalaxyLab() {
             onKeyDown={(e) => { if (e.key === 'Enter') setClock({ fly: clock.fly + 1 }); }}
             style={{
               width: '100%', boxSizing: 'border-box', padding: '6px 9px', borderRadius: 6, fontSize: 11.5,
-              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(0,0,0,0.25)', color: '#dde',
+              border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.25)', color: 'var(--sd-fg-1, #dde)',
             }}
           />
           {clock.find.trim().length >= 2 && (
@@ -161,7 +161,7 @@ export default function GalaxyLab() {
 
           <button onClick={fit} title="Zoom so everyone on the map is on screen" style={{
             width: '100%', padding: '5px 10px', marginBottom: 4, borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: 'pointer',
-            border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aab',
+            border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: 'var(--sd-fg-3, #aab)',
           }}>⤢ Fit everyone on screen</button>
 
           <div style={heading}>Forces</div>
@@ -173,9 +173,9 @@ export default function GalaxyLab() {
 
           <div style={heading}>Display</div>
           {DISPLAY.map((f) => <Slider key={f.key} spec={f} value={lab[f.key]} />)}
-          <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Size dots by</div>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #aab)', marginBottom: 4 }}>Size dots by</div>
           <Choice value={lab.sizeBy} options={[['power', 'Power score'], ['links', 'Links'], ['reach', 'Who hangs off them']]} onPick={(v) => setLab({ sizeBy: v })} />
-          <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Colour by</div>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #aab)', marginBottom: 4 }}>Colour by</div>
           <Choice
             value={lab.colourBy}
             options={[['tier', 'Tier'], ['heat', 'Heat'], ['degree', 'Degree'], ['company', 'Company'], ['warmth', 'Warmth']]}
@@ -191,11 +191,11 @@ export default function GalaxyLab() {
               Warmth comes from the Social tab: import your LinkedIn export there first. Until then it&rsquo;s by tier.
             </div>
           )}
-          <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Which names{lab.labels ? '' : ' (Names is off)'}</div>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #aab)', marginBottom: 4 }}>Which names{lab.labels ? '' : ' (Names is off)'}</div>
           <Choice value={lab.names === 'all' ? 'all' : 'key'} options={[['key', 'Hubs, S, catalysts'], ['all', 'All 1st']]} onPick={(v) => setLab({ names: v })} />
           <div style={{ ...small, marginTop: -4, marginBottom: 8 }}>Zoomed out, only the hubs keep their names.</div>
-          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#aab', cursor: 'pointer' }}>
-            <input type="checkbox" checked={lab.branch} onChange={(e) => setLab({ branch: e.target.checked })} style={{ accentColor: '#3498DB' }} />
+          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--sd-fg-3, #aab)', cursor: 'pointer' }}>
+            <input type="checkbox" checked={lab.branch} onChange={(e) => setLab({ branch: e.target.checked })} style={{ accentColor: 'var(--sd-accent, #3498DB)' }} />
             Light up a branch on hover
           </label>
 
@@ -205,15 +205,15 @@ export default function GalaxyLab() {
               <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 6 }}>
                 <button onClick={() => (clock.playing ? pause() : play())} style={{
                   padding: '5px 12px', borderRadius: 6, fontSize: 11, fontWeight: 700, cursor: 'pointer',
-                  border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: '#cfe6f7',
+                  border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: 'var(--sd-fg-1, #cfe6f7)',
                 }}>{clock.playing ? '❚❚ Pause' : '▶ Replay'}</button>
                 {clock.at != null && (
                   <button onClick={stopReplay} style={{
                     padding: '5px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
-                    border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aaa',
+                    border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: 'var(--sd-fg-3, #aaa)',
                   }}>Show all</button>
                 )}
-                <span style={{ marginLeft: 'auto', fontSize: 10.5, color: '#aab', fontVariantNumeric: 'tabular-nums' }}>
+                <span style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--sd-fg-3, #aab)', fontVariantNumeric: 'tabular-nums' }}>
                   {month(clock.at ?? clock.max)}
                 </span>
               </div>
@@ -221,7 +221,7 @@ export default function GalaxyLab() {
                 <input
                   type="range" min={clock.min} max={clock.max} step={DAY} value={clock.at ?? clock.max}
                   onChange={(e) => { pause(); setClock({ at: Number(e.target.value) }); }}
-                  style={{ width: '100%', accentColor: '#3498DB' }}
+                  style={{ width: '100%', accentColor: 'var(--sd-accent, #3498DB)' }}
                   aria-label="Time"
                 />
                 {/* Milestones from the Social tab: a job start (gold) or a post (blue). */}
@@ -238,10 +238,10 @@ export default function GalaxyLab() {
               <div style={{ display: 'flex', justifyContent: 'space-between', ...small }}>
                 <span>{month(clock.min)}</span><span>{month(clock.max)}</span>
               </div>
-              <div style={{ fontSize: 11, color: '#aab', margin: '8px 0 4px' }}>Length</div>
+              <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #aab)', margin: '8px 0 4px' }}>Length</div>
               <Choice value={lab.speed} options={[[5, '5 s'], [15, '15 s'], [30, '30 s'], [60, '1 min']]} onPick={(v) => setLab({ speed: v })} />
-              <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#aab', cursor: 'pointer' }}>
-                <input type="checkbox" checked={lab.loop} onChange={(e) => setLab({ loop: e.target.checked })} style={{ accentColor: '#3498DB' }} />
+              <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'var(--sd-fg-3, #aab)', cursor: 'pointer' }}>
+                <input type="checkbox" checked={lab.loop} onChange={(e) => setLab({ loop: e.target.checked })} style={{ accentColor: 'var(--sd-accent, #3498DB)' }} />
                 Loop
               </label>
               <div style={{ ...small, marginTop: 4 }}>
@@ -252,7 +252,7 @@ export default function GalaxyLab() {
                 <button disabled={!!busy} onClick={() => run('video', recordReplay)} style={{
                   marginTop: 8, width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600,
                   cursor: busy ? 'default' : 'pointer', border: '1px solid rgba(231,76,60,0.5)',
-                  background: 'rgba(231,76,60,0.12)', color: '#f5b7b1',
+                  background: 'rgba(231,76,60,0.12)', color: 'var(--sd-fg-2, #f5b7b1)',
                 }}>{busy === 'video' ? '● Recording…' : '● Record the replay as a video'}</button>
               )}
             </>
@@ -268,8 +268,8 @@ export default function GalaxyLab() {
             <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 6 }}>
               {layouts.map((l) => (
                 <span key={l.name} style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 12, border: '1px solid rgba(52,152,219,0.4)', background: 'rgba(52,152,219,0.1)' }}>
-                  <button onClick={() => applyLayout(l.name)} style={{ padding: '3px 4px 3px 9px', border: 'none', background: 'none', color: '#cfe6f7', fontSize: 10.5, cursor: 'pointer' }}>{l.name}</button>
-                  <button onClick={() => forgetLayout(l.name)} aria-label={`Forget ${l.name}`} title="Forget this layout" style={{ padding: '3px 8px 3px 3px', border: 'none', background: 'none', color: '#667', fontSize: 11, cursor: 'pointer' }}>×</button>
+                  <button onClick={() => applyLayout(l.name)} style={{ padding: '3px 4px 3px 9px', border: 'none', background: 'none', color: 'var(--sd-fg-1, #cfe6f7)', fontSize: 10.5, cursor: 'pointer' }}>{l.name}</button>
+                  <button onClick={() => forgetLayout(l.name)} aria-label={`Forget ${l.name}`} title="Forget this layout" style={{ padding: '3px 8px 3px 3px', border: 'none', background: 'none', color: 'var(--sd-fg-4, #667)', fontSize: 11, cursor: 'pointer' }}>×</button>
                 </span>
               ))}
             </div>
@@ -277,27 +277,27 @@ export default function GalaxyLab() {
           <form onSubmit={(e) => { e.preventDefault(); saveLayout(name); setName(''); }} style={{ display: 'flex', gap: 4 }}>
             <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name this layout" maxLength={40} style={{
               flex: 1, minWidth: 0, padding: '5px 8px', borderRadius: 6, fontSize: 11,
-              border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(0,0,0,0.25)', color: '#dde',
+              border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.25)', color: 'var(--sd-fg-1, #dde)',
             }} />
             <button type="submit" disabled={!name.trim()} style={{
               padding: '5px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: name.trim() ? 'pointer' : 'default',
-              border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: name.trim() ? '#cfe6f7' : '#667',
+              border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: name.trim() ? 'var(--sd-fg-1, #cfe6f7)' : 'var(--sd-fg-4, #667)',
             }}>Save</button>
           </form>
 
           <div style={heading}>Share</div>
           <button disabled={!!busy} onClick={() => run('picture', savePicture)} style={{
             width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: busy ? 'default' : 'pointer',
-            border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: '#cfe6f7',
+            border: '1px solid rgba(52,152,219,0.6)', background: 'rgba(52,152,219,0.18)', color: 'var(--sd-fg-1, #cfe6f7)',
           }}>{busy === 'picture' ? 'Saving…' : 'Save a picture of the Galaxy'}</button>
           <div style={{ ...small, marginTop: 4 }}>
             A PNG of what&rsquo;s on screen, at twice the size. It shows real names, so check it before you post it.
           </div>
-          {note && <div style={{ ...small, color: '#e67e73', marginTop: 4 }}>{note}</div>}
+          {note && <div style={{ ...small, color: 'var(--sd-red, #e67e73)', marginTop: 4 }}>{note}</div>}
 
           <button onClick={() => { stopReplay(); setClock({ find: '' }); setLab(null); }} style={{
             marginTop: 10, width: '100%', padding: '6px 10px', borderRadius: 6, fontSize: 11, cursor: 'pointer',
-            border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aaa',
+            border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: 'var(--sd-fg-3, #aaa)',
           }}>Reset to today&rsquo;s layout</button>
     </div>
   );

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

@@ -31,13 +31,13 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
             <div key={cl.bridge.id} onClick={() => onSelect && onSelect(cl.bridge)}
               style={{
                 padding: 16, borderRadius: 12, cursor: 'pointer',
-                background: 'rgba(255,255,255,0.03)',
+                background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
                 border: `1px solid ${TIER_COLORS[cl.bridge.tier] || '#333'}30`,
                 borderLeft: `4px solid ${TIER_COLORS[cl.bridge.tier] || '#555'}`,
                 transition: 'all 0.15s',
               }}
-              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
+              onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'}
+              onMouseLeave={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.03)'}
             >
               <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                 {localPhoto(cl.bridge.profile_image_url) ? (
@@ -53,24 +53,24 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                   }}>{cl.bridge.name?.charAt(0)}</div>
                 )}
                 <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>{cl.bridge.name}</div>
-                  <div style={{ fontSize: 9, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--sd-fg-1, #fff)' }}>{cl.bridge.name}</div>
+                  <div style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {cl.bridge.headline?.substring(0, 40)}
                   </div>
                 </div>
                 <span style={{ fontSize: 12, fontWeight: 800, color: TIER_COLORS[cl.bridge.tier] }}>{cl.bridge.tier}</span>
               </div>
               <div style={{ display: 'flex', gap: 6, fontSize: 10 }}>
-                {cl.sCount > 0 && <span style={{ color: '#FFD700', fontWeight: 600 }}>{cl.sCount}S</span>}
-                {cl.aCount > 0 && <span style={{ color: '#9B59B6', fontWeight: 600 }}>{cl.aCount}A</span>}
-                <span style={{ color: '#666' }}>{cl.total} total</span>
+                {cl.sCount > 0 && <span style={{ color: 'var(--sd-gold, #FFD700)', fontWeight: 600 }}>{cl.sCount}S</span>}
+                {cl.aCount > 0 && <span style={{ color: 'var(--sd-purple, #9B59B6)', fontWeight: 600 }}>{cl.aCount}A</span>}
+                <span style={{ color: 'var(--sd-fg-4, #666)' }}>{cl.total} total</span>
               </div>
               <div style={{ display: 'flex', marginTop: 8 }}>
                 {cl.members.slice(0, 8).map((m, i) => (
                   <div key={m.id} style={{
                     width: 22, height: 22, borderRadius: '50%', fontSize: 8, fontWeight: 700,
                     background: localPhoto(m.profile_image_url) ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
-                    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: 'var(--sd-fg-1, #fff)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                     border: '2px solid var(--sd-bg)', marginLeft: i > 0 ? -6 : 0, position: 'relative', zIndex: 8 - i,
                     overflow: 'hidden',
                   }}>
@@ -79,7 +79,7 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                     ) : m.name?.charAt(0)}
                   </div>
                 ))}
-                {cl.total > 8 && <span style={{ fontSize: 9, color: '#555', marginLeft: 4, alignSelf: 'center' }}>+{cl.total - 8}</span>}
+                {cl.total > 8 && <span style={{ fontSize: 9, color: 'var(--sd-fg-5, #555)', marginLeft: 4, alignSelf: 'center' }}>+{cl.total - 8}</span>}
               </div>
             </div>
           ))}
@@ -117,7 +117,7 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                   width: 10, height: 10, borderRadius: '50%', background: TIER_COLORS[tier],
                 }} />
                 <span style={{ fontSize: 15, fontWeight: 800, color: TIER_COLORS[tier] }}>{tier}-Tier</span>
-                <span style={{ fontSize: 12, color: '#555' }}>{people.length}</span>
+                <span style={{ fontSize: 12, color: 'var(--sd-fg-5, #555)' }}>{people.length}</span>
               </div>
               {/* Cards grid */}
               <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 8 }}>
@@ -125,12 +125,12 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                   <div key={c.id} onClick={() => onSelect && onSelect(c)}
                     style={{
                       padding: 10, borderRadius: 8, cursor: 'pointer',
-                      background: 'rgba(255,255,255,0.03)',
+                      background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
                       border: `1px solid ${TIER_COLORS[tier]}20`,
                       transition: 'all 0.15s',
                     }}
-                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
-                    onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.03)'}
+                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.06)'}
+                    onMouseLeave={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.03)'}
                   >
                     <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                       {localPhoto(c.profile_image_url) ? (
@@ -141,18 +141,18 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                       ) : (
                         <div style={{
                           width: 32, height: 32, borderRadius: '50%', fontSize: 12, fontWeight: 700,
-                          background: TIER_COLORS[tier], color: tier === 'S' ? '#000' : '#fff',
+                          background: TIER_COLORS[tier], color: tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                           display: 'flex', alignItems: 'center', justifyContent: 'center',
                         }}>{c.name?.charAt(0)}</div>
                       )}
                       <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ fontSize: 11, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
-                        <div style={{ fontSize: 8, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.headline?.substring(0, 30)}</div>
+                        <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--sd-fg-1, #fff)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
+                        <div style={{ fontSize: 8, color: 'var(--sd-fg-4, #666)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.headline?.substring(0, 30)}</div>
                       </div>
                     </div>
                     <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, alignItems: 'center' }}>
                       <span style={{ fontSize: 10, fontWeight: 700, color: TIER_COLORS[tier] }}>{parseFloat(c.power_score || 0).toFixed(1)}</span>
-                      <div style={{ flex: 1, marginLeft: 8, height: 3, background: 'rgba(255,255,255,0.08)', borderRadius: 2 }}>
+                      <div style={{ flex: 1, marginLeft: 8, height: 3, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', borderRadius: 2 }}>
                         <div style={{ height: '100%', borderRadius: 2, background: TIER_COLORS[tier], width: `${Math.min(100, (parseFloat(c.power_score) || 0) * 10)}%` }} />
                       </div>
                     </div>

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

@@ -21,9 +21,9 @@ function summary(companies) {
 
 const button = (primary) => ({
   padding: '6px 12px', borderRadius: 7, cursor: 'pointer', fontSize: 12, fontWeight: 700,
-  border: primary ? 'none' : '1px solid rgba(255,255,255,0.15)',
+  border: primary ? 'none' : '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.15)',
   background: primary ? 'linear-gradient(135deg, #00ff88, #3498DB)' : 'transparent',
-  color: primary ? '#000' : '#cfd8d8',
+  color: primary ? '#000' : 'var(--sd-fg-2, #cfd8d8)',
 });
 
 /** `onAnswered({kept, scored, error?})` runs once the answer is saved. */
@@ -35,12 +35,11 @@ export default function LegacyScoresCard({ onAnswered }) {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    if (csvNetworkSource()) return;
     let off = false;
-    fetch('/api/company-scores/legacy')
-      .then((r) => r.json())
+    csvNetworkSource()
+      .then((onScreen) => (onScreen || off ? null : fetch('/api/company-scores/legacy').then((r) => r.json())))
       .then((j) => {
-        if (off || !j.offer?.companies?.length) return;
+        if (off || !j?.offer?.companies?.length) return;
         setOffer(j.offer);
         setPicked(new Set(j.offer.companies.map((c) => c.name)));
       })
@@ -78,11 +77,11 @@ export default function LegacyScoresCard({ onAnswered }) {
   return (
     <section aria-label="Built-in scores changed" style={{
       marginBottom: 14, padding: 14, borderRadius: 10, border: '1px solid rgba(255,215,0,0.35)',
-      background: 'rgba(255,215,0,0.06)', fontSize: 12.5, color: '#cfd8d8', lineHeight: 1.6,
+      background: 'rgba(255,215,0,0.06)', fontSize: 12.5, color: 'var(--sd-fg-2, #cfd8d8)', lineHeight: 1.6,
     }}>
-      <b style={{ color: '#fff' }}>Built-in scores changed in this version:</b> {summary(offer.companies)}.
+      <b style={{ color: 'var(--sd-fg-1, #fff)' }}>Built-in scores changed in this version:</b> {summary(offer.companies)}.
       {' '}Keep any of the old ones as your own?
-      <div style={{ marginTop: 4, color: '#8b9a9a' }}>
+      <div style={{ marginTop: 4, color: 'var(--sd-fg-3, #8b9a9a)' }}>
         The built-in list now holds only companies most professionals would recognise, scored the same for
         everyone; anything else is estimated from your network. A score you keep is yours, like one you set
         below, and Auto hands it back.
@@ -95,8 +94,8 @@ export default function LegacyScoresCard({ onAnswered }) {
               <label style={{ display: 'flex', gap: 8, alignItems: 'baseline', cursor: 'pointer' }}>
                 <input type="checkbox" checked={picked.has(c.name)} disabled={busy} onChange={() => toggle(c.name)} />
                 <span>
-                  <b style={{ color: '#fff' }}>{c.name}</b> {c.was} → {c.estimated ? `estimated (${c.now})` : c.now}
-                  <span style={{ color: '#778' }}>
+                  <b style={{ color: 'var(--sd-fg-1, #fff)' }}>{c.name}</b> {c.was} → {c.estimated ? `estimated (${c.now})` : c.now}
+                  <span style={{ color: 'var(--sd-fg-4, #778)' }}>
                     {` · ${c.people} ${c.people === 1 ? 'person' : 'people'} there now`}
                     {c.names.length > 1 && ` · for ${c.names.join(', ')}`}
                   </span>