// Drawer.jsx — AI-dark slide-over
function Drawer({ target, onClose, onOpen }) {
  const { roles, docs, cycles, stages, principles, domains, statuses, rules } = CONTENT;
  const statusById = Object.fromEntries((statuses || []).map(s => [s.id, s]));
  const ruleById = Object.fromEntries((rules || []).map(r => [r.id, r]));
  const rolesById = Object.fromEntries(roles.map(r => [r.id, r]));
  const docsById = Object.fromEntries(docs.map(d => [d.id, d]));
  const cyclesById = Object.fromEntries(cycles.map(c => [c.id, c]));
  const stagesById = Object.fromEntries(stages.map(s => [s.id, s]));

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  if (!target) return null;

  let body = null;
  if (target.type === "role") body = <RoleBody role={rolesById[target.id]} stages={stages} docsById={docsById} onOpen={onOpen} />;
  if (target.type === "doc") body = <DocBody doc={docsById[target.id]} stages={stages} rolesById={rolesById} onOpen={onOpen} />;
  if (target.type === "cycle") body = <CycleBody cycle={cyclesById[target.id]} stages={stages} rolesById={rolesById} onOpen={onOpen} />;
  if (target.type === "stage") body = <StageBody stage={stagesById[target.id]} rolesById={rolesById} docsById={docsById} cyclesById={cyclesById} onOpen={onOpen} />;
  if (target.type === "domain") body = <DomainBody domain={domains.find(d => d.id === target.id)} onOpen={onOpen} />;
  if (target.type === "principle") body = <PrincipleBody p={principles.find(p => p.id === target.id)} />;
  if (target.type === "status") body = <StatusBody status={statusById[target.id]} stages={stages} cyclesById={cyclesById} onOpen={onOpen} />;
  if (target.type === "rule") body = <RuleBody rule={ruleById[target.id]} cyclesById={cyclesById} onOpen={onOpen} />;

  const typeLabel = { role: "Role", doc: "Doc", cycle: "Cycle", stage: "Stage", domain: "Domain", principle: "Principle", status: "Jira status", rule: "Rule" }[target.type];

  return (
    <>
      <div className="drawer-scrim fixed inset-0 z-40 no-print" onClick={onClose} aria-hidden="true" />
      <aside className="drawer fixed top-0 right-0 z-50 h-full w-full max-w-[560px] overflow-y-auto nice-scroll" role="dialog">
        <div className="sticky top-0 z-10 px-7 py-4 flex items-center justify-between border-b border-[color:var(--line-strong)]"
          style={{ background: "rgba(10,14,26,0.95)", backdropFilter: "blur(10px)" }}>
          <div className="flex items-center gap-3">
            <span className="eyebrow">{typeLabel}</span>
            {target.type === "stage" && (
              <span className="eyebrow">
                {String(stages.findIndex(s => s.id === target.id) + 1).padStart(2, "0")} / 10
              </span>
            )}
          </div>
          <button onClick={onClose} className="text-[color:var(--ink-dim)] hover:text-[color:var(--ink)] text-[13px] flex items-center gap-2">
            Close <span className="kbd">Esc</span>
          </button>
        </div>
        <div className="px-7 py-7">{body}</div>
      </aside>
    </>
  );
}

function H({ children, sub }) {
  return (
    <div className="mb-6">
      <h3 className="font-display text-[36px] font-medium text-[color:var(--ink)] leading-none">{children}</h3>
      {sub && <p className="mt-3 font-serif italic text-[16px] text-[color:var(--ink-dim)]">{sub}</p>}
    </div>
  );
}
function Section({ title, children }) {
  return (
    <div className="mb-6">
      <div className="eyebrow mb-2">{title}</div>
      {children}
    </div>
  );
}
function RolePill({ r, onOpen }) {
  const cls = r.tier === "customer" ? "role-chip-customer"
    : r.tier === "oversight" ? "role-chip-oversight" : "role-chip";
  return (
    <button onClick={() => onOpen({ type: "role", id: r.id })}
      className={`${cls} rounded-full px-2.5 py-0.5 font-mono uppercase tracking-[0.22em] text-[10.5px] hover:opacity-85`}>
      {r.name}
    </button>
  );
}

function RoleList({ roles, onOpen }) {
  return (
    <div className="space-y-1.5">
      {roles.map(r => {
        const cls = r.tier === "customer" ? "role-chip-customer"
          : r.tier === "oversight" ? "role-chip-oversight" : "role-chip";
        return (
          <button key={r.id} onClick={() => onOpen({ type: "role", id: r.id })}
            className="cell w-full text-left px-3 py-2 flex items-center gap-3 group hover:opacity-90">
            <span className={`${cls} rounded-full px-2 py-0.5 text-[10px] font-mono uppercase tracking-[0.22em] shrink-0 w-[82px] text-center`}>
              {r.name}
            </span>
            <span className="text-[13.5px] text-[color:var(--ink)]">{r.fullName}</span>
            <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"
              className="ml-auto flex-shrink-0 text-[color:var(--ink-faint)] group-hover:text-[color:var(--accent-ink)] group-hover:translate-x-0.5 transition-all">
              <path d="M6 4l4 4-4 4"/>
            </svg>
          </button>
        );
      })}
    </div>
  );
}

function RoleBody({ role, stages, docsById, onOpen }) {
  const touchpoints = stages.filter(s => s.activeRoles.includes(role.id));
  return (
    <>
      <H sub={role.mission}>{role.fullName || role.name}</H>
      <Section title="Tier"><div className="text-[14px] capitalize text-[color:var(--ink)]">{role.tier}</div></Section>
      {role.equivalents && role.equivalents.length > 0 && (
        <Section title="Also known as">
          <p className="text-[13.5px] leading-relaxed text-[color:var(--ink-dim)]">
            {role.equivalents.map((eq, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span className="text-[color:var(--ink-faint)] mx-2">·</span>}
                <span style={eq.reason ? { color: "var(--accent-ink)", fontWeight: 500 } : undefined}>
                  {eq.label}
                </span>
              </React.Fragment>
            ))}
          </p>
        </Section>
      )}
      <Section title="Detail"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{role.details}</p></Section>
      <Section title={`Touchpoints · ${touchpoints.length}`}>
        <ul className="space-y-1">
          {touchpoints.map(s => (
            <li key={s.id}>
              <button onClick={() => onOpen({ type: "stage", id: s.id })}
                className="w-full text-left flex items-baseline gap-3 py-2 px-2 -mx-2 rounded hover:bg-white/5">
                <span className="font-mono text-[10.5px] text-[color:var(--ink-faint)] tabular-nums">{String(stages.indexOf(s) + 1).padStart(2, "0")}</span>
                <span className="text-[13.5px] text-[color:var(--ink)]">{s.label}</span>
                {s.activeDoc && <span className="ml-auto text-[11px] text-[color:var(--ink-faint)]">{docsById[s.activeDoc].name}</span>}
              </button>
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}

function DocBody({ doc, stages, rolesById, onOpen }) {
  const touchpoints = stages.filter(s => s.activeDoc === doc.id);
  const tag = doc.customerFacing === "full" ? "Customer-facing (full)"
    : doc.customerFacing === "partial" ? "Customer-facing (E2E AC block only)" : "Internal";
  return (
    <>
      <H sub={doc.jiraType ? `Jira ${doc.jiraType}` : doc.derived ? "Derived publication output" : null}>{doc.name}</H>
      <div className="flex flex-wrap items-center gap-2 mb-6">
        <span className={`rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em] ${doc.customerFacing === "internal" ? "role-chip" : "customer-pill"}`}>{tag}</span>
        <span className="role-chip rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em]">AC · {doc.acFormat}</span>
        {doc.visuals && (
          <span className="rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em] inline-flex items-center gap-1.5"
            style={{
              background: doc.visuals.level === "required" ? "rgba(191,148,255,0.16)" : doc.visuals.level === "encouraged" ? "rgba(191,148,255,0.10)" : "rgba(255,255,255,0.04)",
              border: `1px solid ${doc.visuals.level === "required" ? "rgba(191,148,255,0.45)" : doc.visuals.level === "encouraged" ? "rgba(191,148,255,0.28)" : "var(--line-strong)"}`,
              color: doc.visuals.level === "situational" ? "var(--ink-faint)" : "oklch(0.85 0.12 300)",
            }}>
            <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
              <rect x="2" y="3" width="12" height="9" rx="1"/>
              <path d="M2 11l3.5-3 2.5 2 3-3 3 3"/>
              <circle cx="6" cy="6" r="0.8" fill="currentColor"/>
            </svg>
            Visuals · {doc.visuals.level === "required" ? "Required" : doc.visuals.level === "encouraged" ? "Encouraged" : "Situational"}
          </span>
        )}
      </div>
      <Section title="Detail"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{doc.details}</p></Section>
      {doc.visuals && (
        <Section title="Visuals">
          <div className="cell p-4">
            <div className="flex items-baseline justify-between gap-3 mb-2">
              <div className="font-mono text-[11px] uppercase tracking-[0.22em]" style={{ color: "oklch(0.82 0.1 300)" }}>{doc.visuals.section}</div>
              <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">{doc.visuals.role}</div>
            </div>
            <p className="text-[13px] leading-relaxed text-[color:var(--ink-dim)]">{doc.visuals.content}</p>
            <div className="mt-3 pt-3 border-t border-[color:var(--line)] flex items-center gap-2">
              <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">Owner</span>
              <div className="flex flex-wrap gap-1">{doc.visuals.owner.map(rid => <RolePill key={rid} r={rolesById[rid]} onOpen={onOpen} />)}</div>
            </div>
          </div>
        </Section>
      )}
      <div className="grid grid-cols-2 gap-4 mb-6">
        <div><div className="eyebrow mb-2">Author</div><div className="flex flex-wrap gap-1">{doc.author.map(rid => <RolePill key={rid} r={rolesById[rid]} onOpen={onOpen} />)}</div></div>
        <div><div className="eyebrow mb-2">Approver</div><div className="flex flex-wrap gap-1">{doc.approver.map(rid => <RolePill key={rid} r={rolesById[rid]} onOpen={onOpen} />)}</div></div>
      </div>
      <Section title="Sections">
        <ol className="list-decimal pl-5 space-y-1 text-[13px] text-[color:var(--ink-dim)]">
          {doc.sections.map((s, i) => <li key={i}><span className="font-mono text-[12.5px]">{s}</span></li>)}
        </ol>
      </Section>
      <Section title={`Touchpoints · ${touchpoints.length}`}>
        <ul className="space-y-1">
          {touchpoints.map(s => (
            <li key={s.id}>
              <button onClick={() => onOpen({ type: "stage", id: s.id })}
                className="w-full text-left flex items-baseline gap-3 py-2 px-2 -mx-2 rounded hover:bg-white/5">
                <span className="font-mono text-[10.5px] text-[color:var(--ink-faint)] tabular-nums">{String(stages.indexOf(s) + 1).padStart(2, "0")}</span>
                <span className="text-[13.5px] text-[color:var(--ink)]">{s.label}</span>
                <span className="ml-auto text-[11px] text-[color:var(--ink-faint)] capitalize">{s.docState}</span>
              </button>
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}

function CycleBody({ cycle, stages, rolesById, onOpen }) {
  const touchpoints = stages.filter(s => s.activeCycle === cycle.id);
  return (
    <>
      <H sub={cycle.jiraStatus}>{cycle.name}</H>
      <Section title="Position"><div className="text-[14px] text-[color:var(--ink-dim)]">Step {cycle.order} of 5 · Lead Time = sum of all five cycles, in half-days.</div></Section>
      <Section title="Rule"><p className="text-[14px] leading-relaxed text-[color:var(--ink)]">{cycle.rule}</p></Section>
      <Section title="Detail"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{cycle.details}</p></Section>
      <Section title="Owner roles"><div className="flex flex-wrap gap-1.5">{cycle.ownerRoles.map(rid => <RolePill key={rid} r={rolesById[rid]} onOpen={onOpen} />)}</div></Section>
      <Section title={`Stages in this cycle · ${touchpoints.length}`}>
        <ul className="space-y-1">
          {touchpoints.map(s => (
            <li key={s.id}>
              <button onClick={() => onOpen({ type: "stage", id: s.id })}
                className="w-full text-left flex items-baseline gap-3 py-2 px-2 -mx-2 rounded hover:bg-white/5">
                <span className="font-mono text-[10.5px] text-[color:var(--ink-faint)] tabular-nums">{String(stages.indexOf(s) + 1).padStart(2, "0")}</span>
                <span className="text-[13.5px] text-[color:var(--ink)]">{s.label}</span>
              </button>
            </li>
          ))}
        </ul>
      </Section>
    </>
  );
}

function StageBody({ stage, rolesById, docsById, cyclesById, onOpen }) {
  const doc = stage.activeDoc ? docsById[stage.activeDoc] : null;
  const cycle = stage.activeCycle ? cyclesById[stage.activeCycle] : null;
  return (
    <>
      <H sub={stage.artifactNote}>{stage.label}</H>
      <Section title="Description"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{stage.description}</p></Section>
      <Section title="Active roles"><div className="flex flex-wrap gap-1.5">{stage.activeRoles.map(rid => <RolePill key={rid} r={rolesById[rid]} onOpen={onOpen} />)}</div></Section>
      {doc && (
        <Section title={`Artifact · ${stage.docState === "new" ? "authored" : stage.docState === "closes" ? "approved" : "carries"}`}>
          <button onClick={() => onOpen({ type: "doc", id: doc.id })} className="cell w-full text-left p-4">
            <div className="flex items-center justify-between gap-3">
              <div>
                <div className="font-display text-[16px] font-medium text-[color:var(--ink)]">{doc.name}</div>
                {doc.jiraType && <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)] mt-1">Jira {doc.jiraType}</div>}
              </div>
              <span className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">AC · {doc.acFormat}</span>
            </div>
          </button>
        </Section>
      )}
      {cycle && (
        <Section title="Cycle">
          <button onClick={() => onOpen({ type: "cycle", id: cycle.id })} className="cycle-band w-full text-left p-4">
            <div className="font-display text-[16px] font-medium text-[color:var(--ink)]">{cycle.name}</div>
            <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)] mt-1">{cycle.jiraStatus}</div>
            <div className="text-[12.5px] text-[color:var(--ink-dim)] mt-2">{cycle.rule}</div>
          </button>
        </Section>
      )}
    </>
  );
}

function DomainBody({ domain, onOpen }) {
  const { roles, docs, cycles } = CONTENT;
  return (
    <>
      <H sub={domain.tagline}>{domain.name}</H>
      <Section title="Overview"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{domain.body}</p></Section>
      {domain.id === "roles" && (
        <>
          <Section title="Oversight"><RoleList roles={roles.filter(r => r.tier === "oversight")} onOpen={onOpen} /></Section>
          <Section title="Engagement"><RoleList roles={roles.filter(r => r.tier === "engagement")} onOpen={onOpen} /></Section>
          <Section title="Customer"><RoleList roles={roles.filter(r => r.tier === "customer")} onOpen={onOpen} /></Section>
        </>
      )}
      {domain.id === "docs" && (
        <>
          <Section title="First-class">
            <div className="space-y-1.5">{docs.filter(d => !d.derived).map(d => (
              <button key={d.id} onClick={() => onOpen({ type: "doc", id: d.id })} className="cell w-full text-left p-3 flex items-baseline gap-3 group">
                <span className="font-display text-[14px] text-[color:var(--ink)]">{d.name}</span>
                <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">{d.jiraType}</span>
                <span className="ml-auto font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">AC · {d.acFormat}</span>
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"
                  className="flex-shrink-0 text-[color:var(--ink-faint)] group-hover:text-[color:var(--accent-ink)] group-hover:translate-x-0.5 transition-all self-center">
                  <path d="M6 4l4 4-4 4"/>
                </svg>
              </button>
            ))}</div>
          </Section>
          <Section title="Derived">
            <div className="space-y-1.5">{docs.filter(d => d.derived).map(d => (
              <button key={d.id} onClick={() => onOpen({ type: "doc", id: d.id })} className="cell cell-customer w-full text-left p-3 flex items-baseline gap-3 group">
                <span className="font-display text-[14px] text-[color:var(--ink)]">{d.name}</span>
                <span className="customer-pill rounded-full px-2 py-0.5 text-[10px] font-mono uppercase tracking-[0.22em] ml-auto">Customer</span>
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"
                  className="flex-shrink-0 text-[color:var(--ink-faint)] group-hover:text-[color:var(--accent-ink)] group-hover:translate-x-0.5 transition-all self-center">
                  <path d="M6 4l4 4-4 4"/>
                </svg>
              </button>
            ))}</div>
          </Section>
        </>
      )}
      {domain.id === "cycles" && (
        <Section title="Four statuses">
          <div className="space-y-1.5">{cycles.map(c => (
            <button key={c.id} onClick={() => onOpen({ type: "cycle", id: c.id })} className="cycle-band w-full text-left p-4 group relative">
              <div className="flex items-baseline justify-between gap-3">
                <div className="font-display text-[15px] font-medium text-[color:var(--ink)]">{c.name}</div>
                <div className="flex items-center gap-2">
                  <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">0{c.order}</div>
                  <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"
                    className="flex-shrink-0 text-[color:var(--ink-faint)] group-hover:text-[color:var(--accent-ink)] group-hover:translate-x-0.5 transition-all">
                    <path d="M6 4l4 4-4 4"/>
                  </svg>
                </div>
              </div>
              <div className="text-[11px] text-[color:var(--ink-faint)] mt-1">{c.jiraStatus}</div>
              <div className="text-[12.5px] text-[color:var(--ink-dim)] mt-2">{c.rule}</div>
            </button>
          ))}</div>
        </Section>
      )}
    </>
  );
}

function PrincipleBody({ p }) {
  return (
    <>
      <H sub={p.summary}>{p.name}</H>
      <Section title="Detail"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{p.detail}</p></Section>
    </>
  );
}

function StatusBody({ status, stages, cyclesById, onOpen }) {
  if (!status) return null;
  const cycle = status.cycleId ? cyclesById[status.cycleId] : null;
  const touchpoints = stages.filter(s => (s.statusIds || []).includes(status.id));
  const kindLabel = status.kind === "engineering" ? "Engineering Card" : "Product Card";
  const customer = status.customerTouch || ["ec-uat-ready", "ec-uat-review"].includes(status.id);
  return (
    <>
      <H sub={kindLabel + (status.orthogonal ? " · orthogonal" : status.order ? ` · step ${status.order}` : "")}>{status.name}</H>
      <div className="flex flex-wrap items-center gap-2 mb-6">
        <span className="role-chip rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em]">{kindLabel}</span>
        {status.queue && <span className="role-chip rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em]">Queue</span>}
        {status.orthogonal && <span className="role-chip rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em]">Orthogonal</span>}
        {customer && <span className="customer-pill rounded-full px-2.5 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.22em]">Customer touch</span>}
      </div>
      <Section title="Description"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{status.description}</p></Section>
      {status.kind === "engineering" && status.owners && status.owners.length > 0 && (
        <Section title="Owners">
          <div className="flex flex-wrap gap-1.5">
            {status.owners.map(rid => {
              const r = CONTENT.roles.find(x => x.id === rid);
              return r ? <RolePill key={rid} r={r} onOpen={onOpen} /> : null;
            })}
          </div>
        </Section>
      )}
      {status.kind === "product" && (
        <div className="grid grid-cols-2 gap-4 mb-6">
          <div><div className="eyebrow mb-2">Initiative owner</div>
            <div className="text-[13px] font-mono uppercase tracking-[0.18em] text-[color:var(--ink)]">{status.initOwner || "—"}</div></div>
          <div><div className="eyebrow mb-2">Epic owner</div>
            <div className="text-[13px] font-mono uppercase tracking-[0.18em] text-[color:var(--ink)]">{status.epicOwner || "—"}</div></div>
        </div>
      )}
      {status.appliesTo && (
        <Section title="Applies to card type">
          <div className="text-[13px] text-[color:var(--ink)]">
            {status.appliesTo === "fb" ? "Feature, Bug (Task skips this status)" : "Feature, Bug, Task"}
          </div>
        </Section>
      )}
      {cycle && (
        <Section title="Cycle">
          <button onClick={() => onOpen({ type: "cycle", id: cycle.id })} className="cycle-band w-full text-left p-4">
            <div className="font-display text-[16px] font-medium text-[color:var(--ink)]">{cycle.name}</div>
            <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)] mt-1">{cycle.jiraStatus}</div>
          </button>
        </Section>
      )}
      {touchpoints.length > 0 && (
        <Section title={`Appears at · ${touchpoints.length} stage${touchpoints.length === 1 ? "" : "s"}`}>
          <ul className="space-y-1">
            {touchpoints.map(s => (
              <li key={s.id}>
                <button onClick={() => onOpen({ type: "stage", id: s.id })}
                  className="w-full text-left flex items-baseline gap-3 py-2 px-2 -mx-2 rounded hover:bg-white/5">
                  <span className="font-mono text-[10.5px] text-[color:var(--ink-faint)] tabular-nums">{String(stages.indexOf(s) + 1).padStart(2, "0")}</span>
                  <span className="text-[13.5px] text-[color:var(--ink)]">{s.label}</span>
                </button>
              </li>
            ))}
          </ul>
        </Section>
      )}
    </>
  );
}

function RuleBody({ rule, cyclesById, onOpen }) {
  if (!rule) return null;
  const cycle = rule.cycleId ? cyclesById[rule.cycleId] : null;
  return (
    <>
      <H sub={rule.summary}>{rule.name}</H>
      <Section title="Detail"><p className="text-[14px] leading-relaxed text-[color:var(--ink-dim)]">{rule.detail}</p></Section>
      {cycle ? (
        <Section title="Cycle">
          <button onClick={() => onOpen({ type: "cycle", id: cycle.id })} className="cycle-band w-full text-left p-4">
            <div className="font-display text-[16px] font-medium text-[color:var(--ink)]">{cycle.name}</div>
            <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)] mt-1">{cycle.jiraStatus}</div>
          </button>
        </Section>
      ) : (
        <Section title="Scope"><div className="text-[13px] text-[color:var(--ink-dim)] italic">Cross-cutting — applies across cycles.</div></Section>
      )}
    </>
  );
}

window.Drawer = Drawer;