// ═══════════════════════════════════════════════════════════════════
// WORKFLOW — the intelligence pipeline, per project.
//   01 Parse & Comprehend  → KB + Knowledge Graph
//   02 Deep Research       → background · cross-checks · market
//   03 Build Report        → compose · human gate · publish
// Reads run state from window.INTEL; renders one run per project.
// ═══════════════════════════════════════════════════════════════════
(function () {
  const I = window.INTEL;
  const SCHEMA = window.REPORT_SCHEMA;
  // a project's asset class — drives the class-specific anatomy (RS-10/11/12)
  const classIdFor = (proj) => (window.AssetClass ? window.AssetClass.of(proj) : (proj.tenant === "saxcap" ? "realEstate" : "equity"));
  const classNameFor = (proj) => (((SCHEMA && SCHEMA.ASSET_CLASSES) || []).find((c) => c.id === classIdFor(proj)) || {}).name || "—";
  const groupsFor = (proj) => (SCHEMA && SCHEMA.groupsForClass ? SCHEMA.groupsForClass(classIdFor(proj)) : (SCHEMA && SCHEMA.GROUPS) || []);

  // ── schema coupling ────────────────────────────────────────────────
  // Every card in the instantiated structure declares the step that
  // fills it. Invert that per project: per step → how many cards.
  const cardFillsFor = (groups) => {
    const m = {};
    groups.forEach((g) => g.subs.forEach((sub) => sub.cards.forEach((c) => {
      const step = c[2];
      const e = m[step] || (m[step] = { cards: 0, groups: new Set() });
      e.cards += 1; e.groups.add(g.id);
    })));
    return m;
  };

  // per-run explicit gaps, by schema group — cards that are PRESENT but
  // carry a named evidence gap. An explicit gap passes the gate; silence
  // (a missing card) does not. Each gap: ref · the sub-section it sits in
  // · what is missing.
  const RUN_GAPS = {
    "RUN-032": { // SAXCAP · Lionsgate — 8 named gaps
      G2: [
        { ref: "G-03", where: "Site & Program",        note: "Coaster IP — builder US Thrill Rides in Ch.11 since Dec 2022; “exclusive rights” unevidenced." },
        { ref: "G-02", where: "Brand & Demand",        note: "Lionsgate Orlando license unverified — LEWO operates in Hengqin only; the 2021 Wallack license lost financing." },
      ],
      G3: [
        { ref: "G-06", where: "Capital Stack & Terms", note: "Sources-and-uses bridge — ~$102.5M between $747.5M cost and $850M raise unaccounted." },
        { ref: "G-04", where: "Structure & Rails",     note: "Issuer SPV / series structure undisclosed — prerequisite for Form D and the token scope." },
        { ref: "G-05", where: "Structure & Rails",     note: "Regulated rails unnamed — no broker-dealer of record, transfer agent or ATS." },
      ],
      G4: [
        { ref: "X-08", where: "Revenue Drivers",       note: "Per-cap inputs $84 / $46 run ~70% above the deck's own cited benchmark ($43.61 / $36.46)." },
      ],
      G5: [
        { ref: "G-01", where: "Control & Entitlements", note: "Land control stack — Skyplex cancelled 17 Oct 2024, site listed for sale; JV not evidenced." },
        { ref: "G-07", where: "Cross-checks",          note: "Primary citations pending — occ / ADR, $94.5B impact and principals' bios are dossier-attributed." },
      ],
    },
    "RUN-016": { // Raisable — 7 named gaps (mirrors the dossier's GAP-01…GAP-07 register)
      G2: [
        { ref: "GAP-03", where: "Go-to-Market",         note: "Alliance execution — TX & Texture at signature; definitive docs circulating, not countersigned." },
      ],
      G3: [
        { ref: "GAP-05", where: "Offering Terms",       note: "Anchor commitment — the round opens cold; no lead to anchor the SAFE ($0 committed)." },
        { ref: "GAP-06", where: "Legal Framework",      note: "Portal + verification provider — no funding portal selected; no 506(c) verification provider contracted." },
      ],
      G4: [
        { ref: "GAP-07", where: "Cap Table & Proceeds", note: "Dilution stack — SAFE ~16.9% + TX founding tier + 10% Class B pool not modeled together." },
        { ref: "GAP-04", where: "Market",               note: "Pool / TAM / SAM sizing states a methodology but cites no sources — treated as assumption." },
      ],
      G5: [
        { ref: "GAP-01", where: "Entity Background",    note: "Not yet incorporated — articles drafted to filing standard but unfiled; no EIN, no statements." },
        { ref: "GAP-02", where: "Compliance",           note: "EIN + bank / escrow account — no account exists; SAFE closing mechanics blocked." },
      ],
    },
  };

  // each step EMITS a named artifact; provenance = the inputs it derives from
  const T = window.WORKFLOW_TEMPLATE;
  const STEP_ARTIFACT = T.STEP_ARTIFACT;

  const PHASES = T.PHASES;

  // ── asset-class branches — extra Deep Research steps per class ────
  const WORKFLOW_BRANCHES = T.RESEARCH;

  // build the phase list for a project, injecting its asset-class branch
  // into Deep Research (02) just before gap synthesis.
  const phasesFor = (proj) => {
    const branch = (WORKFLOW_BRANCHES[classIdFor(proj)] || []).map((s) => ({ ...s, branch: classNameFor(proj) }));
    if (!branch.length) return PHASES;
    return PHASES.map((ph) => {
      if (ph.n !== "02") return ph;
      const steps = [];
      ph.steps.forEach((s) => { if (s.id === "gaps") steps.push(...branch); steps.push(s); });
      return { ...ph, steps };
    });
  };

  // run-state map including branch steps: a branch inherits "done" when
  // the phase's tracked steps are all done, otherwise stays queued.
  const effStepsFor = (proj, phases) => {
    const base = { ...((proj.run && proj.run.steps) || {}) };
    phases.forEach((ph) => {
      const known = ph.steps.map((s) => s.id).filter((id) => base[id] != null);
      const allDone = known.length > 0 && known.every((id) => base[id] === "done");
      ph.steps.forEach((s) => { if (base[s.id] == null) base[s.id] = allDone ? "done" : "queued"; });
    });
    return base;
  };

  const wfMono = (s, extra) => <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--ink-4)", ...extra }}>{s}</span>;

  function PhaseCard({ ph, steps }) {
    const done = ph.steps.filter((s) => steps[s.id] === "done").length;
    const running = ph.steps.some((s) => steps[s.id] === "running");
    const pct = Math.round((done / ph.steps.length) * 100);
    return (
      <div style={{ flex: 1, border: "1px solid var(--rule-hard)", borderTop: "3px solid " + (done === ph.steps.length ? "var(--ok)" : running ? "var(--accent)" : "var(--rule-hard)"), borderRadius: "var(--r-3)", background: "var(--bg)", padding: "13px 15px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
          <span style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 18, color: "var(--ink-4)" }}>{ph.n}</span>
          <window.Pill tone={done === ph.steps.length ? "ok" : running ? "accent" : "neutral"}>{done === ph.steps.length ? "complete" : running ? "running" : "queued"}</window.Pill>
        </div>
        <div style={{ fontFamily: "var(--ui-display)", fontWeight: 600, fontSize: "var(--fs-base)", color: "var(--ink)", marginBottom: 8 }}>{ph.name}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ flex: 1, height: 4, borderRadius: 2, background: "var(--bg-3)", overflow: "hidden" }}>
            <span style={{ display: "block", width: pct + "%", height: "100%", background: done === ph.steps.length ? "var(--ok)" : "var(--accent)", borderRadius: 2 }}></span>
          </span>
          <span style={{ fontFamily: "var(--mono)", fontSize: "10px", fontWeight: 600, color: "var(--ink-3)" }}>{done}/{ph.steps.length}</span>
        </div>
      </div>
    );
  }

  function StepRow({ step, nn, steps, metric, go, cardFills, composeFills }) {
    const status = steps[step.id] || "queued";
    const st = I.STEP_STATUS[status] || I.STEP_STATUS.queued;
    const running = status === "running";
    const art = STEP_ARTIFACT[step.id];
    const emitted = status === "done";
    return (
      <div style={{ display: "grid", gridTemplateColumns: "30px 1.5fr 110px 170px 88px", gap: 12, alignItems: "start", padding: "11px 14px", background: step.gate ? "var(--warn-bg)" : running ? "var(--accent-bg)" : "var(--bg)", borderTop: "1px solid var(--rule-soft)", borderLeft: running ? "2px solid var(--accent)" : "2px solid transparent" }}>
        <span style={{ fontFamily: "var(--mono)", fontWeight: 600, fontSize: "10px", color: "var(--ink-4)", paddingTop: 2 }}>{nn}</span>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
            <span style={{ fontFamily: "var(--ui-display)", fontWeight: 600, fontSize: "var(--fs-sm)", color: "var(--ink)" }}>{step.name}</span>
            {step.gate && <window.Pill tone="warn">human gate</window.Pill>}
            {step.branch && <window.Pill tone="accent">{step.branch} branch</window.Pill>}
          </div>
          <p style={{ margin: 0, fontSize: "var(--fs-xs)", color: "var(--ink-3)", lineHeight: 1.55 }}>{step.desc}</p>
          {art && (
            <div style={{ display: "flex", alignItems: "center", gap: 7, flexWrap: "wrap", marginTop: 6, paddingTop: 6, borderTop: "1px dashed var(--rule-soft)" }}>
              <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.06em", textTransform: "uppercase", color: emitted ? "var(--accent-lo)" : "var(--ink-4)" }}>⧉ {art.id}</span>
              <span style={{ fontFamily: "var(--ui-display)", fontWeight: 600, fontSize: "var(--fs-xs)", color: emitted ? "var(--ink)" : "var(--ink-4)" }}>{art.name}</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", color: "var(--ink-4)" }}>← {art.from}</span>
              {step.composes && composeFills && composeFills[step.id]
                ? <span title="report cards this compose step assembles" style={{ fontFamily: "var(--mono)", fontSize: "8px", letterSpacing: "0.04em", textTransform: "uppercase", color: emitted ? "var(--accent-lo)" : "var(--ink-4)", border: "1px solid " + (emitted ? "var(--accent-bd)" : "var(--rule-hard)"), background: emitted ? "var(--accent-bg)" : "var(--bg-2)", borderRadius: "999px", padding: "1px 7px" }}>assembles {composeFills[step.id].cards} cards · {composeFills[step.id].groups} section{composeFills[step.id].groups > 1 ? "s" : ""}</span>
                : (cardFills[step.id] && <span title="schema cards this step fills" style={{ fontFamily: "var(--mono)", fontSize: "8px", letterSpacing: "0.04em", textTransform: "uppercase", color: emitted ? "var(--accent-lo)" : "var(--ink-4)", border: "1px solid " + (emitted ? "var(--accent-bd)" : "var(--rule-hard)"), background: emitted ? "var(--accent-bg)" : "var(--bg-2)", borderRadius: "999px", padding: "1px 7px" }}>fills {cardFills[step.id].cards} card{cardFills[step.id].cards > 1 ? "s" : ""} · {cardFills[step.id].groups.size} grp</span>)}
              {emitted && art.to && <button onClick={() => go(art.to)} style={{ border: "1px solid var(--accent-bd)", background: "var(--accent-bg)", color: "var(--accent-lo)", borderRadius: "var(--r-1)", padding: "1px 7px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8px", letterSpacing: "0.04em", textTransform: "uppercase" }}>open ↗</button>}
              {!emitted && <window.Pill tone="neutral">pending</window.Pill>}
            </div>
          )}
        </div>
        <div style={{ paddingTop: 2 }}><window.Pill tone={step.gate ? "warn" : "neutral"}>{step.agent}</window.Pill></div>
        <div style={{ fontFamily: "var(--mono)", fontSize: "10px", color: metric ? "var(--ink-2)" : "var(--ink-4)", lineHeight: 1.6, paddingTop: 3 }}>{metric || "—"}</div>
        <div style={{ paddingTop: 2 }}><window.Pill tone={st.tone}>{st.label}</window.Pill></div>
      </div>
    );
  }

  // ── schema coverage — does this run hold a complete set of data? ───
  function CoveragePanel({ proj, run, go }) {
    const groups = groupsFor(proj);
    const gapMap = RUN_GAPS[run.id] || {};
    const stepDone = (step) => run.steps[step] === "done";

    const rows = groups.map((g) => {
      let total = 0, missing = 0;
      g.subs.forEach((sub) => sub.cards.forEach((c) => { total += 1; if (!stepDone(c[2])) missing += 1; }));
      const gaps = gapMap[g.id] || [];
      const gap = Math.min(gaps.length, total - missing);
      const filled = total - missing - gap;
      return { g, label: g.label, total, filled, gap, gaps, missing };
    });
    const sum = rows.reduce((a, r) => ({ total: a.total + r.total, filled: a.filled + r.filled, gap: a.gap + r.gap, missing: a.missing + r.missing }), { total: 0, filled: 0, gap: 0, missing: 0 });
    const composed = stepDone("compose");
    const clear = composed && sum.missing === 0;

    const Bar = ({ r }) => (
      <span style={{ display: "flex", height: 7, borderRadius: 3, overflow: "hidden", background: "var(--bg-3)", width: "100%" }}>
        {r.filled > 0 && <span style={{ width: (r.filled / r.total * 100) + "%", background: "var(--ok)" }}></span>}
        {r.gap > 0 && <span style={{ width: (r.gap / r.total * 100) + "%", background: "var(--warn)" }}></span>}
        {r.missing > 0 && <span style={{ width: (r.missing / r.total * 100) + "%", background: "var(--err)" }}></span>}
      </span>
    );

    return (
      <div style={{ marginBottom: 22 }}>
        <window.SectionHead sub={classNameFor(proj) + " class · every card the Report Schema requires, mapped to the step that fills it — filled · explicit gap (named, passes) · missing (blocks publish)"}>Schema Coverage — RPT-v3</window.SectionHead>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 12, border: "1px solid " + (clear ? "var(--ok)" : "var(--warn)"), borderRadius: "var(--r-3)", background: "var(--bg-2)", padding: "10px 14px" }}>
          <window.Pill tone={clear ? "ok" : composed ? "warn" : "neutral"}>{clear ? "coverage clear" : composed ? "gaps tracked" : "not yet composed"}</window.Pill>
          <span style={{ fontSize: "var(--fs-xs)", color: "var(--ink-2)", lineHeight: 1.5, flex: 1, minWidth: 260 }}>
            {sum.filled} / {sum.total} cards filled · {sum.gap} explicit gap{sum.gap === 1 ? "" : "s"} · {sum.missing} missing — {clear ? "every required card is filled or explicitly gapped; the report may publish." : sum.missing > 0 ? "missing cards block the publish gate." : "compose to populate the matrix."}
          </span>
          <span style={{ display: "inline-flex", gap: 12, flexWrap: "wrap" }}>
            {[["filled", "var(--ok)"], ["gap", "var(--warn)"], ["missing", "var(--err)"]].map(([l, c]) => (
              <span key={l} style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                <span style={{ width: 9, height: 9, borderRadius: 2, background: c }}></span>
                {wfMono(l)}
              </span>
            ))}
          </span>
        </div>
        <div style={{ border: "1px solid var(--rule-hard)", borderRadius: "var(--r-3)", overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "54px 1.4fr 1.2fr 150px 78px", gap: 12, padding: "8px 14px", background: "var(--bg-2)" }}>
            <window.MonoLabel>Group</window.MonoLabel>
            <window.MonoLabel>Section · {classNameFor(proj)}</window.MonoLabel>
            <window.MonoLabel>Coverage</window.MonoLabel>
            <window.MonoLabel>Cards</window.MonoLabel>
            <window.MonoLabel>RS</window.MonoLabel>
          </div>
          {rows.map((r) => (
            <React.Fragment key={r.g.id}>
              <div style={{ display: "grid", gridTemplateColumns: "54px 1.4fr 1.2fr 150px 78px", gap: 12, alignItems: "center", padding: "10px 14px", borderTop: "1px solid var(--rule-soft)", background: "var(--bg)" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: "10px", fontWeight: 600, color: "var(--ink-4)" }}>{r.g.id}</span>
                  {!r.g.req && <span title="optional extension" style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ink-5)" }}></span>}
                </span>
                <span style={{ fontFamily: "var(--ui-display)", fontWeight: 600, fontSize: "var(--fs-sm)", color: "var(--ink)" }}>{r.label}</span>
                <Bar r={r}></Bar>
                <span style={{ fontFamily: "var(--mono)", fontSize: "10px", color: "var(--ink-3)" }}>
                  <span style={{ color: "var(--ok)" }}>{r.filled} filled</span>
                  {r.gap > 0 && <span style={{ color: "var(--warn)" }}> · {r.gap} gap</span>}
                  {r.missing > 0 && <span style={{ color: "var(--err)" }}> · {r.missing} missing</span>}
                </span>
                <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", color: "var(--ink-4)" }}>{r.g.rs.join(" ")}</span>
              </div>
              {r.gaps.length > 0 && (
                <div style={{ padding: "0 14px 10px 66px", background: "var(--bg)", display: "flex", flexDirection: "column", gap: 4 }}>
                  {r.gaps.map((gp) => (
                    <div key={gp.ref} style={{ display: "grid", gridTemplateColumns: "54px 150px 1fr", gap: 10, alignItems: "baseline" }}>
                      <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", fontWeight: 600, letterSpacing: "0.04em", color: "var(--warn)", border: "1px solid var(--warn)", borderRadius: "var(--r-1)", padding: "0px 6px", textAlign: "center", background: "var(--warn-bg)" }}>{gp.ref}</span>
                      <span style={{ fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--ink-4)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{gp.where}</span>
                      <span style={{ fontSize: "var(--fs-xs)", color: "var(--ink-3)", lineHeight: 1.5 }}>{gp.note}</span>
                    </div>
                  ))}
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginTop: 10 }}>
          <p style={{ margin: 0, fontFamily: "var(--mono)", fontSize: "9px", letterSpacing: "0.06em", color: "var(--ink-4)", lineHeight: 1.7, flex: 1, minWidth: 280 }}>
            Coverage is computed from run state × the schema's per-card step map — not asserted. Gaps are the open evidence items (RS-07); the review gate signs off on them explicitly.
          </p>
          <button onClick={() => go("report")} style={{ border: "1px solid var(--accent-bd)", background: "var(--accent-bg)", borderRadius: "var(--r-1)", padding: "5px 10px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--accent-lo)" }}>view report ↗</button>
        </div>
      </div>
    );
  }

  function IntelWorkflow({ proj, tenant, go }) {
    const run = proj.run;
    const stage = I.STAGES[proj.stage];
    const cardFills = cardFillsFor(groupsFor(proj));
    const phases = phasesFor(proj);
    // per compose sub-step → the report cards it assembles (its groups × cards)
    const composeFills = (() => {
      const grp = groupsFor(proj); const out = {};
      phases.forEach((ph) => ph.steps.forEach((s) => {
        if (!s.composes) return;
        const gset = new Set(s.composes); let cards = 0, gn = 0;
        grp.forEach((g) => { if (gset.has(g.id)) { gn += 1; g.subs.forEach((sub) => { cards += sub.cards.length; }); } });
        out[s.id] = { cards, groups: gn };
      }));
      return out;
    })();
    const effSteps = effStepsFor(proj, phases);
    let nn = 0;
    return (
      <div>
        <window.PageHead eyebrow={tenant.name + " · " + proj.name} title="Intelligence Workflow"
          sub="One pipeline, three phases: parse the uploaded artifacts into a Knowledge Base and Knowledge Graph, research the facts against the outside world, then compose the Intelligence Report — gated on a human before it publishes."
          right={
            <div style={{ textAlign: "right" }}>
              {wfMono([("run " + run.id), run.trigger, ("started " + run.started)].join("  ·  "), { color: "var(--ink-3)" })}
            </div>
          }>
        </window.PageHead>

        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap", marginBottom: 16, border: "1px solid var(--rule-hard)", borderRadius: "var(--r-3)", background: "var(--bg-2)", padding: "10px 14px" }}>
          <window.Pill tone={stage.tone}>{stage.label}</window.Pill>
          <window.Pill tone="neutral">{classNameFor(proj)} class</window.Pill>
          <span style={{ fontSize: "var(--fs-xs)", color: "var(--ink-2)", lineHeight: 1.5, flex: 1, minWidth: 260 }}>
            {proj.stats.stepsDone} of {proj.stats.stepsTotal} steps complete · {stage.note}{run.version !== "—" ? " · report " + run.version : ""}{run.reviewer ? " · reviewer: " + run.reviewer : ""}
          </span>
        </div>

        <div style={{ display: "flex", gap: 14, marginBottom: 22 }}>
          {phases.map((ph) => <PhaseCard key={ph.n} ph={ph} steps={effSteps}></PhaseCard>)}
        </div>

        <CoveragePanel proj={proj} run={run} go={go}></CoveragePanel>

        {phases.map((ph) => (
          <div key={ph.n} style={{ marginBottom: 20 }}>
            <window.SectionHead sub={ph.goal}>{ph.n} · {ph.name}</window.SectionHead>
            <div style={{ border: "1px solid var(--rule-hard)", borderRadius: "var(--r-3)", overflow: "hidden" }}>
              <div style={{ display: "grid", gridTemplateColumns: "30px 1.5fr 110px 170px 88px", gap: 12, padding: "8px 14px", background: "var(--bg-2)" }}>
                <window.MonoLabel>#</window.MonoLabel>
                <window.MonoLabel>Step</window.MonoLabel>
                <window.MonoLabel>Agent</window.MonoLabel>
                <window.MonoLabel>Output</window.MonoLabel>
                <window.MonoLabel>Status</window.MonoLabel>
              </div>
              {ph.steps.map((s) => { nn += 1; return <StepRow key={s.id} step={s} nn={String(nn).padStart(2, "0")} steps={effSteps} metric={(proj.metrics || {})[s.id]} go={go} cardFills={cardFills} composeFills={composeFills}></StepRow>; })}
            </div>
          </div>
        ))}

        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <p style={{ margin: 0, fontFamily: "var(--mono)", fontSize: "9px", letterSpacing: "0.06em", color: "var(--ink-4)", lineHeight: 1.7, flex: 1, minWidth: 280 }}>
            Inputs come from the Artifact Registry · outputs version into the Document Library · the published report renders on the Intelligence page.
          </p>
          <button onClick={() => go("artifacts")} style={{ border: "1px solid var(--rule-hard)", background: "var(--bg)", borderRadius: "var(--r-1)", padding: "5px 10px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)" }}>registry</button>
          <button onClick={() => go("library")} style={{ border: "1px solid var(--rule-hard)", background: "var(--bg)", borderRadius: "var(--r-1)", padding: "5px 10px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-3)" }}>library</button>
          <button onClick={() => go("report")} style={{ border: "1px solid var(--accent-bd)", background: "var(--accent-bg)", borderRadius: "var(--r-1)", padding: "5px 10px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--accent-lo)" }}>intelligence ↗</button>
        </div>
      </div>
    );
  }

  window.IntelWorkflow = IntelWorkflow;
})();
