Function bodies 615 total

function Section({ label, color, children }) {
  return (
    <div style={{ marginBottom: 28 }}>
      <div style={{ fontFamily: font.mono, fontSize: 9, color: color || C.creamDim, letterSpacing: '0.12em', marginBottom: 12, paddingBottom: 8, borderBottom: `1px solid ${C.border}` }}>
        {label}
      </div>
      {children}
    </div>
  );
}

function LogCard({ log }) {
  const [open, setOpen] = useState(false);

  return (
    <div style={{
      background: C.card,
      border: `1px solid ${log.status === 'COMPLETE' ? C.crimsonMid : C.border}`,
      borderLeft: `3px solid ${log.status === 'COMPLETE' ? C.crimson : C.borderMed}`,
      borderRadius: 8, overflow: 'hidden',
    }}>
      {/* HEADER */}
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', background: 'none', border: 'none', cursor: 'pointer',
          padding: '22px 26px', textAlign: 'left',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16,
        }}
      >
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10, flexWrap: 'wrap' }}>
            <span style={{ fontFamily: font.mono, fontSize: 11, color: C.crimson }}>ARTIFACT {log.week}</span>
            <span style={{ fontFamily: font.mono, fontSize: 

export default function CanonPressTuningLog() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <div style={{ maxWidth: 860, margin: '0 auto', padding: '56px 24px 80px' }}>

        <div style={{ marginBottom: 48 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: '0.15em', marginBottom: 12 }}>CANONPRESS · TUNING LOG</div>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(28px, 5vw, 42px)', fontWeight: 800, margin: '0 0 12px', lineHeight: 1.1 }}>Prompt Tuning Log</h1>
          <p style={{ fontFamily: font.body, fontSize: 15, color: C.creamMid, margin: 0, maxWidth: 580, lineHeight: 1.7 }}>
            Every week, Marcus Grey (Seat 1008) analyzes the nomination prompt before and after it runs — then exchanges with the nominator about what changed and why. This is the calibration record.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '

function PullQuote({ text, color }) {
  return (
    <div style={{
      borderLeft: `3px solid ${color}`,
      paddingLeft: 20,
      margin: '24px 0',
      background: `${color}08`,
      padding: '14px 20px',
      borderRadius: '0 6px 6px 0',
    }}>
      <div style={{ fontFamily: font.body, fontSize: 16, fontStyle: 'italic', color: C.cream, lineHeight: 1.65 }}>{text}</div>
    </div>
  );
}

function TimelineAct({ act, index }) {
  return (
    <div style={{ display: 'flex', gap: 0, marginBottom: 56, position: 'relative' }}>
      {/* spine dot */}
      <div style={{ width: 80, flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 4 }}>
        <div style={{ width: 12, height: 12, borderRadius: '50%', background: act.color, boxShadow: `0 0 16px ${act.color}60`, flexShrink: 0 }} />
        {index < acts.length - 1 && <div style={{ width: 1, flex: 1, background: C.border, marginTop: 8 }} />}
      </div>
      {/* content */}
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: font.mono, fontSize: 9, color: act.color, letterSpacing: '0.18em', marginBottom: 6 }}>{act.num}</div>
        <h2 style={{ fontFamily: font.display, fontSize: 22, fontWeight: 700, color: C.cream, margin: '0 0 16px', lineHeight: 1.2 }}>{act.title}</h2>
        <p style={{ fontFamily: font.body, fontSize: 16, color: C.creamMid, lineHeight: 1.85, margin:

export default function TheConsolidation() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <BackButton href="/chronicle" label="Chronicle" />
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '64px 24px 100px' }}>

        {/* BREADCRUMB */}
        <div style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 48 }}>
          CHRONICLE · DDL · THE OPERATOR
        </div>

        {/* HERO */}
        <div style={{ marginBottom: 56 }}>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(32px, 6vw, 54px)', fontWeight: 700, color: C.cream, margin: '0 0 20px', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
            The Consolidation
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 18, color: C.creamMid, lineHeight: 1.8, maxWidth: 620, margin: 0 }}>
            The episode where the operator stops building forward and d

function Counter({ end, duration = 2000, suffix = '' }) {
  const [count, setCount] = useState(0);
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
      { threshold: 0.3 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!visible) return;
    const start = 0;
    const startTime = performance.now();
    const animate = (now) => {
      const elapsed = now - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setCount(Math.floor(start + (end - start) * eased));
      if (progress < 1) requestAnimationFrame(animate);
    };
    requestAnimationFrame(animate);
  }, [visible, end, duration]);

  return <span ref={ref}>{count.toLocaleString()}{suffix}</span>;
}

function CalibrationBar({ round, label, tokens, score, delay = 0 }) {
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
      { threshold: 0.3 }
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} style={{ marginBottom: 28 }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 8,
      }}>
        <div>
          <span style={{
            fontFamily: FONTS.mono, fontSize: 13, color: COLORS.accent,
            marginRight: 12,
          }}>R{round}</span>
          <span style={{ fontFamily: FONTS.body, fontSize: 15, color: COLORS.text }}>
            {label}
          </span>
        </div>
        <span style={{
          fontFamily: FONTS.mono, fontSize: 14, color:

function Terminal({ children, title = 'dex-rag' }) {
  return (
    <div style={{
      background: COLORS.bg, border: `1px solid ${COLORS.border}`,
      borderRadius: 8, overflow: 'hidden', marginBottom: 32,
    }}>
      <div style={{
        padding: '10px 16px', background: COLORS.surface,
        borderBottom: `1px solid ${COLORS.border}`,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#FF5F57' }} />
        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#FEBC2E' }} />
        <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#28C840' }} />
        <span style={{
          fontFamily: FONTS.mono, fontSize: 12, color: COLORS.textDim, marginLeft: 8,
        }}>{title}</span>
      </div>
      <pre style={{
        margin: 0, padding: 20, fontFamily: FONTS.mono, fontSize: 13,
        lineHeight: 1.7, color: COLORS.text, overflowX: 'auto',
   

function Stat({ label, value, suffix = '' }) {
  return (
    <div style={{
      padding: '20px 24px', background: COLORS.surface,
      border: `1px solid ${COLORS.border}`, borderRadius: 8,
    }}>
      <div style={{
        fontFamily: FONTS.mono, fontSize: 28, fontWeight: 700,
        color: COLORS.accent, marginBottom: 6,
      }}>
        {typeof value === 'number' ? <Counter end={value} suffix={suffix} /> : value}
      </div>
      <div style={{
        fontFamily: FONTS.body, fontSize: 14, color: COLORS.textMuted,
      }}>{label}</div>
    </div>
  );
}

function Divider() {
  return (
    <div style={{
      width: '100%', height: 1, background: COLORS.border,
      margin: '64px 0',
    }} />
  );
}

export default function AutoCouncilPage() {
  const [activeLayer,setActiveLayer]=useState<number|null>(null);
  const [showAgents,setShowAgents]=useState(false);

  return(
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&display=swap');
        .ac-root{background:#0d1117;color:#c9d1d9;font-family:'JetBrains Mono',monospace;min-height:100vh;}
        .ac-layer{border:1px solid #30363d;border-radius:8px;padding:20px 24px;cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden;}
        .ac-layer:hover{border-color:#58a6ff;background:#161b22;}
        .ac-layer.active{border-color:#58a6ff;background:#1c2128;}
        .ac-layer::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--lc);opacity:0;transition:opacity 0.3s;}
        .ac-layer.active::before,.ac-layer:hover::before{opacity:1;}
        .ac-agent{backgrou

export default function Page() {
  const content = fs.readFileSync(
    path.join(process.cwd(), 'public/council/BRF-council-naming-std-ALL-20260301.md'),
    'utf-8'
  );

  return (
    <div style={{
      maxWidth: 800, margin: '0 auto', padding: '48px 24px',
      fontFamily: "'Source Serif 4', Georgia, serif",
      color: '#F5F1EB', background: '#0D1B2A', minHeight: '100vh',
    }}>
      <pre style={{
        whiteSpace: 'pre-wrap', wordWrap: 'break-word',
        fontFamily: "'JetBrains Mono', monospace", fontSize: 13,
        lineHeight: 1.7, color: 'rgba(245,241,235,0.7)',
      }}>
        {content}
      </pre>
    </div>
  );
}

export default function Page() {
  return <PreviewFrame src="/preview/council-calibration-faq.html" title="Council Calibration FAQ" />;
}

function FadeIn({ children, delay = 0, style = {} }: FadeInProps) {
  const [v, setV] = useState(false);
  useEffect(() => { const t = setTimeout(() => setV(true), delay); return () => clearTimeout(t); }, [delay]);
  return <div style={{ opacity: v ? 1 : 0, transform: v ? 'translateY(0)' : 'translateY(18px)', transition: 'opacity 0.5s ease, transform 0.5s ease', ...style }}>{children}</div>;
}

export default function CouncilHub() {
  const [hovered, setHovered] = useState<string | null>(null);

  return (
    <div style={{ padding: '100px 24px 48px', maxWidth: 1060, margin: '0 auto' }}>
      <FadeIn>
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: '0.65rem', letterSpacing: '0.14em', textTransform: 'uppercase', color: '#B23531', marginBottom: 12 }}>DDL Governance</div>
          <h1 style={{ fontFamily: 'Space Grotesk, sans-serif', fontSize: 'clamp(2rem, 5vw, 3rem)', fontWeight: 700, color: '#F5F1EB', lineHeight: 1.15, marginBottom: 12 }}>The Council</h1>
          <p style={{ fontFamily: 'Source Serif 4, serif', fontSize: '1.1rem', color: 'rgba(245,241,235,0.5)', lineHeight: 1.6, maxWidth: 600 }}>
            Nine AI models. Independent evaluation. Convergent analysis. DDL&rsquo;s multi-model governance
            layer — where architecture decisions get stress-tested across cognitive styles.
          <

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'chatgpt');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'claude');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'copilot');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'deepseek');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'gemini');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'grok');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'lechat');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'meta-ai');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

export default function CouncilProfilesPage() {
  const [hoveredSlug, setHoveredSlug] = useState<string | null>(null);

  return (
    <div style={{ padding: '100px 24px 32px', maxWidth: 1200, margin: '0 auto' }}>
      {/* Header */}
      <div style={{ marginBottom: 64, textAlign: 'center' }}>
        <p style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          letterSpacing: 4,
          textTransform: 'uppercase' as const,
          color: '#B23531',
          marginBottom: 12,
        }}>
          DDL Council
        </p>
        <h1 style={{
          fontFamily: "'Space Grotesk', sans-serif",
          fontSize: 'clamp(32px, 5vw, 52px)',
          fontWeight: 700,
          color: '#F5F1EB',
          marginBottom: 16,
          lineHeight: 1.1,
        }}>
          Council Member Profiles
        </h1>
        <p style={{
          fontFamily: "'Source Serif 4', serif",
          fontSize: 18,
          color: 'rgba(245, 241, 235, 0.6)',

export default function Page() {
  const idx = councilMembers.findIndex(m => m.slug === 'perplexity');
  const member = councilMembers[idx];
  const prev = idx > 0 ? councilMembers[idx - 1] : undefined;
  const next = idx < councilMembers.length - 1 ? councilMembers[idx + 1] : undefined;

  if (!member) return <div style={{ padding: '100px 24px 32px', color: '#F5F1EB' }}>Profile not found.</div>;

  return <ProfileDetail member={member} prevMember={prev} nextMember={next} />;
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div style={{ marginBottom: 48 }}>
      <h2 style={{
        fontFamily: "'Space Grotesk', sans-serif",
        fontSize: 22,
        fontWeight: 600,
        color: '#F5F1EB',
        marginBottom: 20,
        paddingBottom: 10,
        borderBottom: '1px solid rgba(178, 53, 49, 0.2)',
        display: 'flex',
        alignItems: 'center',
        gap: 10,
      }}>
        <span style={{ color: '#B23531', fontSize: 14 }}>◆</span>
        {title}
      </h2>
      {children}
    </div>
  );
}

function BulletList({ items, accent }: { items: string[]; accent?: boolean }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' as const, gap: 10 }}>
      {items.map((item, i) => (
        <div key={i} style={{
          display: 'flex',
          alignItems: 'flex-start',
          gap: 10,
        }}>
          <span style={{
            color: accent ? '#97072F' : '#B23531',
            fontSize: 8,
            marginTop: 7,
            flexShrink: 0,
          }}>●</span>
          <span style={{
            fontFamily: "'Source Serif 4', serif",
            fontSize: 15,
            color: 'rgba(245, 241, 235, 0.8)',
            lineHeight: 1.7,
          }}>
            {item}
          </span>
        </div>
      ))}
    </div>
  );
}

function TagPill({ label }: { label: string }) {
  return (
    <span style={{
      display: 'inline-block',
      padding: '5px 14px',
      borderRadius: 20,
      background: 'rgba(178, 53, 49, 0.1)',
      border: '1px solid rgba(178, 53, 49, 0.15)',
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: 'rgba(245, 241, 235, 0.7)',
      letterSpacing: 0.5,
    }}>
      {label}
    </span>
  );
}

function AnalogCard({ name, type, url }: { name: string; type: 'real' | 'fictional'; url?: string }) {
  const [hovered, setHovered] = useState(false);
  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        padding: '14px 18px',
        background: hovered ? 'rgba(178, 53, 49, 0.06)' : 'rgba(245, 241, 235, 0.02)',
        border: `1px solid ${hovered ? 'rgba(178, 53, 49, 0.2)' : 'rgba(245, 241, 235, 0.05)'}`,
        borderRadius: 8,
        transition: 'all 0.2s ease',
      }}
    >
      <span style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 9,
        letterSpacing: 2,
        textTransform: 'uppercase' as const,
        color: type === 'real' ? '#B23531' : '#97072F',
        display: 'block',
        marginBottom: 4,
      }}>
        {type === 'real' ? 'Real' : 'Fictional'}
      </span>
      {url ? (
        <a href={url} target="_blank" rel="noopener noreferrer" style={{
 

export default function ProfileDetail({
  member,
  prevMember,
  nextMember,
}: {
  member: CouncilMember;
  prevMember?: CouncilMember;
  nextMember?: CouncilMember;
}) {
  return (
    <div style={{ padding: '100px 24px 32px', maxWidth: 900, margin: '0 auto' }}>
      {/* Breadcrumb */}
      <div style={{ marginBottom: 32 }}>
        <Link
          href="/council/profiles"
          style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11,
            letterSpacing: 2,
            color: 'rgba(245, 241, 235, 0.4)',
            textDecoration: 'none',
          }}
        >
          ← All Profiles
        </Link>
      </div>

      {/* Hero */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: 32,
        marginBottom: 48,
        flexWrap: 'wrap' as const,
      }}>
        <div style={{
          width: 140,
          height: 140,
          borderRadius: '50%',
          overflow: 'hidden',
          flexShri

function SectionHead({ num, title, color = C.crimson }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, marginTop: 36 }}>
      <div style={{ width: 28, height: 28, borderRadius: 5, background: color + "20", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: font.body, fontSize: 14, fontWeight: 600, color }}>{num}</div>
      <span style={{ fontFamily: font.display, fontSize: 17, fontWeight: 700, color: C.cream }}>{title}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function Quote({ text, source, color = C.crimson }) {
  return (
    <div style={{ borderLeft: `2px solid ${color}`, paddingLeft: 14, margin: "12px 0" }}>
      <p style={{ fontFamily: font.body, fontSize: 13, color: C.creamHigh, lineHeight: 1.7, fontStyle: "italic" }}>"{text}"</p>
      {source && <p style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", marginTop: 4, textTransform: "uppercase" }}>— {source}</p>}
    </div>
  );
}

function ModelBadge({ model, small }) {
  const m = models.find(x => x.model === model || x.id === model || x.name === model);
  if (!m) return null;
  return (
    <span style={{ fontFamily: font.mono, fontSize: small ? 9 : 10, fontWeight: 600, padding: small ? "1px 6px" : "2px 8px", borderRadius: 3, background: m.color + "20", color: m.color, letterSpacing: "0.04em" }}>{m.model}</span>
  );
}

function ReviewView({ review: r }) {
  const [expandedModel, setExpandedModel] = useState(null);

  return (
    <div>
      <div style={{ marginBottom: 24 }}>
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.crimson, letterSpacing: "0.2em", textTransform: "uppercase", marginBottom: 6 }}>Council Review #{r.slug}</div>
        <h2 style={{ fontFamily: font.display, fontSize: 20, fontWeight: 700, color: C.cream, marginBottom: 4 }}>{r.title}</h2>
        <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim }}>{r.date} · {r.responses.filter(x => x.wordCount > 0).length} responses · {r.responses.reduce((a, b) => a + b.wordCount, 0).toLocaleString()} words total</div>
      </div>

      <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 6, padding: 16, marginBottom: 20 }}>
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.crimson, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 8 }}>Dispatch<

export default function CouncilReviews2to4() {
  const [tab, setTab] = useState("review2");

  const tabs = [
    { id: "review2", label: "#2 — STD-0066" },
    { id: "review3", label: "#3 — Heavy FAQ" },
    { id: "review4", label: "#4 — DexLanguage" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream }}>
      <div style={{ maxWidth: 780, margin: "0 auto", padding: "40px 24px 56px" }}>
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <p style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.3em", textTransform: "uppercase", marginBottom: 8 }}>DDL Council · Reviews #2–4</p>
          <h1 style={{ fontFamily: font.display, fontSize: 24, fontWeight: 700, color: C.cream, lineHeight: 1.2, marginBottom: 6 }}>Three Sessions. Twenty-Six Responses. Synthesized.</h1>
          <p style={{ fontFamily: font.body, fontSize: 15, color: C.creamMid, fontStyle: "italic" }}>Naming conventions, calibration base

function SectionHead({ label, color = C.crimson }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20, marginTop: 32 }}>
      <div style={{ width: 28, height: 28, borderRadius: 5, background: color + "20", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ width: 8, height: 8, borderRadius: 2, background: color }} />
      </div>
      <span style={{ fontFamily: font.mono, fontSize: 11, letterSpacing: "0.15em", color: C.creamMid, textTransform: "uppercase" }}>{label}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function ModelBadge({ modelId, showPersona = false }) {
  const m = models[modelId];
  if (!m) return null;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
      <span style={{ fontFamily: font.mono, fontSize: 10, padding: "3px 8px", borderRadius: 3, background: m.color + "18", color: m.color, letterSpacing: "0.04em" }}>
        {m.name}
      </span>
      {showPersona && (
        <span style={{ fontFamily: font.body, fontSize: 11, color: C.creamDim, fontStyle: "italic" }}>{m.persona}</span>
      )}
    </span>
  );
}

function TierBadge({ tier, label }) {
  const colors = { 1: C.green, 2: C.amber, 3: C.violet };
  const c = colors[tier] || C.creamDim;
  return (
    <span style={{ fontFamily: font.mono, fontSize: 9, padding: "2px 7px", borderRadius: 3, background: c + "18", color: c, letterSpacing: "0.06em" }}>
      T{tier} · {label}
    </span>
  );
}

function Quote({ text, source }) {
  return (
    <div style={{ borderLeft: `2px solid ${C.crimson}`, paddingLeft: 14, margin: "10px 0" }}>
      <p style={{ fontFamily: font.body, fontSize: 13, color: C.creamHigh, lineHeight: 1.6, fontStyle: "italic", margin: 0 }}>"{text}"</p>
      {source && <p style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, marginTop: 4, letterSpacing: "0.06em" }}>— {source}</p>}
    </div>
  );
}

function StatBlock({ items }) {
  return (
    <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 20 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 6, padding: "12px 16px", flex: "1 1 120px", minWidth: 100 }}>
          <div style={{ fontFamily: font.mono, fontSize: 22, fontWeight: 700, color: C.cream, lineHeight: 1 }}>{item.value}</div>
          <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 4 }}>{item.label}</div>
        </div>
      ))}
    </div>
  );
}

function ResponseCard({ response }) {
  const [open, setOpen] = useState(false);
  const m = models[response.id];
  if (!m) return null;

  return (
    <div style={{ background: C.card, border: `1px solid ${open ? m.color + "30" : C.border}`, borderRadius: 7, marginBottom: 6, transition: "border-color 0.2s" }}>
      <button
        onClick={() => setOpen(!open)}
        style={{ width: "100%", padding: "14px 18px", background: "none", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: 12, textAlign: "left" }}
      >
        <div style={{ width: 6, height: 6, borderRadius: 2, background: m.color, flexShrink: 0 }} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span style={{ fontFamily: font.mono, fontSize: 12, fontWeight: 600, color: m.color }}>{m.name}</span>
            <span style={{ fontFamily: font.body, fontSize: 11, color: C.creamDim, fontStyle

function ConvergenceBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "14px 18px", display: "flex", gap: 14, alignItems: "flex-start" }}>
          <div style={{ fontFamily: font.mono, fontSize: 16, fontWeight: 700, color: C.green, flexShrink: 0, minWidth: 36, textAlign: "center" }}>{item.count}</div>
          <div>
            <div style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream, marginBottom: 3 }}>{item.point}</div>
            <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamDim, lineHeight: 1.6 }}>{item.detail}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function DivergenceBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 7, padding: "16px 18px" }}>
          <div style={{ fontFamily: font.display, fontSize: 14, fontWeight: 600, color: C.amber, marginBottom: 12 }}>{item.topic}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {item.positions.map((pos, j) => (
              <div key={j} style={{ paddingLeft: 12, borderLeft: `2px solid ${j === 0 ? C.green : j === 1 ? C.amber : C.violet}30` }}>
                <div style={{ fontFamily: font.mono, fontSize: 10, color: j === 0 ? C.green : j === 1 ? C.amber : C.violet, letterSpacing: "0.06em", marginBottom: 4 }}>
                  {pos.camp}
                </div>
                <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 4 }}>
              

function TierBlock({ tiers }) {
  const tierColors = { 1: C.green, 2: C.amber, 3: C.violet };
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {tiers.groups.map((group, i) => (
        <div key={i} style={{ background: C.card, border: `1px solid ${(tierColors[group.tier] || C.creamDim)}30`, borderRadius: 7, padding: "14px 18px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <span style={{ fontFamily: font.mono, fontSize: 20, fontWeight: 700, color: tierColors[group.tier] }}>T{group.tier}</span>
            <span style={{ fontFamily: font.display, fontSize: 13, fontWeight: 600, color: C.cream }}>{group.label}</span>
          </div>
          <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginBottom: 8 }}>
            {group.models.map(mid => <ModelBadge key={mid} modelId={mid} />)}
          </div>
          <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamDim, 

function BlindSpotBlock({ items }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      {items.map((item, i) => (
        <div key={i} style={{ background: C.crimsonFaint, border: `1px solid ${C.crimson}25`, borderRadius: 6, padding: "12px 16px", display: "flex", gap: 10, alignItems: "flex-start" }}>
          <span style={{ fontFamily: font.mono, fontSize: 12, color: C.crimson, flexShrink: 0, marginTop: 1 }}>∅</span>
          <p style={{ fontFamily: font.body, fontSize: 12, color: C.creamMid, lineHeight: 1.6 }}>{item}</p>
        </div>
      ))}
    </div>
  );
}

function AccentLedgerView({ entries }) {
  const tagColors = {
    signature: C.blue,
    tic: C.amber,
    gravity: C.green,
    quirk: C.violet,
    blindspot: C.crimson,
    partner: C.teal,
    divergence: C.rose,
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      {entries.map((entry, i) => {
        const m = models[entry.model];
        return (
          <div key={i} style={{ display: "flex", gap: 8, alignItems: "flex-start", padding: "6px 10px", background: i % 2 === 0 ? "transparent" : C.creamGhost, borderRadius: 3 }}>
            <span style={{ fontFamily: font.mono, fontSize: 9, color: m?.color || C.creamDim, minWidth: 62, flexShrink: 0, paddingTop: 2 }}>{m?.name || entry.model}</span>
            <span style={{ fontFamily: font.mono, fontSize: 8, padding: "2px 5px", borderRadius: 2, background: (tagColors[entry.tag] || C.creamDim) + "18", color: tagColors[entry.tag] || C.creamDim, flexShrink: 0, letterSpacing: "0.04em" }}>{entry.ta

export default function CouncilReview05() {
  const [tab, setTab] = useState("synthesis");
  const tabs = [
    { id: "synthesis", label: "Synthesis" },
    { id: "responses", label: "Responses (9)" },
    { id: "accents", label: "Accent Ledger" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: C.navy, color: C.cream, padding: "32px 24px 48px" }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>

        {/* ── Header ── */}
        <div style={{ marginBottom: 28 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.crimson, letterSpacing: "0.25em", textTransform: "uppercase", marginBottom: 6 }}>
            DDL Council Review #{review.number}
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 26, fontWeight: 700, color: C.cream, marginBottom: 4, lineHeight: 1.2 }}>
            {review.title}
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.6, maxWidth: 640

function SectionHead({ label, color = C.crimson }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20, marginTop: 32 }}>
      <div style={{ width: 28, height: 28, borderRadius: 5, background: color + "20", display: "flex", alignItems: "center", justifyContent: "center" }}>
        <div style={{ width: 8, height: 8, borderRadius: 2, background: color }} />
      </div>
      <span style={{ fontFamily: font.mono, fontSize: 11, letterSpacing: "0.15em", color: C.creamMid, textTransform: "uppercase" }}>{label}</span>
      <div style={{ flex: 1, height: 1, background: C.border }} />
    </div>
  );
}

function ModelBadge({ modelId }) {
  const m = models[modelId];
  if (!m) return null;
  return (
    <span style={{ fontFamily: font.mono, fontSize: 10, padding: "3px 8px", borderRadius: 3, background: m.color + "18", color: m.color, letterSpacing: "0.04em" }}>
      {m.name}
    </span>
  );
}