six-degrees 0.6.0 → 0.7.0

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

@@ -7,10 +7,11 @@
 // files the scanner writes.
 
 import { useState } from 'react';
+import Link from 'next/link';
 import { limitQuestion, limitNote, SAFE_LIMITS } from '../../lib/search-risk';
 import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
-const LINE = '1px solid rgba(255,255,255,0.1)';
+const LINE = '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)';
 const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const DAILY = [25, 50, 100, 200, 500];
 const MONTHLY = [100, 250, 500, 1000, 0];
@@ -25,7 +26,7 @@ export function CooldownBanner({ cooldown, onLift, disabled }) {
   return (
     <div role="status" style={{
       padding: '12px 14px', borderRadius: 8, fontSize: 13, lineHeight: 1.6,
-      background: 'rgba(255,80,80,0.08)', border: '1px solid rgba(255,80,80,0.35)', color: '#f3c9c9',
+      background: 'rgba(255,80,80,0.08)', border: '1px solid rgba(255,80,80,0.35)', color: 'var(--sd-fg-2, #f3c9c9)',
     }}>
       <b style={{ color: '#ff8080' }}>Scanning is paused until {when(cooldown.until)}.</b>{' '}
       {cooldown.reason}. Nothing that searches LinkedIn will run until then, so the account can recover.
@@ -49,7 +50,7 @@ const pct = (used, cap) => (cap ? Math.min(100, Math.round((used / cap) * 100))
 function Bar({ used, cap }) {
   const p = pct(used, cap);
   return (
-    <div style={{ height: 5, borderRadius: 3, background: 'rgba(255,255,255,0.07)', overflow: 'hidden', marginTop: 4 }}>
+    <div style={{ height: 5, borderRadius: 3, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.07)', overflow: 'hidden', marginTop: 4 }}>
       <div style={{ height: '100%', width: `${p}%`, background: p >= 100 ? '#ff6b6b' : p >= 75 ? '#FFD700' : '#3498DB' }} />
     </div>
   );
@@ -69,18 +70,18 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
   };
   const note = limitNote(limits);
   return (
-    <div style={{ padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)', fontSize: 12.5, color: '#b8c4c4' }}>
+    <div style={{ padding: '12px 14px', borderRadius: 8, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', fontSize: 12.5, color: 'var(--sd-fg-2, #b8c4c4)' }}>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(210px, 1fr))', gap: 14 }}>
         <div>
-          <div><b style={{ color: '#fff' }}>{today}</b> of {limits.daily || 'no limit'} searches in the last 24 hours</div>
+          <div><b style={{ color: 'var(--sd-fg-1, #fff)' }}>{today}</b> of {limits.daily || 'no limit'} searches in the last 24 hours</div>
           <Bar used={li.searchesToday || 0} cap={limits.daily} />
         </div>
         <div>
-          <div><b style={{ color: '#fff' }}>{li.searchesMonth}</b> of {limits.monthly || 'no limit'} this month · resets {day(li.monthResets)}</div>
+          <div><b style={{ color: 'var(--sd-fg-1, #fff)' }}>{li.searchesMonth}</b> of {limits.monthly || 'no limit'} this month · resets {day(li.monthResets)}</div>
           <Bar used={li.searchesMonth} cap={limits.monthly} />
         </div>
         <div>
-          <div><b style={{ color: '#fff' }}>{views}</b> of {limits.profiles} profile views today</div>
+          <div><b style={{ color: 'var(--sd-fg-1, #fff)' }}>{views}</b> of {limits.profiles} profile views in the last 24 hours</div>
           <Bar used={li.unreadable ? limits.profiles : li.profilesToday} cap={limits.profiles} />
         </div>
       </div>
@@ -96,26 +97,30 @@ export function BudgetBox({ li, onSetLimits, disabled }) {
           {PROFILES.map((n) => <option key={n} value={n}>{n} profile views a day</option>)}
         </select>
       </div>
-      <div style={{ marginTop: 8, color: '#778', lineHeight: 1.6 }}>
+      <div style={{ marginTop: 8, color: 'var(--sd-fg-4, #778)', lineHeight: 1.6 }}>
         Every page of someone&rsquo;s connections is one search. LinkedIn limits a free account&rsquo;s people
         searches by the month (it doesn&rsquo;t say how many; reports put it around 250–350), resetting on the 1st.
         When a budget is used, a scan saves what it read and stops; the next one carries on from the same page.
       </div>
       {note && (
-        <div style={{ marginTop: 8, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', color: '#FFD700', lineHeight: 1.6 }}>
+        <div style={{ marginTop: 8, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', color: 'var(--sd-gold, #FFD700)', lineHeight: 1.6 }}>
           <b style={{ flex: 1, minWidth: 200 }}>{note}</b>
           <button
             onClick={() => set(SAFE_LIMITS)}
             disabled={disabled}
-            style={{ ...sel, cursor: disabled ? 'not-allowed' : 'pointer', color: '#FFD700', borderColor: 'rgba(255,215,0,0.4)' }}
+            style={{ ...sel, cursor: disabled ? 'not-allowed' : 'pointer', color: 'var(--sd-gold, #FFD700)', borderColor: 'rgba(255,215,0,0.4)' }}
           >Back to {SAFE_LIMITS.daily} a day, {SAFE_LIMITS.monthly} a month</button>
         </div>
       )}
-      <div style={{ marginTop: 6, color: '#778', lineHeight: 1.6 }}>
+      <div style={{ marginTop: 6, color: 'var(--sd-fg-4, #778)', lineHeight: 1.6 }}>
         Each circle scan opens the person&rsquo;s profile once, which is one profile view. Profile views are what
         LinkedIn restricted an account for, after about 20 in an hour. The scanner opens at most one a minute, and
         once today&rsquo;s are used, a scan stops before the next profile and tries that person next time.
       </div>
+      {/* The whole picture (the last hour, the last 7 days, when the next one frees, the last pushback) is in Settings. */}
+      <Link href="/settings#usage" style={{ display: 'inline-block', marginTop: 8, color: 'var(--sd-blue, #3498DB)', textDecoration: 'none', fontWeight: 600 }}>
+        See all your LinkedIn usage &rarr;
+      </Link>
     </div>
   );
 }
@@ -126,25 +131,25 @@ export function PausedList({ paused = [], onResume, onResumeAll, disabled }) {
   const legacy = paused.filter((p) => p.legacy).length;
   const shown = showAll ? paused : paused.slice(0, 8);
   return (
-    <div style={{ borderRadius: 8, border: LINE, background: 'rgba(255,255,255,0.03)' }}>
+    <div style={{ borderRadius: 8, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)' }}>
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 14px', borderBottom: LINE, flexWrap: 'wrap' }}>
         <div style={{ flex: 1, minWidth: 200 }}>
-          <b style={{ fontSize: 13.5 }}>Paused — {paused.length} {paused.length === 1 ? 'list' : 'lists'} with more to read</b>
-          <div style={{ fontSize: 12, color: '#8b9a9a', marginTop: 2 }}>
+          <b style={{ fontSize: 13.5 }}>Paused: {paused.length} {paused.length === 1 ? 'list' : 'lists'} with more to read</b>
+          <div style={{ fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 2 }}>
             Each carries on from the page it stopped at{legacy ? `; ${legacy} were read to page 10 before whole lists were read` : ''}.
           </div>
         </div>
-        <button onClick={onResumeAll} disabled={disabled} style={{ ...btn, opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', background: disabled ? 'rgba(255,255,255,0.06)' : 'linear-gradient(135deg, #3498DB, #9B59B6)' }}>
+        <button onClick={onResumeAll} disabled={disabled} style={{ ...btn, opacity: disabled ? 0.4 : 1, cursor: disabled ? 'not-allowed' : 'pointer', background: disabled ? 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' : 'linear-gradient(135deg, #3498DB, #9B59B6)' }}>
           Resume all
         </button>
       </div>
       <div>
         {shown.map((p) => (
-          <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
+          <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 14px', borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)' }}>
             <span style={{ width: 8, height: 8, borderRadius: '50%', background: TIER[p.tier] || '#667', flexShrink: 0 }} />
             <div style={{ flex: 1, minWidth: 0 }}>
               <div style={{ fontSize: 13, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</div>
-              <div style={{ fontSize: 11.5, color: '#8b9a9a' }}>
+              <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)' }}>
                 Read to page {p.pagesRead} · carries on at {p.nextPage}
                 {p.at ? ` · ${day(p.at)}` : ''}
                 {p.unclear >= 2 ? ' · came back unclear twice, so it waits at the back of Resume all' : ''}
@@ -167,10 +172,10 @@ export function PausedList({ paused = [], onResume, onResumeAll, disabled }) {
 
 const btn = {
   padding: '8px 14px', borderRadius: 7, fontSize: 13, fontWeight: 700, cursor: 'pointer',
-  border: LINE, background: 'rgba(255,255,255,0.08)', color: '#fff',
+  border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', color: 'var(--sd-fg-1, #fff)',
 };
 const linkBtn = { background: 'none', border: 'none', color: '#8fb8d6', cursor: 'pointer', fontSize: 12.5, fontWeight: 600, padding: 0 };
 const sel = {
   padding: '6px 8px', borderRadius: 6, fontSize: 12.5, fontWeight: 600,
-  background: 'rgba(255,255,255,0.08)', color: '#fff', border: LINE,
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', color: 'var(--sd-fg-1, #fff)', border: LINE,
 };

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

@@ -0,0 +1,99 @@
+'use client';
+
+// Lensing for the Glass look's panels (lib/liquid-glass.js): while a look draws
+// its controls as glass (html[data-buttons="frosted"]), every [data-glass-panel]
+// on the page gets an SVG filter made for its size, which its backdrop-filter
+// runs after the blur (app/globals.css reads it from --lg-lens). Panels that
+// open later are picked up, a panel that changes size gets a new map, and with
+// Reduce Transparency on there's none at all. Renders nothing itself.
+
+import { useEffect } from 'react';
+import { lensMap } from '../../lib/liquid-glass';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+// How much each kind of panel bends: a tall side panel a lot, the slim tab bar a little.
+const KINDS = {
+  side: { r: 2, bezel: 26, scale: 56 },
+  bar: { r: 20, bezel: 12, scale: 22 },
+};
+
+export default function LiquidGlass() {
+  useEffect(() => {
+    const root = document.documentElement;
+    const reduce = window.matchMedia?.('(prefers-reduced-transparency: reduce)');
+    let defs = null;
+    const made = new Map();   // panel → { id, w, h }
+    let n = 0;
+    let timer = null;
+
+    const ensureDefs = () => {
+      if (defs) return defs;
+      const svg = document.createElementNS(SVG_NS, 'svg');
+      svg.setAttribute('width', '0');
+      svg.setAttribute('height', '0');
+      svg.setAttribute('aria-hidden', 'true');
+      svg.style.position = 'absolute';
+      svg.style.pointerEvents = 'none';
+      defs = document.createElementNS(SVG_NS, 'defs');
+      svg.appendChild(defs);
+      document.body.appendChild(svg);
+      return defs;
+    };
+
+    const update = () => {
+      const on = root.dataset.buttons === 'frosted' && !reduce?.matches;
+      const panels = on ? [...document.querySelectorAll('[data-glass-panel]')] : [];
+      for (const [el, f] of made) {
+        if (panels.includes(el)) continue;
+        el.style.removeProperty('--lg-lens');
+        document.getElementById(f.id)?.remove();
+        made.delete(el);
+      }
+      for (const el of panels) {
+        const w = Math.round(el.offsetWidth);
+        const h = Math.round(el.offsetHeight);
+        if (w < 20 || h < 20) continue;
+        const had = made.get(el);
+        if (had && had.w === w && had.h === h) continue;
+        const kind = KINDS[el.dataset.glassPanel] || KINDS.side;
+        const id = had?.id || `lg-lens-${++n}`;
+        document.getElementById(id)?.remove();
+        const filter = document.createElementNS(SVG_NS, 'filter');
+        filter.setAttribute('id', id);
+        for (const [k, v] of Object.entries({ x: '0', y: '0', width: '100%', height: '100%', 'color-interpolation-filters': 'sRGB' })) filter.setAttribute(k, v);
+        const image = document.createElementNS(SVG_NS, 'feImage');
+        for (const [k, v] of Object.entries({ x: '0', y: '0', width: String(w), height: String(h), preserveAspectRatio: 'none', result: 'map' })) image.setAttribute(k, v);
+        image.setAttribute('href', lensMap(w, h, Math.min(kind.r, Math.floor(Math.min(w, h) / 2)), kind.bezel));
+        const shift = document.createElementNS(SVG_NS, 'feDisplacementMap');
+        for (const [k, v] of Object.entries({ in: 'SourceGraphic', in2: 'map', scale: String(kind.scale), xChannelSelector: 'R', yChannelSelector: 'G' })) shift.setAttribute(k, v);
+        filter.append(image, shift);
+        ensureDefs().appendChild(filter);
+        el.style.setProperty('--lg-lens', `url(#${id})`);
+        made.set(el, { id, w, h });
+      }
+    };
+    const schedule = () => { clearTimeout(timer); timer = setTimeout(update, 150); };
+
+    update();
+    const ro = new ResizeObserver(schedule);
+    const watchSizes = () => { ro.disconnect(); document.querySelectorAll('[data-glass-panel]').forEach((el) => ro.observe(el)); };
+    watchSizes();
+    // Panels open and close; the look changes.
+    const mo = new MutationObserver((records) => {
+      if (records.some((r) => r.type === 'attributes' || [...r.addedNodes, ...r.removedNodes].some((x) => x.nodeType === 1 && (x.matches?.('[data-glass-panel]') || x.querySelector?.('[data-glass-panel]'))))) {
+        watchSizes();
+        schedule();
+      }
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+    mo.observe(root, { attributes: true, attributeFilter: ['data-buttons'] });
+    reduce?.addEventListener?.('change', schedule);
+    return () => {
+      clearTimeout(timer);
+      ro.disconnect();
+      mo.disconnect();
+      reduce?.removeEventListener?.('change', schedule);
+    };
+  }, []);
+  return null;
+}

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

@@ -31,8 +31,8 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
           {/* Table header */}
           <div style={{
             display: 'grid', gridTemplateColumns: '40px 1fr 50px 50px 50px 80px',
-            gap: 8, padding: '8px 12px', fontSize: 9, fontWeight: 700, color: '#555',
-            borderBottom: '1px solid rgba(255,255,255,0.1)', textTransform: 'uppercase', letterSpacing: 0.5,
+            gap: 8, padding: '8px 12px', fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)',
+            borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', textTransform: 'uppercase', letterSpacing: 0.5,
           }}>
             <span>#</span><span>Bridge</span><span>S</span><span>A</span><span>Total</span><span>Value</span>
           </div>
@@ -41,13 +41,13 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
               style={{
                 display: 'grid', gridTemplateColumns: '40px 1fr 50px 50px 50px 80px',
                 gap: 8, padding: '10px 12px', alignItems: 'center', cursor: 'pointer',
-                borderBottom: '1px solid rgba(255,255,255,0.04)',
+                borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)',
                 transition: 'background 0.1s',
               }}
-              onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
+              onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.04)'}
               onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
             >
-              <span style={{ fontSize: 12, fontWeight: 700, color: '#444' }}>{i + 1}</span>
+              <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--sd-fg-5, #444)' }}>{i + 1}</span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                 {localPhoto(cl.bridge.profile_image_url) ? (
                   <img src={localPhoto(cl.bridge.profile_image_url)} alt="" style={{
@@ -62,17 +62,17 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
                   }}>{cl.bridge.name?.charAt(0)}</div>
                 )}
                 <div style={{ minWidth: 0 }}>
-                  <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--sd-fg-1, #fff)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                     {cl.bridge.name}
                   </div>
                   <div style={{ fontSize: 9, color: TIER_COLORS[cl.bridge.tier], fontWeight: 600 }}>{cl.bridge.tier}-Tier</div>
                 </div>
               </div>
-              <span style={{ fontSize: 13, fontWeight: 800, color: '#FFD700' }}>{cl.sCount}</span>
-              <span style={{ fontSize: 13, fontWeight: 700, color: '#9B59B6' }}>{cl.aCount}</span>
-              <span style={{ fontSize: 12, color: '#888' }}>{cl.total}</span>
+              <span style={{ fontSize: 13, fontWeight: 800, color: 'var(--sd-gold, #FFD700)' }}>{cl.sCount}</span>
+              <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--sd-purple, #9B59B6)' }}>{cl.aCount}</span>
+              <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #888)' }}>{cl.total}</span>
               <div>
-                <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
+                <div style={{ height: 6, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', borderRadius: 3 }}>
                   <div style={{
                     height: '100%', borderRadius: 3,
                     background: `linear-gradient(90deg, ${TIER_COLORS[cl.bridge.tier]}, #FF6B35)`,
@@ -97,8 +97,8 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
         {/* Table header */}
         <div style={{
           display: 'grid', gridTemplateColumns: '40px 36px 1fr 60px 120px',
-          gap: 8, padding: '8px 12px', fontSize: 9, fontWeight: 700, color: '#555',
-          borderBottom: '1px solid rgba(255,255,255,0.1)', textTransform: 'uppercase', letterSpacing: 0.5,
+          gap: 8, padding: '8px 12px', fontSize: 9, fontWeight: 700, color: 'var(--sd-fg-5, #555)',
+          borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)', textTransform: 'uppercase', letterSpacing: 0.5,
         }}>
           <span>#</span><span></span><span>Name</span><span>Score</span><span>Power</span>
         </div>
@@ -107,14 +107,14 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
             style={{
               display: 'grid', gridTemplateColumns: '40px 36px 1fr 60px 120px',
               gap: 8, padding: '8px 12px', alignItems: 'center', cursor: 'pointer',
-              borderBottom: '1px solid rgba(255,255,255,0.04)',
+              borderBottom: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.04)',
               background: i < 3 ? `${TIER_COLORS[c.tier]}08` : 'transparent',
               transition: 'background 0.1s',
             }}
-            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
+            onMouseEnter={e => e.currentTarget.style.background = 'rgba(var(--sd-ink, 255, 255, 255), 0.04)'}
             onMouseLeave={e => e.currentTarget.style.background = i < 3 ? `${TIER_COLORS[c.tier]}08` : 'transparent'}
           >
-            <span style={{ fontSize: 12, fontWeight: 700, color: i < 3 ? TIER_COLORS[c.tier] : '#444' }}>{i + 1}</span>
+            <span style={{ fontSize: 12, fontWeight: 700, color: i < 3 ? TIER_COLORS[c.tier] : 'var(--sd-fg-5, #444)' }}>{i + 1}</span>
             {localPhoto(c.profile_image_url) ? (
               <img src={localPhoto(c.profile_image_url)} alt="" style={{
                 width: 28, height: 28, borderRadius: '50%', objectFit: 'cover',
@@ -123,19 +123,19 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
             ) : (
               <div style={{
                 width: 28, height: 28, borderRadius: '50%', fontSize: 10, fontWeight: 700,
-                background: TIER_COLORS[c.tier], color: c.tier === 'S' ? '#000' : '#fff',
+                background: TIER_COLORS[c.tier], color: c.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)',
                 display: 'flex', alignItems: 'center', justifyContent: 'center',
               }}>{c.name?.charAt(0)}</div>
             )}
             <div style={{ minWidth: 0 }}>
-              <div style={{ fontSize: 12, fontWeight: 600, color: '#fff', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
-              <div style={{ fontSize: 9, color: '#666', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.headline?.substring(0, 45)}</div>
+              <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--sd-fg-1, #fff)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.name}</div>
+              <div style={{ fontSize: 9, color: 'var(--sd-fg-4, #666)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{c.headline?.substring(0, 45)}</div>
             </div>
             <div style={{ textAlign: 'center' }}>
               <span style={{ fontSize: 13, fontWeight: 800, color: TIER_COLORS[c.tier] }}>{parseFloat(c.power_score || 0).toFixed(1)}</span>
-              <div style={{ fontSize: 8, color: '#555' }}>{c.tier}</div>
+              <div style={{ fontSize: 8, color: 'var(--sd-fg-5, #555)' }}>{c.tier}</div>
             </div>
-            <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }}>
+            <div style={{ height: 6, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)', borderRadius: 3 }}>
               <div style={{
                 height: '100%', borderRadius: 3,
                 background: TIER_COLORS[c.tier],

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

@@ -14,7 +14,7 @@ import { Seg, panelHeading } from './PathsAnalyzer';
 
 export const PHYSICS_OFF = Object.freeze({ live: false, spread: 1, pull: 1, links: 1 });
 
-const hint = { fontSize: 10.5, color: '#667', lineHeight: 1.45, marginTop: 6 };
+const hint = { fontSize: 10.5, color: 'var(--sd-fg-4, #667)', lineHeight: 1.45, marginTop: 6 };
 const SLIDERS = [
   { key: 'spread', label: 'Spread', min: 0.2, max: 4, step: 0.05, tip: 'How hard bubbles push each other apart.' },
   { key: 'pull', label: 'Pull to their group', min: 0, max: 4, step: 0.05, tip: 'How hard each bubble keeps to its sector. At 0 they find their own shape.' },
@@ -35,19 +35,19 @@ export function MapLook({ colourBy, onColourBy, physics, onPhysics, heatHint })
         <div style={{ marginTop: 8 }}>
           {SLIDERS.map((s) => (
             <label key={s.key} title={s.tip} style={{ display: 'block', marginBottom: 6 }}>
-              <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>{s.label}</span>
-                <span style={{ color: physics[s.key] === PHYSICS_OFF[s.key] ? '#556' : '#cfe6f7', fontVariantNumeric: 'tabular-nums' }}>{physics[s.key].toFixed(2)}×</span>
+                <span style={{ color: physics[s.key] === PHYSICS_OFF[s.key] ? 'var(--sd-fg-5, #556)' : 'var(--sd-fg-1, #cfe6f7)', fontVariantNumeric: 'tabular-nums' }}>{physics[s.key].toFixed(2)}×</span>
               </div>
               <input type="range" min={s.min} max={s.max} step={s.step} value={physics[s.key]}
                 onChange={(e) => onPhysics({ ...physics, [s.key]: Number(e.target.value) })}
-                style={{ width: '100%', accentColor: '#3498DB' }} />
+                style={{ width: '100%', accentColor: 'var(--sd-accent, #3498DB)' }} />
             </label>
           ))}
           <div style={hint}>Drag a bubble and the ones joined to it follow. Click still opens it.</div>
           <button type="button" onClick={() => onPhysics({ ...PHYSICS_OFF, live: true })} style={{
             marginTop: 6, padding: '4px 10px', borderRadius: 6, fontSize: 10.5, 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)',
           }}>Reset the forces</button>
         </div>
       ) : (

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

@@ -62,36 +62,36 @@ export default function MappingProgress({ degree1 = [], degree2 = [], skips = []
   return (
     <div style={CARD}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
-        <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: '#3498DB' }}>
+        <h3 style={{ fontSize: 14, fontWeight: 700, margin: 0, color: 'var(--sd-blue, #3498DB)' }}>
           2nd-degree mapping
         </h3>
-        <span style={{ fontSize: 12, color: done ? '#00ff88' : '#8b9a9a', fontWeight: 600 }}>
+        <span style={{ fontSize: 12, color: done ? 'var(--sd-green, #00ff88)' : 'var(--sd-fg-3, #8b9a9a)', fontWeight: 600 }}>
           {done ? 'Everything reachable is mapped' : `${m.percent}%`}
         </span>
       </div>
 
-      <div style={{ ...BAR, display: 'flex', overflow: 'hidden', background: 'rgba(255,255,255,0.06)' }}>
+      <div style={{ ...BAR, display: 'flex', overflow: 'hidden', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)' }}>
         <div style={{ width: `${pct(m.mapped)}%`, background: '#00ff88' }} />
-        <div style={{ width: `${pct(m.hidden)}%`, background: 'rgba(255,255,255,0.22)' }} />
+        <div style={{ width: `${pct(m.hidden)}%`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.22)' }} />
       </div>
 
       <div style={{ display: 'flex', gap: 16, marginTop: 10, fontSize: 12, flexWrap: 'wrap' }}>
         <Key color="#00ff88" label="mapped" value={m.mapped} />
-        <Key color="rgba(255,255,255,0.35)" label="hidden" value={m.hidden} />
-        <Key color="rgba(255,255,255,0.12)" label="to go" value={m.todo} />
-        <span style={{ color: '#667', marginLeft: 'auto' }}>of {m.total}</span>
+        <Key color="rgba(var(--sd-ink, 255, 255, 255), 0.35)" label="hidden" value={m.hidden} />
+        <Key color="rgba(var(--sd-ink, 255, 255, 255), 0.12)" label="to go" value={m.todo} />
+        <span style={{ color: 'var(--sd-fg-4, #667)', marginLeft: 'auto' }}>of {m.total}</span>
       </div>
 
       {m.hidden > 0 && (
-        <p style={{ fontSize: 11.5, color: '#667', margin: '10px 0 0', lineHeight: 1.6 }}>
-          Hidden means they keep their connections private — that will not change, and it
+        <p style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #667)', margin: '10px 0 0', lineHeight: 1.6 }}>
+          Hidden means they keep their connections private. That will not change, and it
           does not count against you.
         </p>
       )}
 
       {!done && (
-        <p style={{ fontSize: 11.5, color: '#8b9a9a', margin: '10px 0 0', lineHeight: 1.6 }}>
-          {m.todo} left — about <b>{m.batches} {m.batches === 1 ? 'batch' : 'batches'}</b> of {BATCH}.
+        <p style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', margin: '10px 0 0', lineHeight: 1.6 }}>
+          {m.todo} left, about <b>{m.batches} {m.batches === 1 ? 'batch' : 'batches'}</b> of {BATCH}.
           Run one, leave it a while, run another. Long unbroken runs are what gets an
           account restricted.
         </p>
@@ -107,12 +107,12 @@ export default function MappingProgress({ degree1 = [], degree2 = [], skips = []
                 <span style={{ width: 14, color: TIER_COLORS[t], fontWeight: 700 }}>{t}</span>
                 <div style={{
                   flex: 1, height: 5, borderRadius: 3, display: 'flex',
-                  overflow: 'hidden', background: 'rgba(255,255,255,0.06)',
+                  overflow: 'hidden', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.06)',
                 }}>
                   <div style={{ width: `${(row.mapped / row.total) * 100}%`, background: TIER_COLORS[t] }} />
-                  <div style={{ width: `${(row.hidden / row.total) * 100}%`, background: 'rgba(255,255,255,0.22)' }} />
+                  <div style={{ width: `${(row.hidden / row.total) * 100}%`, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.22)' }} />
                 </div>
-                <span style={{ color: '#667', width: 62, textAlign: 'right' }}>
+                <span style={{ color: 'var(--sd-fg-4, #667)', width: 62, textAlign: 'right' }}>
                   {row.mapped}/{row.total}
                 </span>
               </div>
@@ -125,9 +125,9 @@ export default function MappingProgress({ degree1 = [], degree2 = [], skips = []
 
 function Key({ color, label, value }) {
   return (
-    <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#8b9a9a' }}>
+    <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--sd-fg-3, #8b9a9a)' }}>
       <span style={{ width: 8, height: 8, borderRadius: 2, background: color }} />
-      <b style={{ color: '#e2e8f0' }}>{value}</b> {label}
+      <b style={{ color: 'var(--sd-fg-1, #e2e8f0)' }}>{value}</b> {label}
     </span>
   );
 }

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

@@ -27,7 +27,7 @@ const ago = (when) => {
 };
 const btn = {
   padding: '8px 12px', borderRadius: 8, fontSize: 12, fontWeight: 700, cursor: 'pointer', textAlign: 'left',
-  border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.05)', color: '#ddd',
+  border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', color: 'var(--sd-fg-1, #ddd)',
 };
 
 export default function NoteDetail({ note, connections = [], degree2 = [], onBack, onSelect, onOpenCircle, onShowInSeparation }) {
@@ -40,14 +40,14 @@ export default function NoteDetail({ note, connections = [], degree2 = [], onBac
 
   return (
     <div>
-      <button type="button" onClick={onBack} style={{ background: 'none', border: 'none', color: '#aaa', cursor: 'pointer', fontSize: 12, padding: 0, marginBottom: 12 }}>
+      <button type="button" onClick={onBack} style={{ background: 'none', border: 'none', color: 'var(--sd-fg-3, #aaa)', cursor: 'pointer', fontSize: 12, padding: 0, marginBottom: 12 }}>
         ← Back
       </button>
       <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
         <span style={{ fontSize: 22 }}>{note?.icon || '📌'}</span>
         <div style={{ minWidth: 0 }}>
-          <div style={{ fontSize: 15, fontWeight: 800, color: '#fff', lineHeight: 1.35 }}>{note?.title}</div>
-          <div style={{ fontSize: 11, color: '#777', marginTop: 3 }}>{ago(note?.created_at)}</div>
+          <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--sd-fg-1, #fff)', lineHeight: 1.35 }}>{note?.title}</div>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-4, #777)', marginTop: 3 }}>{ago(note?.created_at)}</div>
         </div>
       </div>
 
@@ -57,26 +57,26 @@ export default function NoteDetail({ note, connections = [], degree2 = [], onBac
             <Avatar person={person} size={44} />
             <div style={{ minWidth: 0 }}>
               <div style={{ fontSize: 15, fontWeight: 800 }}>{person.name}</div>
-              <div style={{ fontSize: 11.5, color: '#aab', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{person.headline || person.company || ''}</div>
+              <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #aab)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{person.headline || person.company || ''}</div>
               <div style={{ fontSize: 11.5, fontWeight: 800, color: TIER[tier] || '#aaa', marginTop: 2 }}>
                 {tier ? `${tier}-tier` : 'Not scored yet'}{Number.isFinite(score) ? ` · ${score.toFixed(1)}` : ''}
               </div>
             </div>
           </div>
           {addedBack && (
-            <div style={{ marginTop: 12, fontSize: 12.5, color: '#ddd', lineHeight: 1.5 }}>
+            <div style={{ marginTop: 12, fontSize: 12.5, color: 'var(--sd-fg-1, #ddd)', lineHeight: 1.5 }}>
               <b>{person.name.split(' ')[0]}</b> added you back
               {via ? <>. You met through <b style={{ color: TIER[via.tier] || '#fff' }}>{via.name}</b>.</> : '.'}
             </div>
           )}
           {!addedBack && via && (
-            <div style={{ marginTop: 12, fontSize: 12.5, color: '#ddd' }}>
+            <div style={{ marginTop: 12, fontSize: 12.5, color: 'var(--sd-fg-1, #ddd)' }}>
               {person.degree === 2 ? 'In the circle of ' : 'You met through '}<b>{via.name}</b>.
             </div>
           )}
           {VALUE[tier] && <div style={{ marginTop: 8, fontSize: 12.5, fontWeight: 700, color: TIER[tier] }}>{VALUE[tier]}</div>}
           {prestige >= 8 && (
-            <div style={{ marginTop: 6, fontSize: 12, color: '#cfd3e6' }}>Works at a top company{person.company ? `, ${person.company}` : ''} (its score: {prestige}).</div>
+            <div style={{ marginTop: 6, fontSize: 12, color: 'var(--sd-fg-2, #cfd3e6)' }}>Works at a top company{person.company ? `, ${person.company}` : ''} (its score: {prestige}).</div>
           )}
           <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 14 }}>
             <button type="button" style={btn} onClick={() => onSelect?.(person)}>Open {person.name.split(' ')[0]}’s card →</button>
@@ -94,13 +94,13 @@ export default function NoteDetail({ note, connections = [], degree2 = [], onBac
 
       {people.length > 1 && (
         <div style={{ marginTop: 16 }}>
-          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1, color: '#6b7090', textTransform: 'uppercase', marginBottom: 8 }}>Who</div>
+          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1, color: 'var(--sd-fg-4, #6b7090)', textTransform: 'uppercase', marginBottom: 8 }}>Who</div>
           {people.slice(0, 12).map((p) => (
             <button key={p.id} type="button" onClick={() => onSelect?.(p)} style={{ ...btn, display: 'flex', gap: 10, alignItems: 'center', width: '100%', marginBottom: 6, fontWeight: 600 }}>
               <Avatar person={p} size={26} />
               <span style={{ minWidth: 0, flex: 1 }}>
-                <span style={{ display: 'block', color: '#fff' }}>{p.name}</span>
-                <span style={{ display: 'block', fontSize: 10.5, color: '#8a8fa8', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.company || p.headline || ''}</span>
+                <span style={{ display: 'block', color: 'var(--sd-fg-1, #fff)' }}>{p.name}</span>
+                <span style={{ display: 'block', fontSize: 10.5, color: 'var(--sd-fg-3, #8a8fa8)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.company || p.headline || ''}</span>
               </span>
               <span style={{ fontSize: 11, fontWeight: 800, color: TIER[p.tier] || '#aaa' }}>{p.tier}</span>
             </button>
@@ -109,10 +109,10 @@ export default function NoteDetail({ note, connections = [], degree2 = [], onBac
       )}
 
       {note?.message && (
-        <div style={{ marginTop: 14, fontSize: 12, color: '#999', lineHeight: 1.55 }}>{note.message}</div>
+        <div style={{ marginTop: 14, fontSize: 12, color: 'var(--sd-fg-3, #999)', lineHeight: 1.55 }}>{note.message}</div>
       )}
       {!person && !people.length && (
-        <div style={{ marginTop: 10, fontSize: 11.5, color: '#667' }}>Nothing more on file about this one.</div>
+        <div style={{ marginTop: 10, fontSize: 11.5, color: 'var(--sd-fg-4, #667)' }}>Nothing more on file about this one.</div>
       )}
     </div>
   );

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

@@ -16,7 +16,7 @@ export default function OnboardingGate({ children }) {
   return (
     <div style={{
       minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
-      background: 'var(--sd-page)', color: '#fff', padding: 24, textAlign: 'center',
+      background: 'var(--sd-page)', color: 'var(--sd-fg-1, #fff)', padding: 24, textAlign: 'center',
       fontFamily: 'var(--sd-font)',
     }}>
       {!ready ? (
@@ -26,9 +26,9 @@ export default function OnboardingGate({ children }) {
           <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>
             Can’t reach Six Degrees’ local server
           </div>
-          <div style={{ color: '#888', fontSize: 14, lineHeight: 1.6 }}>
-            The page loaded but the app behind it is not answering. If you started it
-            from a terminal, check that window for an error, then reload this page.
+          <div style={{ color: 'var(--sd-fg-3, #888)', fontSize: 14, lineHeight: 1.6 }}>
+            The page loaded, but the app behind it isn’t answering. Quit Six Degrees and
+            open it again.
           </div>
         </div>
       )}