{f.rowLabel \|\| "Colorway"}	{c.label}
{r.id && apImg(r.id) ? : null} {apHi(r.label, hl)}	{apImg(c.id) ? : null} {c.v}	{c.v}	{c.v}

{f.rowLabel || "Colorway"}

{c.label}

{r.id && apImg(r.id) ?

: null} {apHi(r.label, hl)}

{apImg(c.id) ?

: null} {c.v}

{c.v}


{ATTR_SHORT[attr] \|\| attr}	{pct == null ? · : pct + "%"}

{ATTR_SHORT[attr] || attr}

{pct == null ? · : pct + "%"}

e.stopPropagation()}> {sent ? (

Feedback submitted

Thanks — this goes to the analyst on this study.

) : (

How do you like this {scope === "takeaways" ? "takeaway" : "headline"}?

setNote(e.target.value)}
                placeholder={verdict === "down"
                  ? "What's off? e.g. the evidence doesn't support this for the UK sample."
                  : "Why? Optional, but it's what makes the feedback useful."} />
              <div className="ap-fbpop__foot">
                <button type="button" className="ap-fbpop__cancel" onClick={() => setOpen(false)}>Cancel</button>
                <button type="button" className="ap-fbpop__submit" disabled={!verdict} onClick={submit}>Submit</button>
              </div>
            </React.Fragment>
          )}
        </div>
      )}
    </span>
  );
}

// ---- Argument card: claim + curated findings ----
function ArgumentCard({ arg: argIn, accent, idx, cardRef, argKey, view = "cx", assignments = {}, apxById = {} }) {
  const [expanded, setExpanded] = React.useState(false);
  const [sort, setSort] = React.useState("rank");
  const [cap, setCap] = React.useState("all");
  const arg = apSortArg(argIn, sort, cap);
  // an argument shows a native finding only while it's still linked here — so
  // un-checking a baseline anchoring in the appendix removes it immediately.
  const isLinked = (rawId) => (assignments[rawId] || []).some((t) => t.slug + "::" + t.argId === argKey);
  const liveFindings = (arg.findings || []).filter((f) => !f.rawId || isLinked(f.rawId));
  const blocks = groupFindings(liveFindings);
  const baseItems = blocks.map((b, i) => ({
    block: b,
    key: b.type === "heat" ? ("heat" + i) : b.type === "gallery" ? ("gal" + i) : ((b.f && b.f.rawId) || ("blk" + i)),
    kind: b.type === "heat" ? "heat" : b.type === "gallery" ? "gallery" : "single",
  }));
  // appendix findings linked here but NOT native to the argument (deduped)
  const nativeIds = new Set();
  liveFindings.forEach((f) => { if (f.rawId) nativeIds.add(f.rawId); });
  const assignedItems = Object.keys(assignments)
    .filter((id) => !nativeIds.has(id) && (assignments[id] || []).some((t) => t.slug + "::" + t.argId === argKey))
    .map((id) => apxById[id]).filter(Boolean)
    .map((f) => ({
    block: { type: "single", f },
    key: "asg::" + f.rawId,
    kind: "single",
    assignedId: f.rawId,
  }));
  const items = [...baseItems, ...assignedItems];
  const cur = useArgCuration(items);
  const isClient = view === "client";
  const findIdOf = (it) => (it.kind === "heat" || it.kind === "gallery") ? (it.block.findings[0] && it.block.findings[0].rawId) : (it.block.f && it.block.f.rawId);
  const heatVisN = (it) => it.kind === "heat" ? it.block.findings.filter((f) => !cur.hiddenProd.has(f.productId)).length : it.kind === "gallery" ? it.block.findings.length : 1;

if (!items[0]) {
    return (
      <div className="ap-argcard" ref={cardRef} style={{ "--ap-accent": accent }}>
        <div className="ap-argcard__head"><div className="ap-argcard__claim">{arg.argument.map((s, i) => i === 0 ? <p key={i}>{s}</p> : <p key={i} className="ap-argcard__sub">{s}</p>)}</div><ClaimActions scope="argument" id={argKey} /></div>
      </div>
    );
  }

// client view drops hidden findings entirely (and empty heatmaps); CX keeps them dimmed
  const visible = items.filter((it) => !cur.hidden.has(it.key) && !(isClient && it.kind === "heat" && heatVisN(it) === 0));
  const hiddenItems = isClient ? [] : items.filter((it) => cur.hidden.has(it.key));
  const ordered = [...visible.filter((it) => it.key === cur.pinned), ...visible.filter((it) => it.key !== cur.pinned)];
  const hero = ordered[0];
  const rest = ordered.slice(1);
  const moreN = rest.reduce((s, it) => s + heatVisN(it), 0);

return (
    <div className={"ap-argcard" + (expanded ? " is-expanded" : "")} ref={cardRef} style={{ "--ap-accent": accent }}>
      <div className="ap-argcard__head"><span className="ap-argcard__n">{idx}</span><div className="ap-argcard__claim">{arg.argument.map((s, i) => i === 0 ? <p key={i} contentEditable suppressContentEditableWarning spellCheck={false}>{s}</p> : <p key={i} className="ap-argcard__sub" contentEditable suppressContentEditableWarning spellCheck={false}>{s}</p>)}</div><ClaimActions scope="argument" id={argKey} /></div>
      <ApToolsCtx.Provider value={{ sort, setSort, cap, setCap }}>
      <div className="ap-argcard__findings">
        {hero && <CurationBlock item={hero} cur={cur} hidden={false} findId={findIdOf(hero)} view={view} />}
        {expanded && rest.length > 0 && (
          <div className="ap-argcard__supporting">
            {rest.map((it) => <CurationBlock key={it.key} item={it} cur={cur} hidden={false} findId={findIdOf(it)} view={view} />)}
          </div>
        )}
        {expanded && hiddenItems.length > 0 && (
          <div className="fc-cxgroup">
            {hiddenItems.map((it) => <CurationBlock key={it.key} item={it} cur={cur} hidden={true} findId={findIdOf(it)} view={view} />)}
          </div>
        )}
      </div>
      </ApToolsCtx.Provider>
      {(rest.length > 0 || hiddenItems.length > 0) && (
        <button className="ap-argcard__more" onClick={() => setExpanded((v) => !v)} aria-expanded={expanded}>
          <span className="ap-argcard__more-txt">
            {expanded
              ? "Hide findings"
              : moreN > 0
              ? "Show " + moreN + " more " + (moreN === 1 ? "finding" : "findings")
              : "Show " + hiddenItems.length + " hidden " + (hiddenItems.length === 1 ? "finding" : "findings")}
          </span>
          <i className={"ti ap-argcard__more-ic " + (expanded ? "ti-chevron-up" : "ti-chevron-down")}></i>
        </button>
      )}
    </div>
  );
}

// =========================================================
// Main view.
// =========================================================
function ApparelInsights({ viewMode = "cx", claimDivider = false, confMode = "badge", railMode = "full", confAlways = false, data, appendix, withAppendix = true }) {
  const DATA = data || window.APPAREL_INSIGHTS;
  apConfMode = confMode;
  apSentiment = {};
  if (DATA) DATA.objectives.forEach((o) => o.arguments.forEach((a) => (a.findings || []).forEach((f) => {
    if (f.kind === "sentiment" && f.tiers) f.tiers.forEach((t) => (t.items || []).forEach((it) => { if (it.id != null) apSentiment[it.id] = it.score; }));
  })));
  const readRef = React.useRef(null);
  const secRefs = React.useRef({});
  const argRefs = React.useRef({});
  const [openFind, setOpenFind] = React.useState({});
  const store = React.useContext(PinContext);
  const [activeObj, setActiveObj] = React.useState(DATA ? DATA.objectives[0].slug : null);
  const [activeArg, setActiveArg] = React.useState(null);
  const [view, setView] = React.useState("objectives"); // "objectives" | "appendix"
  const [apxCat, setApxCat] = React.useState("all");
  // ---- appendix → argument assignment store (multi-select) ----
  // Seeded from the system's existing anchoring: every finding already used
  // in an argument (matched by rawId) starts "linked" there, so the cascade
  // reflects the baseline on every load. User toggles layer on top (in-session).
  const [assignments, setAssignments] = React.useState(() => {
    const b = {}; const D = data || window.APPAREL_INSIGHTS;
    if (D) D.objectives.forEach((o) => o.arguments.forEach((a) => (a.findings || []).forEach((f) => {
      if (!f.rawId) return;
      (b[f.rawId] = b[f.rawId] || []).push({ slug: o.slug, argId: a.id, objNum: o.num, label: a.argument[0] });
    })));
    return b;
  });
  const toggleAssign = React.useCallback((id, t) => setAssignments((m) => {
    const arr = m[id] ? m[id].slice() : [];
    const i = arr.findIndex((x) => x.slug === t.slug && x.argId === t.argId);
    if (i >= 0) arr.splice(i, 1); else arr.push(t);
    const n = { ...m }; if (arr.length) n[id] = arr; else delete n[id]; return n;
  }), []);
  const apxById = React.useMemo(() => {
    const m = {}; const D = withAppendix ? (appendix || window.APPENDIX_FINDINGS) : null;
    if (D) D.groups.forEach((g) => g.findings.forEach((f) => { if (f.rawId) m[f.rawId] = f; }));
    return m;
  }, []);
  const assignedFor = React.useCallback((argKey) => {
    return Object.keys(assignments)
      .filter((id) => (assignments[id] || []).some((t) => t.slug + "::" + t.argId === argKey))
      .map((id) => apxById[id]).filter(Boolean);
  }, [assignments, apxById]);
  const apxCounts = React.useMemo(() => {
    const m = {}; const D = withAppendix ? (appendix || window.APPENDIX_FINDINGS) : null; const catOf = window.apxCatOf;
    if (D && catOf) D.groups.forEach((g) => g.findings.forEach((f) => { const k = catOf(f); m[k] = (m[k] || 0) + 1; }));
    return m;
  }, []);

// Return-from-Explore: scroll back to the finding the user traced from.
  const retId = store && store.returnToFinding;
  React.useEffect(() => {
    if (!retId) return;
    const sc = readRef.current;
    let n = 0;
    const tick = () => {
      const el = document.getElementById("find-" + retId);
      if (el && sc) {
        const top = el.getBoundingClientRect().top - sc.getBoundingClientRect().top + sc.scrollTop - 24;
        sc.scrollTo({ top, behavior: n === 0 ? "auto" : "smooth" });
        el.classList.add("ap-findblock--flash");
        setTimeout(() => el.classList.remove("ap-findblock--flash"), 1600);
        store.setReturnToFinding(null);
        return;
      }
      n += 1;
      if (n < 12) setTimeout(tick, 120);
      else store.setReturnToFinding(null);
    };
    setTimeout(tick, 80);
  }, [retId]);

function showAppendix(catKey) {
    setView("appendix");
    setActiveArg("objective-3::appendix");
    if (typeof catKey === "string") setApxCat(catKey);
    const sc = readRef.current;
    if (sc) requestAnimationFrame(() => sc.scrollTo({ top: 0 }));
  }

// scroll-spy
  React.useEffect(() => {
    const sc = readRef.current;
    if (!sc || view === "appendix") return;
    const secs = new Map(), args = new Map();
    const apply = () => {
      let topSec = null, y0 = -Infinity;
      secs.forEach((y, id) => { if (y > y0) { y0 = y; topSec = id; } });
      let topArg = null, y1 = -Infinity;
      args.forEach((y, key) => {
        if (topSec && key.indexOf(topSec + "::") !== 0) return;
        if (y > y1) { y1 = y; topArg = key; }
      });
      if (topSec) setActiveObj(topSec);
      setActiveArg(topArg);
    };
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        const a = e.target.getAttribute("data-arg");
        const s = e.target.getAttribute("data-sec");
        if (a != null) { e.isIntersecting ? args.set(a, e.boundingClientRect.top) : args.delete(a); }
        if (s != null) { e.isIntersecting ? secs.set(s, e.boundingClientRect.top) : secs.delete(s); }
      });
      apply();
    }, { root: sc, rootMargin: "-18% 0px -62% 0px", threshold: 0 });
    Object.values(secRefs.current).forEach((el) => el && io.observe(el));
    Object.values(argRefs.current).forEach((el) => el && io.observe(el));
    return () => io.disconnect();
  }, [DATA, view]);

if (!DATA) return <div style={{ padding: 24, color: "var(--ms-fg-muted)" }}>Loading insights…</div>;

return (
    <div className={"gl gl-insx2 ap-ins" + (claimDivider ? " ap-ins--claimdiv" : "") + (railMode === "dashes" || railMode === "none" ? " ap-ins--dashrail" : "") + (railMode === "none" ? " ap-ins--norail" : "") + (confAlways ? " ap-ins--confon" : "") + (window.__METHOD_RAIL ? " ap-ins--mrail" : "")}>
      {/* ---- Left index: dash gutter (B1) or full outline ---- */}
      {railMode === "none" ? null : railMode === "dashes" ? (
        <aside className="ap-dash">
          <div className="ap-dash__in">
            {DATA.objectives.map((o) => (
              <div className="ap-dash__grp" key={o.slug}>
                <button className={"ap-dash__d ap-dash__d--o" + (activeObj === o.slug ? " on" : "")}
                  onClick={() => scrollToSec(o.slug)}>
                  <span className="ap-dash__line"></span>
                  <span className="ap-dash__lbl"><b>{o.num}</b>{o.objective}</span>
                </button>
                {o.arguments.map((a, i) => {
                  const key = o.slug + "::" + a.id;
                  return (
                    <button key={key} className={"ap-dash__d" + (activeArg === key ? " on" : "")}
                      onClick={() => scrollToArg(o.slug, a.id)}>
                      <span className="ap-dash__line"></span>
                      <span className="ap-dash__lbl">{a.argument[0]}</span>
                    </button>
                  );
                })}
              </div>
            ))}
            {withAppendix && window.AppendixPage && (
              <div className="ap-dash__grp">
                <button className={"ap-dash__d ap-dash__d--o" + (view === "appendix" ? " on" : "")} onClick={() => showAppendix("all")}>
                  <span className="ap-dash__line"></span>
                  <span className="ap-dash__lbl">All findings</span>
                </button>
              </div>
            )}
          </div>
        </aside>
      ) : (
      <aside className="gl-bx-index">
        <div className="gl-bx-index__scroll">
          {DATA.objectives.map((o) => (
            <div className="gl-bx-grp" key={o.slug}>
              <button className={"gl-bx-grp__head" + (activeObj === o.slug && !activeArg ? " is-active" : "")}
                onClick={() => scrollToSec(o.slug)}>
                <span className="gl-bx-grp__num">{o.num}</span>
                <span className="gl-bx-grp__title">{o.objective}</span>
              </button>
              <button className={"gl-bx-item ap-idxarg ap-idxtk" + (activeArg === o.slug + "::tk" ? " is-sel" : "")}
                onClick={() => { scrollToSec(o.slug); setActiveArg(o.slug + "::tk"); }}>
                <i className="ti ti-sparkles ap-idxtk__ic"></i>
                <span className="gl-bx-item__txt">Key takeaways</span>
              </button>
              <div className="gl-bx-item ap-idxarg ap-idxfind ap-idxfind--static">
                <span className="gl-bx-item__txt">Findings</span>
                <span className="ap-idxfind__n">{o.arguments.length}</span>
              </div>
              <div className="ap-idxargs">
              {o.arguments.map((a, i) => {
                const key = o.slug + "::" + a.id;
                return (
                  <button key={key} className={"gl-bx-item ap-idxarg" + (activeArg === key ? " is-sel" : "")}
                    onClick={() => scrollToArg(o.slug, a.id)}>
                    <span className="ap-idxarg__n">{i + 1}</span>
                    <span className="gl-bx-item__txt">{a.argument[0]}</span>
                  </button>
                );
              })}
              </div>
            </div>
          ))}
          {withAppendix && window.AppendixPage && (
            <div className="gl-bx-grp apx-idxgrp">
              <button className={"gl-bx-grp__head apx-idxhead" + (view === "appendix" && apxCat === "all" ? " is-active" : "")}
                onClick={() => showAppendix("all")}>
                <span className="gl-bx-grp__title">All findings</span>
              </button>
              {(window.APX_CATS || []).filter((c) => c.key !== "all").map((c) => (
                <button key={c.key}
                  className={"gl-bx-item ap-idxarg apx-idxcat" + (view === "appendix" && apxCat === c.key ? " is-sel" : "")}
                  onClick={() => showAppendix(c.key)}>
                  <span className="gl-bx-item__txt">{c.label}</span>
                  {apxCounts[c.key] != null && <span className="apx-idxcat__n">{apxCounts[c.key]}</span>}
                </button>
              ))}
            </div>
          )}
        </div>
      </aside>
      )}

{/* ---- Reading panel ---- */}
      {view === "appendix" && withAppendix && window.AppendixPage ? (
        <window.AppendixPage cat={apxCat} setCat={setApxCat}
          assign={toggleAssign} assignments={assignments} objectives={DATA.objectives} />
      ) : (
      <div className="gl-bx-read ap-read" ref={readRef}>
        {DATA.objectives.map((o) => (
          <section className="gl-bx-sec ap-sec" key={o.slug} data-sec={o.slug}
            data-screen-label={"Objective " + o.num}
            ref={(el) => { secRefs.current[o.slug] = el; }} style={{ "--ap-accent": o.accent }}>
            <div className="gl-bx-sticky ap-sticky">
              <div className="gl-bx-sticky__inner">
                <div className="ap-objhead">
                  <span className="ap-objhead__num">Objective {o.num}</span>
                  <h2 className="ap-objtitle">{o.objective}</h2>
                </div>
                <div className="ap-takeaways">
                  <div className="ap-takeaways__head">
                    <div className="ap-takeaways__label"><i className="ti ti-sparkles"></i>Key takeaways</div>
                    <ClaimActions scope="takeaways" id={o.slug} />
                  </div>
                  <ul className="ap-takeaways__list">
                    {o.keyTakeaways.map((r, i) => {
                      const short = (((DATA && DATA.takeawaysShort) || {})[o.slug] || [])[i];
                      const a = o.arguments[i];
                      return (
                        <li key={i}>
                          <span className="ap-tk__txt" contentEditable suppressContentEditableWarning spellCheck={false}>{short || r}</span>
                          {a && (
                            <button className="ap-cite" title={a.argument[0]} onClick={() => scrollToArg(o.slug, a.id)}>{i + 1}</button>
                          )}
                        </li>
                      );
                    })}
                  </ul>
                </div>
              </div>
            </div>
            <div className="gl-bx-sec__body ap-body">
              {o.arguments.map((a, i) => {
                const key = o.slug + "::" + a.id;
                return (
                  <div key={key} data-arg={key} className="ap-argwrap"
                    ref={(el) => { argRefs.current[key] = el; }}>
                    <ArgumentCard arg={a} accent={o.accent} idx={i + 1} argKey={key} view={viewMode} assignments={assignments} apxById={apxById} />
                  </div>
                );
              })}
            </div>
          </section>
        ))}
      </div>
      )}
      {window.__METHOD_RAIL && view !== "appendix" ? <ApMethodRail /> : null}
    </div>
  );
}

// Export the leaf viz so the feedback-exploration view (v6) can reuse the
// exact same charts and just layer feedback affordances on top.
Object.assign(window, {
  ApparelInsights,
  ApVizLineEfficiency: VizLineEfficiency,
  ApVizAdvDet: VizAdvDet,
  ApVizSentiment: VizSentiment,
  ApVizStat: VizStat,
  ApVizBarList: VizBarList,
  ApFindingViz: FindingViz,
  ApAdvDetHeatmap: AdvDetHeatmap,
  apImg,
});