/* Intel Brief — sticky left-nav with section anchors. Internal/Client toggle. */
const { TOKENS: T_BRIEF, Tag: TagBrief, Tier: TierBrief, Severity: SeverityBrief, CopyBtn: CopyBtnBrief, InternalOnly, useViewport: useViewportBrief } = window.IE_UI;
const { useState: useStateBrief, useEffect: useEffectBrief, useRef: useRefBrief } = React;

const SECTIONS = [
  { id: "summary", label: "Diagnostic Summary", num: "01" },
  { id: "thesis-line", label: "Thesis Line", num: "02" },
  { id: "thesis", label: "Search Thesis", num: "03" },
  { id: "context", label: "Company & Role", num: "04" },
  { id: "market", label: "Market State Map", num: "05" },
  { id: "archetypes", label: "Candidate Archetypes", num: "06" },
  { id: "risks", label: "Risks", num: "07" },
  { id: "assumptions", label: "Assumptions to Validate", num: "08" },
  { id: "plan", label: "10-Day Operating Plan", num: "09" },
  { id: "stakeholder", label: "Stakeholder Notes", num: "10", internal: true },
  { id: "stop", label: "Stop Conditions", num: "11", internal: true },
  { id: "outreach", label: "Outreach Plays", num: "12", internal: true },
  { id: "kickoff-q", label: "Kickoff Questions", num: "13", internal: true },
];

function LeftNav({ activeId, onJump, surface, density }) {
  const items = SECTIONS.filter(s => surface === "internal" || !s.internal);
  return (
    <nav style={{
      position: "sticky", top: 86, alignSelf: "flex-start",
      width: 220, flexShrink: 0,
      paddingRight: 16, borderRight: `1px solid ${T_BRIEF.borderSoft}`,
      maxHeight: "calc(100vh - 110px)", overflowY: "auto",
    }}>
      <div style={{
        fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.amberDim,
        letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, marginBottom: 10,
      }}>Sections</div>
      {items.map(s => {
        const active = activeId === s.id;
        return (
          <button key={s.id} onClick={() => onJump(s.id)} style={{
            display: "flex", alignItems: "baseline", gap: 10,
            width: "100%", textAlign: "left", padding: density === "compact" ? "5px 8px" : "7px 8px",
            background: active ? "rgba(233,185,73,.08)" : "transparent",
            border: "none", borderLeft: `2px solid ${active ? T_BRIEF.amber : "transparent"}`,
            color: active ? T_BRIEF.text : T_BRIEF.textDim,
            cursor: "pointer", fontSize: 12.5, lineHeight: 1.4,
            fontFamily: T_BRIEF.sans, fontWeight: active ? 600 : 400,
            transition: "background .12s, color .12s",
          }}
            onMouseEnter={e => { if (!active) e.currentTarget.style.color = T_BRIEF.text; }}
            onMouseLeave={e => { if (!active) e.currentTarget.style.color = T_BRIEF.textDim; }}>
            <span style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: active ? T_BRIEF.amber : T_BRIEF.mutedDeep, flexShrink: 0 }}>{s.num}</span>
            <span style={{ flex: 1 }}>{s.label}</span>
            {s.internal && (
              <span style={{ fontFamily: T_BRIEF.mono, fontSize: 9, color: T_BRIEF.amberDim, letterSpacing: ".08em" }}>INT</span>
            )}
          </button>
        );
      })}
    </nav>
  );
}

function SurfaceToggle({ surface, setSurface }) {
  return (
    <div style={{
      display: "inline-flex", background: T_BRIEF.panel,
      border: `1px solid ${T_BRIEF.border}`, borderRadius: 4, overflow: "hidden",
    }}>
      {[
        { id: "internal", label: "Internal" },
        { id: "client",   label: "Client-facing" },
      ].map(opt => (
        <button key={opt.id} onClick={() => setSurface(opt.id)} style={{
          background: surface === opt.id ? T_BRIEF.amber : "transparent",
          color: surface === opt.id ? "#1a1a1a" : T_BRIEF.textDim,
          border: "none", padding: "7px 14px", fontFamily: T_BRIEF.sans, fontSize: 12,
          fontWeight: surface === opt.id ? 600 : 500, cursor: "pointer",
          letterSpacing: ".01em",
        }}>{opt.label}</button>
      ))}
    </div>
  );
}

function SectionHeader({ id, num, eyebrow, title, copyText }) {
  return (
    <div id={id} style={{
      display: "flex", justifyContent: "space-between", alignItems: "flex-end",
      paddingBottom: 10, marginBottom: 16, borderBottom: `1px solid ${T_BRIEF.borderSoft}`,
      scrollMarginTop: 86,
    }}>
      <div>
        <div style={{
          fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.amberDim,
          letterSpacing: ".14em", textTransform: "uppercase", fontWeight: 600, marginBottom: 4,
        }}>{num} · {eyebrow}</div>
        <h2 style={{ font: `600 22px/1.15 ${T_BRIEF.serif}`, margin: 0, letterSpacing: "-0.015em" }}>{title}</h2>
      </div>
      {copyText && <CopyBtnBrief text={copyText} />}
    </div>
  );
}

function Brief({ state, surface, setSurface, density, internalVisible, synth }) {
  const { intake: i, diag, tl: tlTemplate, th: thTemplate, arch, rsk, asm, plan, stake, stops, plays } = state;
  const [activeId, setActiveId] = useStateBrief("summary");
  const containerRef = useRefBrief();
  const { isMobile } = useViewportBrief();
  // Use LLM output if available, else fall back to templated output.
  const tl = synth?.status === "ok" && synth.thesisLine ? synth.thesisLine : tlTemplate;
  const th = synth?.status === "ok" && synth.thesis ? synth.thesis : thTemplate;
  const synthState = synth?.status || "idle";

  useEffectBrief(() => {
    const onScroll = () => {
      const positions = SECTIONS.map(s => {
        const el = document.getElementById(s.id);
        if (!el) return null;
        return { id: s.id, top: el.getBoundingClientRect().top };
      }).filter(Boolean);
      const above = positions.filter(p => p.top < 120);
      if (above.length) setActiveId(above[above.length - 1].id);
      else if (positions[0]) setActiveId(positions[0].id);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [surface]);

  const jump = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
  };

  const role = i.role_title || i.role_family;
  const company = i.company || "[Company]";
  const isInternal = surface === "internal";
  const showInternal = isInternal && internalVisible;
  const pad = isMobile ? "14px 14px" : (density === "compact" ? "16px 18px" : "22px 24px");

  return (
    <div style={{ maxWidth: 1280, margin: "0 auto", padding: isMobile ? "20px 12px 60px" : "32px 36px 80px" }}>
      {/* Header bar */}
      <div style={{
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        marginBottom: 24, gap: 16, flexWrap: "wrap",
      }}>
        <div>
          <div style={{
            fontFamily: T_BRIEF.mono, fontSize: 10.5, color: T_BRIEF.amberDim,
            letterSpacing: ".12em", textTransform: "uppercase", fontWeight: 600, marginBottom: 4,
          }}>Phase 03 — Intel Brief</div>
          <h1 style={{ font: `600 30px/1.1 ${T_BRIEF.serif}`, margin: 0, letterSpacing: "-0.02em" }}>
            {role} <span style={{ color: T_BRIEF.muted, fontWeight: 400 }}>at</span> {company}
          </h1>
          <div style={{ marginTop: 6, fontSize: 13, color: T_BRIEF.textDim }}>
            {i.industry || "[industry]"} · {i.ownership} · {i.stage} · {i.tier} tier
          </div>
        </div>
        <SurfaceToggle surface={surface} setSurface={setSurface} />
      </div>

      <div ref={containerRef} style={{ display: "flex", gap: isMobile ? 0 : 36, alignItems: "flex-start" }}>
        {!isMobile && <LeftNav activeId={activeId} onJump={jump} surface={surface} density={density} />}

        <div style={{ flex: 1, minWidth: 0 }}>
          {/* 01 — Summary */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="summary" num="01" eyebrow="Diagnostic" title="Search Diagnostic" />
            <div style={{
              display: "flex", alignItems: "center", gap: 18, padding: "12px 14px",
              background: diag.banner === "green" ? "rgba(107,212,155,.06)" : diag.banner === "yellow" ? "rgba(255,200,87,.06)" : "rgba(255,118,118,.06)",
              border: `1px solid ${diag.banner === "green" ? "rgba(107,212,155,.3)" : diag.banner === "yellow" ? "rgba(255,200,87,.3)" : "rgba(255,118,118,.3)"}`,
              borderRadius: 6,
            }}>
              <div style={{
                fontFamily: T_BRIEF.mono, fontSize: 30, fontWeight: 700,
                color: diag.banner === "green" ? T_BRIEF.green : diag.banner === "yellow" ? T_BRIEF.warn : T_BRIEF.danger,
              }}>{diag.score}<span style={{ fontSize: 14, color: T_BRIEF.muted, fontWeight: 500 }}>/5</span></div>
              <div>
                <div style={{ font: `600 14px/1.3 ${T_BRIEF.sans}`, color: T_BRIEF.text }}>{diag.msg}</div>
                <div style={{ fontSize: 11.5, color: T_BRIEF.muted, marginTop: 2 }}>
                  {showInternal ? "Full gate detail in Diagnostic tab. Advisory by default (ADR-015)." : "Pre-kickoff diagnostic. Concerns surfaced below where flagged."}
                </div>
              </div>
            </div>
          </section>

          {/* 02 — Thesis Line */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="thesis-line" num="02" eyebrow="The line" title="Thesis Line" copyText={tl} />
            <div style={{
              padding: "18px 22px", background: "rgba(233,185,73,.05)",
              borderLeft: `3px solid ${T_BRIEF.amber}`, borderRadius: "0 6px 6px 0",
              font: `400 19px/1.5 ${T_BRIEF.serif}`, color: T_BRIEF.text, letterSpacing: "-0.005em",
              position: "relative",
            }}>
              {synthState === "loading" && (
                <span style={{
                  position: "absolute", top: 8, right: 12,
                  fontFamily: T_BRIEF.mono, fontSize: 9.5, color: T_BRIEF.amber,
                  letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700,
                }}>Synthesizing…</span>
              )}
              {tl}
            </div>
            {showInternal && (
              <div style={{ fontSize: 11, color: T_BRIEF.muted, fontFamily: T_BRIEF.mono, marginTop: 8, letterSpacing: ".04em", display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 12 }}>
                <span>Internal label: Killshot. Surface label: Thesis Line.</span>
                <span style={{
                  color: synthState === "ok" ? T_BRIEF.green : synthState === "error" ? T_BRIEF.danger : synthState === "loading" ? T_BRIEF.amber : T_BRIEF.mutedDeep,
                }}>
                  {synthState === "ok" && "● LLM-synthesized"}
                  {synthState === "loading" && "● Calling synthesizer…"}
                  {synthState === "error" && "● Templated (LLM unavailable)"}
                  {synthState === "idle" && "● Templated"}
                </span>
              </div>
            )}
          </section>

          {/* 03 — Thesis */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="thesis" num="03" eyebrow="The reasoning" title="Search Thesis" copyText={th} />
            <p style={{ font: `400 15px/1.65 ${T_BRIEF.serif}`, color: T_BRIEF.text, margin: 0, maxWidth: 720 }}>{th}</p>
          </section>

          {/* 04 — Context */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="context" num="04" eyebrow="The mandate" title="Company & Role Context" />
            <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 18 : 28 }}>
              <div>
                <div style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.muted, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 6, fontWeight: 600 }}>Company</div>
                <div style={{ font: `600 14px/1.4 ${T_BRIEF.sans}`, marginBottom: 8 }}>{company}</div>
                <div style={{ fontSize: 13, color: T_BRIEF.textDim, lineHeight: 1.6 }}>
                  {i.company_events || <span style={{ color: T_BRIEF.warn, fontFamily: T_BRIEF.mono, fontSize: 12 }}>requires validation in kickoff</span>}
                </div>
              </div>
              <div>
                <div style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.muted, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 6, fontWeight: 600 }}>Mandate</div>
                <div style={{ fontSize: 13, color: T_BRIEF.text, lineHeight: 1.6 }}>
                  {i.mandate || <span style={{ color: T_BRIEF.warn, fontFamily: T_BRIEF.mono, fontSize: 12 }}>requires validation in kickoff</span>}
                </div>
              </div>
            </div>
            {i.must_haves.length > 0 && (
              <div style={{ marginTop: 22 }}>
                <div style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.muted, letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 8, fontWeight: 600 }}>Must-haves (per intake)</div>
                <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                  {i.must_haves.map((m, idx) => (
                    <li key={idx} style={{
                      padding: "8px 0", borderBottom: `1px solid ${T_BRIEF.borderSoft}`,
                      display: "flex", gap: 12, fontSize: 13, color: T_BRIEF.text,
                    }}>
                      <span style={{ fontFamily: T_BRIEF.mono, color: T_BRIEF.amberDim, fontSize: 11 }}>{String(idx+1).padStart(2,"0")}</span>
                      <span style={{ flex: 1 }}>{m}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </section>

          {/* 05 — Market Map */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="market" num="05" eyebrow="Where to hunt" title="Market State Map" />
            {isMobile ? (
              <div>
                {i.market.map((m, idx) => (
                  <div key={idx} style={{
                    padding: "12px 12px",
                    background: T_BRIEF.bg,
                    border: `1px solid ${T_BRIEF.borderSoft}`,
                    borderRadius: 6,
                    marginBottom: 8,
                  }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8, marginBottom: 6 }}>
                      <div style={{ font: `600 14px/1.3 ${T_BRIEF.sans}`, color: T_BRIEF.text, flex: 1, minWidth: 0 }}>{m.company}</div>
                      <TierBrief value={m.tier} />
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginBottom: 6 }}>
                      <span style={{ fontFamily: T_BRIEF.mono, fontSize: 11, color: T_BRIEF.amberDim, letterSpacing: ".04em" }}>{m.state}</span>
                      <TagBrief kind={m.classification.toLowerCase().replace(" ", "-")}>{m.classification}</TagBrief>
                    </div>
                    <div style={{ fontSize: 12.5, color: T_BRIEF.textDim, lineHeight: 1.55 }}>
                      {m.reason || <span style={{ color: T_BRIEF.muted, fontStyle: "italic" }}>requires validation</span>}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
                <thead>
                  <tr style={{ borderBottom: `1px solid ${T_BRIEF.border}` }}>
                    {["Tier", "Company", "State", "Reason", "Source"].map(h => (
                      <th key={h} style={{
                        textAlign: "left", padding: "8px 10px",
                        fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.muted,
                        textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 600,
                      }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {i.market.map((m, idx) => (
                    <tr key={idx} style={{ borderBottom: `1px solid ${T_BRIEF.borderSoft}` }}>
                      <td style={{ padding: "10px" }}><TierBrief value={m.tier} /></td>
                      <td style={{ padding: "10px", fontWeight: 500, color: T_BRIEF.text }}>{m.company}</td>
                      <td style={{ padding: "10px", color: T_BRIEF.textDim, fontFamily: T_BRIEF.mono, fontSize: 11.5 }}>{m.state}</td>
                      <td style={{ padding: "10px", color: T_BRIEF.textDim, lineHeight: 1.5 }}>{m.reason || <span style={{ color: T_BRIEF.muted, fontStyle: "italic" }}>requires validation</span>}</td>
                      <td style={{ padding: "10px" }}><TagBrief kind={m.classification.toLowerCase().replace(" ", "-")}>{m.classification}</TagBrief></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            {i.off_limits && i.off_limits.length > 0 && (
              <div style={{ marginTop: 14, padding: "10px 12px", background: T_BRIEF.bg, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 4 }}>
                <span style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.danger, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginRight: 10 }}>Off-limits</span>
                <span style={{ fontSize: 12.5, color: T_BRIEF.textDim }}>{i.off_limits.join(" · ")}</span>
              </div>
            )}
          </section>

          {/* 06 — Archetypes */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="archetypes" num="06" eyebrow="Who fits" title="Candidate Archetypes" />
            <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr 1fr", gap: 12 }}>
              {arch.map((a, idx) => (
                <div key={idx} style={{
                  padding: "14px 16px", background: T_BRIEF.bg,
                  border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 6,
                  display: "flex", flexDirection: "column", gap: 8,
                }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <div style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.amberDim, letterSpacing: ".08em" }}>0{idx+1}</div>
                    <div style={{ fontFamily: T_BRIEF.mono, fontSize: 9.5, color: T_BRIEF.muted, letterSpacing: ".06em", textTransform: "uppercase" }}>
                      Conf · <span style={{ color: a.confidence === "High" ? T_BRIEF.green : a.confidence === "Medium" ? T_BRIEF.warn : T_BRIEF.muted }}>{a.confidence}</span>
                    </div>
                  </div>
                  <div style={{ font: `600 14.5px/1.25 ${T_BRIEF.serif}`, color: T_BRIEF.text, letterSpacing: "-0.005em" }}>{a.name}</div>
                  <div style={{ fontSize: 12.5, color: T_BRIEF.textDim, lineHeight: 1.5 }}>{a.desc}</div>
                  <div style={{
                    marginTop: "auto", paddingTop: 8, borderTop: `1px solid ${T_BRIEF.borderSoft}`,
                    fontFamily: T_BRIEF.mono, fontSize: 11, color: T_BRIEF.blue, lineHeight: 1.45,
                  }}>→ {a.where}</div>
                </div>
              ))}
            </div>
          </section>

          {/* 07 — Risks */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="risks" num="07" eyebrow="What could break this" title="Risks" />
            <div>
              {rsk.map((r, idx) => isMobile ? (
                <div key={idx} style={{
                  padding: "14px 0", borderBottom: idx === rsk.length - 1 ? "none" : `1px solid ${T_BRIEF.borderSoft}`,
                }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6, gap: 10 }}>
                    <div style={{ font: `600 13.5px/1.35 ${T_BRIEF.sans}`, color: T_BRIEF.text }}>{r.risk}</div>
                    <SeverityBrief level={r.severity} />
                  </div>
                  <div style={{ fontSize: 12.5, color: T_BRIEF.textDim, lineHeight: 1.55, marginBottom: 8 }}>{r.impact}</div>
                  <div style={{ fontSize: 12.5, color: T_BRIEF.text, lineHeight: 1.55, paddingLeft: 10, borderLeft: `2px solid ${T_BRIEF.amber}` }}>
                    <div style={{ fontFamily: T_BRIEF.mono, fontSize: 9.5, color: T_BRIEF.amber, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginBottom: 3 }}>Mitigation</div>
                    {r.mitigation}
                  </div>
                </div>
              ) : (
                <div key={idx} style={{
                  display: "grid", gridTemplateColumns: "180px 90px 1fr 1fr", gap: 16,
                  padding: "12px 0", borderBottom: idx === rsk.length - 1 ? "none" : `1px solid ${T_BRIEF.borderSoft}`,
                  alignItems: "start",
                }}>
                  <div style={{ font: `600 13px/1.4 ${T_BRIEF.sans}`, color: T_BRIEF.text }}>{r.risk}</div>
                  <div><SeverityBrief level={r.severity} /></div>
                  <div style={{ fontSize: 12.5, color: T_BRIEF.textDim, lineHeight: 1.55 }}>{r.impact}</div>
                  <div style={{ fontSize: 12.5, color: T_BRIEF.text, lineHeight: 1.55, paddingLeft: 12, borderLeft: `2px solid ${T_BRIEF.amber}` }}>
                    <div style={{ fontFamily: T_BRIEF.mono, fontSize: 9.5, color: T_BRIEF.amber, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginBottom: 3 }}>Mitigation</div>
                    {r.mitigation}
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* 08 — Assumptions */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="assumptions" num="08" eyebrow="Test these in week one" title="Assumptions to Validate" />
            {isMobile ? (
              <div>
                {asm.map((a, idx) => {
                  const labelStyle = { fontFamily: T_BRIEF.mono, fontSize: 9.5, color: T_BRIEF.muted, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginBottom: 3 };
                  return (
                    <div key={idx} style={{
                      padding: "14px 0",
                      borderBottom: idx === asm.length - 1 ? "none" : `1px solid ${T_BRIEF.borderSoft}`,
                    }}>
                      <div style={{ font: `600 13.5px/1.4 ${T_BRIEF.sans}`, color: T_BRIEF.text, marginBottom: 8 }}>{a.assumption}</div>
                      <div style={{ marginBottom: 6 }}>
                        <div style={labelStyle}>Why it matters</div>
                        <div style={{ fontSize: 12.5, color: T_BRIEF.textDim, lineHeight: 1.55 }}>{a.why}</div>
                      </div>
                      <div style={{ marginBottom: 6 }}>
                        <div style={labelStyle}>How to validate</div>
                        <div style={{ fontSize: 12.5, color: T_BRIEF.textDim, lineHeight: 1.55 }}>{a.validate}</div>
                      </div>
                      <div style={{ marginTop: 6, fontFamily: T_BRIEF.mono, fontSize: 11, color: T_BRIEF.blue }}>
                        Owner · {a.owner}
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
                <thead>
                  <tr style={{ borderBottom: `1px solid ${T_BRIEF.border}` }}>
                    {["Assumption", "Why It Matters", "How to Validate", "Owner"].map(h => (
                      <th key={h} style={{
                        textAlign: "left", padding: "8px 10px",
                        fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.muted,
                        textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 600,
                      }}>{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {asm.map((a, idx) => (
                    <tr key={idx} style={{ borderBottom: `1px solid ${T_BRIEF.borderSoft}` }}>
                      <td style={{ padding: "10px", color: T_BRIEF.text, fontWeight: 500, lineHeight: 1.5 }}>{a.assumption}</td>
                      <td style={{ padding: "10px", color: T_BRIEF.textDim, lineHeight: 1.5 }}>{a.why}</td>
                      <td style={{ padding: "10px", color: T_BRIEF.textDim, lineHeight: 1.5 }}>{a.validate}</td>
                      <td style={{ padding: "10px", color: T_BRIEF.blue, fontFamily: T_BRIEF.mono, fontSize: 11.5 }}>{a.owner}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </section>

          {/* 09 — Operating Plan */}
          <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
            <SectionHeader id="plan" num="09" eyebrow="The first ten days" title="10-Day Operating Plan" />
            <div style={{ position: "relative" }}>
              <div style={{ position: "absolute", left: 39, top: 12, bottom: 12, width: 1, background: T_BRIEF.borderSoft }} />
              {plan.map((p, idx) => (
                <div key={idx} style={{
                  display: "grid", gridTemplateColumns: "80px 1fr",
                  gap: 16, padding: "14px 0", position: "relative",
                  borderBottom: idx === plan.length - 1 ? "none" : `1px solid ${T_BRIEF.borderSoft}`,
                }}>
                  <div style={{
                    fontFamily: T_BRIEF.mono, fontSize: 11, color: T_BRIEF.amber,
                    fontWeight: 700, letterSpacing: ".04em",
                    background: T_BRIEF.panel, padding: "0 10px 0 0", zIndex: 1,
                  }}>Day {p.day}</div>
                  <div>
                    <div style={{ font: `600 14px/1.3 ${T_BRIEF.sans}`, color: T_BRIEF.text, marginBottom: 4 }}>{p.action}</div>
                    <div style={{ fontSize: 12, color: T_BRIEF.muted, fontFamily: T_BRIEF.mono, marginBottom: showInternal ? 6 : 0 }}>
                      Owner: <span style={{ color: T_BRIEF.blue }}>{p.owner}</span> · Output: <span style={{ color: T_BRIEF.textDim }}>{p.output}</span>
                    </div>
                    {showInternal && (
                      <div style={{
                        marginTop: 6, padding: "6px 10px", background: "rgba(255,200,87,.05)",
                        borderLeft: `2px solid ${T_BRIEF.warn}`, borderRadius: "0 4px 4px 0",
                        fontSize: 11.5, color: T_BRIEF.text, lineHeight: 1.5,
                      }}>
                        <span style={{ fontFamily: T_BRIEF.mono, fontSize: 9, color: T_BRIEF.warn, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginRight: 6 }}>Gate</span>
                        {p.gate}
                      </div>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* INTERNAL — Stakeholder Notes */}
          {showInternal && stake.length > 0 && (
            <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
              <SectionHeader id="stakeholder" num="10" eyebrow="Internal — observed only" title="Stakeholder Notes" />
              <InternalOnly visible={true} label="Hiring Manager Operating Manual">
                {stake.map((s, idx) => (
                  <div key={idx} style={{ marginBottom: idx === stake.length - 1 ? 0 : 12 }}>
                    <div style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.amberDim, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginBottom: 4 }}>{s.kind}</div>
                    <div style={{ fontSize: 13, color: T_BRIEF.text, lineHeight: 1.55 }}>{s.body}</div>
                  </div>
                ))}
              </InternalOnly>
            </section>
          )}

          {/* INTERNAL — Stop Conditions */}
          {showInternal && (
            <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
              <SectionHeader id="stop" num="11" eyebrow="Internal — non-negotiable" title="Stop Conditions" />
              <InternalOnly visible={true} label="Kill Switches">
                {stops.map((s, idx) => (
                  <div key={idx} style={{
                    display: "flex", gap: 12, padding: "8px 0",
                    borderBottom: idx === stops.length - 1 ? "none" : `1px solid ${T_BRIEF.borderSoft}`,
                  }}>
                    <span style={{ color: T_BRIEF.danger, fontFamily: T_BRIEF.mono, fontSize: 11, fontWeight: 700 }}>STOP</span>
                    <span style={{ fontSize: 13, color: T_BRIEF.text, lineHeight: 1.5 }}>{s}</span>
                  </div>
                ))}
              </InternalOnly>
            </section>
          )}

          {/* INTERNAL — Outreach Plays */}
          {showInternal && (
            <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
              <SectionHeader id="outreach" num="12" eyebrow="Internal — outreach hooks" title="Outreach Plays" />
              <InternalOnly visible={true} label="Outreach Weapons">
                {plays.map((p, idx) => (
                  <div key={idx} style={{ marginBottom: idx === plays.length - 1 ? 0 : 14, paddingBottom: idx === plays.length - 1 ? 0 : 14, borderBottom: idx === plays.length - 1 ? "none" : `1px solid ${T_BRIEF.borderSoft}` }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
                      <div style={{ font: `600 13.5px/1.3 ${T_BRIEF.sans}`, color: T_BRIEF.text }}>{p.hook}</div>
                      <CopyBtnBrief text={p.body} label="Copy hook" />
                    </div>
                    <div style={{ fontSize: 11.5, color: T_BRIEF.muted, fontFamily: T_BRIEF.mono, marginBottom: 8 }}>When: {p.when}</div>
                    <div style={{
                      padding: "10px 12px", background: T_BRIEF.bg,
                      border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 4,
                      fontFamily: T_BRIEF.serif, fontSize: 13.5, color: T_BRIEF.textDim, lineHeight: 1.55, fontStyle: "italic",
                    }}>{p.body}</div>
                  </div>
                ))}
              </InternalOnly>
            </section>
          )}

          {/* INTERNAL — Kickoff Questions */}
          {showInternal && (
            <section style={{ background: T_BRIEF.panel, border: `1px solid ${T_BRIEF.borderSoft}`, borderRadius: 8, padding: pad, marginBottom: 16 }}>
              <SectionHeader id="kickoff-q" num="13" eyebrow="Internal — kickoff prep" title="Open Questions for Kickoff" />
              <InternalOnly visible={true} label="Kickoff prep">
                {[
                  { topic: "Mandate", qs: ["What are you actually trying to fix?", "What does success look like in 12 months?", "Why this role, why now?"] },
                  { topic: "Must-haves", qs: ["Which are real vs. aspirational?", "Would you pass on a strong candidate missing X?", "What's the one thing they cannot lack?"] },
                  { topic: "Decision process", qs: ["Who decides?", "Who can veto?"] },
                  { topic: "Comp flexibility", qs: ["What's negotiable — sign-on, equity, base?", "Sponsor authority for flex?"] },
                  { topic: "Failure modes", qs: ["Last hire that didn't work — why?", "What pattern do you not want to repeat?"] },
                  { topic: "Timing", qs: ["What triggers urgency?", "What creates flex?"] },
                  { topic: "Stakeholder alignment", qs: ["Who else needs to love this hire?"] },
                ].map((g, idx) => (
                  <div key={idx} style={{ marginBottom: 14 }}>
                    <div style={{ fontFamily: T_BRIEF.mono, fontSize: 10, color: T_BRIEF.amberDim, letterSpacing: ".1em", textTransform: "uppercase", fontWeight: 700, marginBottom: 6 }}>{g.topic}</div>
                    <ul style={{ margin: 0, padding: 0, listStyle: "none" }}>
                      {g.qs.map((q, qi) => (
                        <li key={qi} style={{ display: "flex", gap: 10, padding: "5px 0", fontSize: 13, color: T_BRIEF.text, lineHeight: 1.5 }}>
                          <span style={{ color: T_BRIEF.muted, fontFamily: T_BRIEF.mono, fontSize: 11 }}>{String(qi+1).padStart(2,"0")}</span>
                          {q}
                        </li>
                      ))}
                    </ul>
                  </div>
                ))}
              </InternalOnly>
            </section>
          )}
        </div>
      </div>
    </div>
  );
}

window.IE_BRIEF = { Brief };