// FOLIO — Tier-1 PDF lifecycle platform.
// Adobe Acrobat / Document Cloud competitor, fused with Studio composition
// and Document Management lifecycle. Brand: deep indigo.

(function () {
  const { useState, useMemo, useRef, useEffect } = React;
  const T = window.ArbiterTokens;
  const A = window.Arbiter || {};
  const Icons = window.Icons || {};
  const D = window.FOLIO_DATA;

  // ── Folio palette — deep indigo on cream ─────────────────────────────────
  const F = {
    indigo:    '#4338CA',
    indigoDk:  '#312E81',
    indigoLt:  '#6366F1',
    indigoBg:  'rgba(67,56,202,0.06)',
    indigoBg2: 'rgba(67,56,202,0.10)',
    ink:       '#1E1B4B',
    gold:      '#C9A84C',
    crim:      '#C23030',
    crimBg:    'rgba(194,48,48,0.06)',
    green:     '#1B7A4A',
    greenBg:   'rgba(27,122,74,0.06)',
    amber:     '#D97706',
    amberBg:   'rgba(217,119,6,0.06)',
    slate:     '#475569',
  };

  // ── fl style object — same shape as window.rk / window.cal / window.cr ──
  const fl = {
    container:   { flex: 1, overflow: 'auto', background: T.color.bg.primary },
    header:      { padding: '16px 24px', borderBottom: `1px solid ${T.color.border.light}`,
                   background: T.color.bg.card, display: 'flex', alignItems: 'center',
                   justifyContent: 'space-between' },
    headerTitle: { display: 'flex', alignItems: 'center', gap: '12px' },
    flIcon:      { width: 32, height: 32, borderRadius: 6,
                   background: `linear-gradient(135deg, ${F.indigo} 0%, ${F.indigoDk} 100%)`,
                   display: 'flex', alignItems: 'center', justifyContent: 'center',
                   color: '#fff', fontWeight: 700, fontSize: 14, letterSpacing: '-0.04em' },
    title:       { fontSize: 18, fontWeight: 700, color: T.color.text.primary, letterSpacing: '-0.02em' },
    subtitle:    { fontSize: 12, color: T.color.text.tertiary, marginTop: 1 },
    tabs:        { display: 'flex', gap: 0, borderBottom: `1px solid ${T.color.border.light}`,
                   background: T.color.bg.card, padding: '0 24px', overflowX: 'auto' },
    tab:         { padding: '10px 14px', fontSize: 12, fontWeight: 500,
                   color: T.color.text.tertiary, cursor: 'pointer', background: 'none',
                   borderTopStyle: 'none', borderRightStyle: 'none', borderLeftStyle: 'none',
                   borderBottomWidth: 2, borderBottomStyle: 'solid', borderBottomColor: 'transparent',
                   fontFamily: T.font.family, transition: 'all 0.15s', marginBottom: -1, whiteSpace: 'nowrap' },
    tabActive:   { color: F.indigo, borderBottomColor: F.indigo, fontWeight: 600 },
    body:        { padding: '20px 24px' },
    card:        { background: T.color.bg.card, border: `1px solid ${T.color.border.light}`,
                   borderRadius: T.radius.lg, overflow: 'hidden', marginBottom: 16 },
    cardH:       { padding: '10px 16px', borderBottom: `1px solid ${T.color.border.light}`,
                   fontSize: 12, fontWeight: 600, color: T.color.text.primary,
                   display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
    stat:        { display: 'flex', flexDirection: 'column', gap: 2,
                   padding: '12px 16px', background: T.color.bg.secondary,
                   borderRadius: 6, border: `1px solid ${T.color.border.light}` },
    statLabel:   { fontSize: 10, fontWeight: 600, color: T.color.text.tertiary,
                   textTransform: 'uppercase', letterSpacing: '0.08em' },
    statValue:   { fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
                   lineHeight: 1.1, color: T.color.text.primary },
    statHint:    { fontSize: 10, color: T.color.text.tertiary, marginTop: 2 },
    tag:         { display: 'inline-flex', alignItems: 'center', padding: '2px 8px',
                   borderRadius: 10, fontSize: 10, fontWeight: 600 },
    btnPrimary:  { padding: '6px 14px', borderRadius: 6, background: F.indigo,
                   border: 'none', color: '#fff', fontSize: 12, fontWeight: 700,
                   cursor: 'pointer', fontFamily: T.font.family },
    btnSecondary:{ padding: '6px 12px', borderRadius: 6,
                   border: `1px solid ${T.color.border.medium}`, background: 'transparent',
                   color: T.color.text.secondary, fontSize: 11, fontWeight: 500,
                   cursor: 'pointer', fontFamily: T.font.family },
    btnDanger:   { padding: '6px 12px', borderRadius: 6,
                   border: `1px solid ${F.crim}`, background: 'transparent',
                   color: F.crim, fontSize: 11, fontWeight: 600,
                   cursor: 'pointer', fontFamily: T.font.family },
    chip:        { padding: '3px 10px', fontSize: 11, borderRadius: 12,
                   border: `1px solid ${T.color.border.medium}`, background: 'transparent',
                   color: T.color.text.secondary, cursor: 'pointer', fontFamily: T.font.family,
                   whiteSpace: 'nowrap' },
    chipActive:  { background: F.indigoBg, color: F.indigo, borderColor: F.indigo },
    th:          { padding: '8px 12px', fontSize: 10, fontWeight: 600,
                   color: T.color.text.tertiary, textTransform: 'uppercase',
                   letterSpacing: '0.08em', textAlign: 'left' },
    td:          { padding: '8px 12px', fontSize: 12, color: T.color.text.primary,
                   borderBottom: `1px solid ${T.color.border.light}` },
  };
  window.fl = fl;
  window.FF = F;

  // ── Shared helpers ───────────────────────────────────────────────────────
  const Pill = ({ children, color, strong }) => (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 8px', borderRadius: 10, fontSize: 10, fontWeight: 600,
      background: strong ? color : (color || T.color.text.tertiary) + '18',
      color: strong ? '#fff' : (color || T.color.text.secondary),
    }}>{children}</span>
  );

  const KpiTile = ({ label, value, color, hint }) => (
    <div style={{ ...fl.stat, padding: '8px 14px', minWidth: 110 }}>
      <span style={fl.statLabel}>{label}</span>
      <span style={{ ...fl.statValue, fontSize: 20, color: color || T.color.text.primary }}>{value}</span>
      {hint && <span style={fl.statHint}>{hint}</span>}
    </div>
  );

  const statusColor = (s) => ({
    'Draft': F.amber, 'In Review': F.indigo, 'Final': F.green, 'Filed': F.green,
    'Signed': F.green, 'Sent': F.indigo, 'Received': F.indigoLt, 'Produced': F.slate,
    'Archived': T.color.text.tertiary, 'Quarantined': F.crim, 'Template': F.gold,
  }[s] || T.color.text.tertiary);

  const fmt = (iso) => iso ? new Date(iso).toLocaleString('en-US', {
    month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit',
  }) : '—';
  const fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString('en-US', {
    month: 'short', day: 'numeric', year: 'numeric',
  }) : '—';

  const flash = (kind, message, title) => A.toast?.({ kind, title, message });

  // ═══════════════════════════════════════════════════════════════════════════
  // 1. WORKBENCH — Active document with full toolbar
  // ═══════════════════════════════════════════════════════════════════════════
  // Tool → visual config for marks the user places on a page
  const TOOL_VISUAL = {
    highlight: { label: 'Highlight', size: { w: 90, h: 16 }, render: 'rect',     color: '#FFD60A', bg: '#FFD60A77' },
    underline: { label: 'Underline', size: { w: 90, h: 2  }, render: 'rect',     color: '#0EA5E9', bg: '#0EA5E9' },
    strike:    { label: 'Strike',    size: { w: 90, h: 2  }, render: 'rect',     color: '#C23030', bg: '#C23030' },
    redact:    { label: 'Redact',    size: { w: 90, h: 16 }, render: 'rect',     color: '#000',    bg: '#000' },
    comment:   { label: 'Comment',   size: { w: 22, h: 22 }, render: 'badge',    color: '#D97706' },
    sticky:    { label: 'Sticky',    size: { w: 18, h: 18 }, render: 'sticky',   color: '#FFD60A' },
    stamp:     { label: 'Stamp',     size: { w: 100, h: 20 }, render: 'stamp',   color: '#C23030' },
    text:      { label: 'Text',      size: { w: 14, h: 14 }, render: 'text-glyph', color: '#4338CA' },
    pen:       { label: 'Pen',       size: { w: 10, h: 10 }, render: 'circle',   color: '#4338CA' },
    shape:     { label: 'Shape',     size: { w: 80, h: 50 }, render: 'shape',    color: '#4338CA' },
  };
  let MARK_SEQ = 0;
  const newMarkId = () => 'm-' + (++MARK_SEQ) + '-' + Date.now().toString(36).slice(-4);

  function FoWorkbench() {
    const doc = D.activeDoc;
    const [tool, setTool] = useState('select');
    const [zoom, setZoom] = useState(100);
    const [activePage, setActivePage] = useState(9);
    const [showSidebar, setShowSidebar] = useState(true);
    const [marks, setMarks] = useState([]);
    const [hoveredMarkId, setHoveredMarkId] = useState(null);
    const pageRef = useRef(null);

    const page = D.pages.find(p => p.n === activePage) || D.pages[0];
    const pageComments = D.comments.filter(c => c.page === activePage);
    const pageMarks = marks.filter(m => m.page === activePage);

    const addMark = (xPct, yPct) => {
      if (tool === 'select') return;
      const cfg = TOOL_VISUAL[tool];
      if (!cfg) return;
      setMarks(prev => [...prev, {
        id: newMarkId(), page: activePage, tool,
        x: xPct, y: yPct, at: new Date().toISOString(),
        author: 'M. Kirkland',
      }]);
      flash('success', `${cfg.label} added at p.${activePage}`);
    };
    const removeMark = (id) => {
      setMarks(prev => prev.filter(m => m.id !== id));
      flash('info', 'Mark removed');
    };

    const onPageClick = (e) => {
      if (tool === 'select') return;
      // Don't add a mark if clicking on an existing mark
      if (e.target.dataset?.mark) return;
      const r = pageRef.current?.getBoundingClientRect();
      if (!r) return;
      const x = (e.clientX - r.left) / r.width;
      const y = (e.clientY - r.top) / r.height;
      if (x < 0 || x > 1 || y < 0 || y > 1) return;
      addMark(x, y);
    };

    // ── Right-click factories ─────────────────────────────────────────────
    const onPageRailContext = (e, p) => {
      A.ContextMenu?.open(e, [
        { heading: `Page ${p.n} · ${p.heading}` },
        { label: 'Jump to page', onSelect: () => setActivePage(p.n) },
        { label: 'Duplicate page', onSelect: () => flash('success', `Page ${p.n} duplicated`) },
        { label: 'Insert blank before', onSelect: () => flash('success', `Blank page inserted before ${p.n}`) },
        { label: 'Insert blank after',  onSelect: () => flash('success', `Blank page inserted after ${p.n}`) },
        { label: 'Insert from another PDF…', onSelect: () => flash('info', 'Open file picker') },
        { separator: true },
        { label: 'Rotate 90° CW',     onSelect: () => flash('info', `Page ${p.n} rotated`) },
        { label: 'Rotate 180°',       onSelect: () => flash('info', `Page ${p.n} rotated 180°`) },
        { label: 'Crop page…',        onSelect: () => flash('info', 'Open crop tool') },
        { separator: true },
        { label: 'Mark as exhibit cover', onSelect: () => flash('success', `Page ${p.n} marked as exhibit cover`) },
        { label: 'Add bookmark here',     onSelect: () => flash('success', `Bookmark added at page ${p.n}`) },
        { label: 'Set page label…',       onSelect: () => flash('info', 'Edit page label') },
        { separator: true },
        { label: 'Extract this page → new PDF', onSelect: () => flash('success', `Extracted p.${p.n}`) },
        { label: 'Split here',                   onSelect: () => flash('info', `Split before p.${p.n}`) },
        { separator: true },
        { label: 'Delete page', danger: true, disabled: doc.pages <= 1,
          onSelect: () => flash('warn', `Page ${p.n} deleted (undo via Versions)`) },
      ]);
    };

    const onCommentContext = (e, c) => {
      A.ContextMenu?.open(e, [
        { heading: `${c.author}'s comment on p.${c.page}` },
        { label: 'Reply',  onSelect: () => flash('info', `Reply to ${c.author}`) },
        { label: c.resolved ? 'Reopen' : 'Resolve',
          onSelect: () => { setMarks(prev => prev); flash(c.resolved ? 'info' : 'success', c.resolved ? 'Comment reopened' : 'Comment resolved'); } },
        { label: 'Mark unread', onSelect: () => flash('info', 'Marked unread') },
        { separator: true },
        { label: 'Edit comment',  onSelect: () => flash('info', 'Edit text') },
        { label: 'Assign to…',    submenu: [
          { label: 'M. Kirkland',  onSelect: () => flash('success', 'Assigned to M. Kirkland') },
          { label: 'L. Torres',    onSelect: () => flash('success', 'Assigned to L. Torres') },
          { label: 'J. Park',      onSelect: () => flash('success', 'Assigned to J. Park') },
        ]},
        { separator: true },
        { label: 'Copy comment text', onSelect: () => { try { navigator.clipboard?.writeText(c.text); A.toast?.({ kind: 'success', message: 'Copied' }); } catch {} } },
        { label: 'Copy link',         onSelect: () => { try { navigator.clipboard?.writeText(`https://arbiter.law/d/${doc.id}#c=${c.id}`); A.toast?.({ kind: 'success', message: 'Link copied' }); } catch {} } },
        { separator: true },
        { label: 'Delete comment', danger: true, onSelect: () => flash('warn', 'Comment deleted') },
      ]);
    };

    const onPageBodyContext = (e) => {
      // Only fire on the page background, not on existing marks
      if (e.target.dataset?.mark) return;
      const r = pageRef.current?.getBoundingClientRect();
      const xPct = r ? (e.clientX - r.left) / r.width : 0.5;
      const yPct = r ? (e.clientY - r.top) / r.height : 0.5;
      A.ContextMenu?.open(e, [
        { heading: `Page ${activePage} · ${page.heading}` },
        { label: 'Add comment here',     onSelect: () => { setTool('comment'); addMark(xPct, yPct); } },
        { label: 'Add sticky note here', onSelect: () => { setTool('sticky');  addMark(xPct, yPct); } },
        { label: 'Highlight selection',  onSelect: () => { setTool('highlight'); addMark(xPct, yPct); } },
        { label: 'Add stamp here',       submenu: D.stamps.slice(0, 6).map(s => ({
          label: s.label,
          onSelect: () => { setTool('stamp'); addMark(xPct, yPct); flash('success', `Applied ${s.label}`); },
        })) },
        { separator: true },
        { label: 'Insert signature here',     onSelect: () => flash('success', 'Signature placeholder added') },
        { label: 'Insert text box',           onSelect: () => { setTool('text'); addMark(xPct, yPct); } },
        { label: 'Redact this region',        danger: true, onSelect: () => { setTool('redact'); addMark(xPct, yPct); } },
        { separator: true },
        { label: 'Cite this page in brief',   onSelect: () => flash('success', `Inserted citation: ${doc.name} at ${activePage}`) },
        { label: 'Copy page as image',        onSelect: () => flash('info', 'Page copied to clipboard') },
        { label: 'Print this page only',      onSelect: () => flash('info', 'Print preview') },
        { separator: true },
        { label: 'Page properties…',          onSelect: () => flash('info', 'Open page properties') },
      ]);
    };

    const onMarkContext = (e, m) => {
      e.stopPropagation();
      const cfg = TOOL_VISUAL[m.tool];
      A.ContextMenu?.open(e, [
        { heading: `${cfg.label} mark by ${m.author}` },
        { label: 'Convert to comment', onSelect: () => flash('info', 'Converted to threaded comment') },
        { label: 'Edit…',              onSelect: () => flash('info', 'Edit mark properties') },
        { separator: true },
        { label: 'Copy mark', onSelect: () => flash('info', 'Mark copied') },
        { label: 'Move to another page…', onSelect: () => flash('info', 'Open page picker') },
        { separator: true },
        { label: 'Remove mark', danger: true, onSelect: () => removeMark(m.id) },
      ]);
    };

    return (
      <div>
        {/* Top doc bar */}
        <div style={{ ...fl.card, marginBottom: 10 }}>
          <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
            <span style={{ width: 26, height: 32, borderRadius: 3,
              background: '#fff', border: `1px solid ${T.color.border.medium}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 9, fontWeight: 700, color: F.crim }}>PDF</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: T.color.text.primary,
                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{doc.name}</div>
              <div style={{ fontSize: 11, color: T.color.text.tertiary, display: 'flex', gap: 8, marginTop: 2 }}>
                <span>{doc.matter}</span>
                <span>·</span>
                <span>{doc.pages} pages</span>
                <span>·</span>
                <span>{doc.size}</span>
                <span>·</span>
                <span>v{doc.versions[0].v}</span>
              </div>
            </div>
            <Pill color={statusColor(doc.status)}>{doc.status}</Pill>
            {doc.privilege === 'work-product' && <Pill color="#7C3AED">WORK PRODUCT</Pill>}
            {doc.confidentiality === 'AEO' && <Pill color={F.crim}>AEO</Pill>}
            {doc.locked && <Pill color={F.amber}>🔒 Locked</Pill>}
            <button style={fl.btnSecondary} onClick={() => flash('info', `Saved version ${doc.versions[0].v + 1}`)}>Save version</button>
            <button style={fl.btnPrimary} onClick={() => flash('success', `Sent ${doc.name} → SignDesk`)}>Send to SignDesk</button>
          </div>
        </div>

        {/* Tool rail + page + inspector */}
        <div style={{ display: 'grid',
          gridTemplateColumns: showSidebar ? '180px 1fr 280px' : '1fr 280px',
          gap: 10, alignItems: 'start' }}>

          {/* Page rail */}
          {showSidebar && (
            <div style={{ ...fl.card, marginBottom: 0, maxHeight: 720, overflow: 'auto' }}>
              <div style={fl.cardH}>
                <span>Pages · {doc.pages}</span>
                <button style={{ background: 'none', border: 'none', cursor: 'pointer',
                  fontSize: 14, color: T.color.text.tertiary }}
                  onClick={() => setShowSidebar(false)}>‹</button>
              </div>
              <div style={{ padding: 8 }}>
                {D.pages.map(p => {
                  const isActive = p.n === activePage;
                  const pMarks = marks.filter(m => m.page === p.n).length;
                  return (
                    <div key={p.n} onClick={() => setActivePage(p.n)}
                      onContextMenu={(e) => onPageRailContext(e, p)}
                      style={{
                        padding: 6, borderRadius: 6, marginBottom: 4, cursor: 'pointer',
                        background: isActive ? F.indigoBg : 'transparent',
                        border: isActive ? `1px solid ${F.indigo}` : '1px solid transparent',
                        transition: 'background 120ms',
                      }}>
                      <div style={{
                        height: 90, background: '#fff',
                        border: `1px solid ${T.color.border.light}`, borderRadius: 3,
                        position: 'relative', boxShadow: isActive ? `0 0 0 2px ${F.indigo}33` : 'none',
                      }}>
                        {/* Faux page content */}
                        <div style={{ padding: 6 }}>
                          <div style={{ height: 4, background: T.color.border.light, borderRadius: 1, marginBottom: 3, width: '70%' }} />
                          {Array.from({ length: 8 }).map((_, j) => (
                            <div key={j} style={{ height: 1.5, background: T.color.border.light, borderRadius: 1, marginBottom: 2,
                              width: `${65 + (j % 3) * 10}%` }} />
                          ))}
                        </div>
                        {(p.annotations + pMarks) > 0 && (
                          <span style={{ position: 'absolute', top: 2, right: 2,
                            width: 12, height: 12, borderRadius: '50%', background: F.amber,
                            color: '#fff', fontSize: 8, fontWeight: 700,
                            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            {p.annotations + pMarks}
                          </span>
                        )}
                        {p.redactions > 0 && (
                          <span style={{ position: 'absolute', bottom: 2, right: 2,
                            padding: '0 4px', borderRadius: 2, background: '#000',
                            color: '#fff', fontSize: 8, fontWeight: 700 }}>
                            ▮{p.redactions}
                          </span>
                        )}
                        {p.hasIssue && (
                          <span style={{ position: 'absolute', top: 2, left: 2,
                            width: 8, height: 8, borderRadius: '50%', background: F.crim }} />
                        )}
                      </div>
                      <div style={{ fontSize: 9, color: T.color.text.tertiary, marginTop: 3,
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ fontFamily: T.font.mono }}>{p.n}</span>
                        <span style={{ fontSize: 8, overflow: 'hidden', textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap', maxWidth: 100, textAlign: 'right' }}>{p.heading}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Canvas */}
          <div>
            {/* Tool toolbar */}
            <div style={{ ...fl.card, marginBottom: 10 }}>
              <div style={{ padding: '8px 12px', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
                {!showSidebar && <button style={fl.btnSecondary} onClick={() => setShowSidebar(true)}>Pages ›</button>}
                <div style={{ display: 'flex', gap: 2, padding: 2, background: T.color.bg.secondary, borderRadius: 6 }}>
                  {D.annotationTools.map(t => (
                    <button key={t.id} onClick={() => setTool(t.id)}
                      title={t.label + (t.hint ? ` (${t.hint})` : '')}
                      style={{
                        padding: '6px 10px', borderRadius: 4, border: 'none', cursor: 'pointer',
                        background: tool === t.id ? (t.danger ? F.crim : F.indigo) : 'transparent',
                        color: tool === t.id ? '#fff' : (t.danger ? F.crim : T.color.text.secondary),
                        fontSize: 13, fontWeight: 600, fontFamily: T.font.family,
                        transition: 'all 120ms',
                      }}>{t.icon}</button>
                  ))}
                </div>
                <span style={{ width: 1, height: 18, background: T.color.border.light, margin: '0 8px' }} />
                <button style={fl.btnSecondary} onClick={() => setZoom(Math.max(25, zoom - 10))}>−</button>
                <span style={{ fontFamily: T.font.mono, fontSize: 11, minWidth: 44, textAlign: 'center' }}>{zoom}%</span>
                <button style={fl.btnSecondary} onClick={() => setZoom(Math.min(400, zoom + 10))}>+</button>
                <button style={fl.btnSecondary} onClick={() => setZoom(100)}>Fit</button>
                <span style={{ width: 1, height: 18, background: T.color.border.light, margin: '0 8px' }} />
                <button style={fl.btnSecondary} onClick={() => setActivePage(Math.max(1, activePage - 1))}>‹</button>
                <span style={{ fontFamily: T.font.mono, fontSize: 11, minWidth: 60, textAlign: 'center' }}>
                  Page {activePage} / {doc.pages}
                </span>
                <button style={fl.btnSecondary} onClick={() => setActivePage(Math.min(doc.pages, activePage + 1))}>›</button>
                <div style={{ flex: 1 }} />
                <span style={{ fontSize: 10, color: T.color.text.tertiary }}>
                  Tool: <b style={{ color: F.indigo }}>{D.annotationTools.find(t => t.id === tool)?.label}</b>
                </span>
              </div>
            </div>

            {/* Faux page render */}
            <div style={{ ...fl.card, marginBottom: 0, padding: 24, background: '#E8E2D6',
              minHeight: 600, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div ref={pageRef}
                onClick={onPageClick}
                onContextMenu={onPageBodyContext}
                style={{
                width: `${600 * (zoom / 100)}px`,
                maxWidth: '100%',
                background: '#fff', border: `1px solid ${T.color.border.medium}`,
                borderRadius: 3,
                boxShadow: '0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04)',
                padding: '60px 70px', minHeight: 720, position: 'relative',
                cursor: tool === 'select' ? 'default' : tool === 'redact' ? 'crosshair' : 'copy',
              }}>
                {/* AEO watermark */}
                <div style={{ position: 'absolute', top: '50%', left: '50%',
                  transform: 'translate(-50%, -50%) rotate(-30deg)', pointerEvents: 'none',
                  fontSize: 60, fontWeight: 800, color: F.crim, opacity: 0.06,
                  letterSpacing: '0.15em', whiteSpace: 'nowrap' }}>
                  ATTORNEYS' EYES ONLY
                </div>
                {/* Caption-style header */}
                <div style={{ textAlign: 'center', marginBottom: 24, fontFamily: 'Times, serif' }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: '#000' }}>UNITED STATES DISTRICT COURT</div>
                  <div style={{ fontSize: 12, fontWeight: 600, color: '#000' }}>SOUTHERN DISTRICT OF NEW YORK</div>
                </div>
                <div style={{ fontFamily: 'Times, serif', fontSize: 12, lineHeight: 1.8, color: '#1a1a1a' }}>
                  <div style={{ fontWeight: 700, marginBottom: 8 }}>{page.heading}</div>
                  <p style={{ marginBottom: 12 }}>
                    Plaintiff Redstone Capital ("Plaintiff") respectfully submits this opposition to
                    Defendant Meridian Holdings's ("Defendant") motion for summary judgment.{' '}
                    <span style={{ background: '#FFD60A77' }}>The motion fails on the merits because the record</span>{' '}
                    contains genuine disputes of material fact precluding summary disposition under Rule 56(a).
                  </p>
                  <p style={{ marginBottom: 12 }}>
                    First, the deposition testimony of former Controller R. Davis directly contradicts the
                    declarations submitted in support of the motion. <em>See</em> Davis Tr. at 142:18–144:03.
                    Second, the Q3 2022 board minutes — which Defendant withheld from initial production until
                    March 2026 — establish that Defendant's senior leadership knew of the material misstatements
                    and elected not to disclose them.
                  </p>
                  {/* Comment marker */}
                  {pageComments.length > 0 && (
                    <div style={{ position: 'absolute', right: -48, top: 200,
                      width: 32, height: 32, borderRadius: '50%', background: F.amber,
                      color: '#fff', fontSize: 13, fontWeight: 700,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      cursor: 'pointer', boxShadow: '0 2px 6px rgba(0,0,0,0.15)' }}
                      title={`${pageComments.length} comment${pageComments.length > 1 ? 's' : ''} on this page`}>
                      {pageComments.length}
                    </div>
                  )}
                  <p style={{ marginBottom: 12 }}>
                    Third, the expert testimony of Dr. Elaine Mitchell — properly disclosed under Rule 26(a)(2) —
                    establishes the methodology for Plaintiff's damages model. <em>See</em>{' '}
                    <span style={{ color: F.indigo, textDecoration: 'underline' }}>Hawthorne v. Aurora Industries</span>,
                    482 F.3d 1108, 1117 (9th Cir. 2007). Defendant's challenge to that methodology is for the jury,
                    not the Court.
                  </p>
                  {/* Faux redaction */}
                  <p style={{ marginBottom: 12 }}>
                    The transactional history shows that{' '}
                    <span style={{ background: '#000', color: 'transparent', padding: '0 4px' }}>R. Davis</span>{' '}
                    received compensation linked to the very disclosures at issue, in violation of internal policy{' '}
                    <span style={{ background: '#000', color: 'transparent', padding: '0 4px' }}>HCM-1142</span>.
                  </p>
                </div>
                {/* Page footer with Bates */}
                <div style={{ position: 'absolute', bottom: 24, left: 0, right: 0,
                  textAlign: 'center', fontSize: 9, color: '#9CA3AF', fontFamily: T.font.mono }}>
                  MERIDIAN-{String(7340 + activePage).padStart(6, '0')}
                </div>
                <div style={{ position: 'absolute', bottom: 24, right: 24,
                  fontSize: 9, color: '#9CA3AF', fontFamily: 'Times, serif' }}>
                  {activePage}
                </div>

                {/* User-placed marks */}
                {pageMarks.map(m => {
                  const cfg = TOOL_VISUAL[m.tool];
                  if (!cfg) return null;
                  const hovered = hoveredMarkId === m.id;
                  const baseStyle = {
                    position: 'absolute',
                    left: `${m.x * 100}%`, top: `${m.y * 100}%`,
                    transform: 'translate(-50%, -50%)',
                    cursor: 'pointer', zIndex: 5,
                    transition: 'transform 120ms, box-shadow 120ms',
                    outline: hovered ? `2px solid ${F.indigo}` : 'none',
                    outlineOffset: 2,
                  };
                  const onMouseEnter = () => setHoveredMarkId(m.id);
                  const onMouseLeave = () => setHoveredMarkId(null);
                  const ctxHandler = (e) => onMarkContext(e, m);
                  if (cfg.render === 'rect') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, width: cfg.size.w, height: cfg.size.h,
                        background: cfg.bg, borderRadius: 2 }} />;
                  }
                  if (cfg.render === 'badge') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, width: cfg.size.w, height: cfg.size.h,
                        borderRadius: '50%', background: cfg.color, color: '#fff',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 11, fontWeight: 700, boxShadow: '0 2px 6px rgba(0,0,0,0.2)' }}>C</div>;
                  }
                  if (cfg.render === 'sticky') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, width: cfg.size.w, height: cfg.size.h,
                        background: cfg.color, border: '1px solid #B8860B',
                        boxShadow: '1px 1px 3px rgba(0,0,0,0.18)' }} />;
                  }
                  if (cfg.render === 'stamp') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, padding: '2px 8px',
                        border: `1.5px solid ${cfg.color}`, color: cfg.color,
                        fontSize: 9, fontWeight: 700, fontFamily: T.font.mono,
                        letterSpacing: '0.06em',
                        transform: 'translate(-50%, -50%) rotate(-6deg)' }}>DRAFT</div>;
                  }
                  if (cfg.render === 'text-glyph') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, width: cfg.size.w, height: cfg.size.h,
                        color: cfg.color, fontSize: 14, fontWeight: 700,
                        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>T</div>;
                  }
                  if (cfg.render === 'circle') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, width: cfg.size.w, height: cfg.size.h,
                        background: cfg.color, borderRadius: '50%' }} />;
                  }
                  if (cfg.render === 'shape') {
                    return <div key={m.id} data-mark={m.id}
                      onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}
                      onContextMenu={ctxHandler}
                      title={`${cfg.label} — right-click for options`}
                      style={{ ...baseStyle, width: cfg.size.w, height: cfg.size.h,
                        border: `2px solid ${cfg.color}`, borderRadius: 2 }} />;
                  }
                  return null;
                })}
              </div>
            </div>
          </div>

          {/* Inspector / Comments rail */}
          <div style={{ ...fl.card, marginBottom: 0 }}>
            <div style={fl.cardH}>
              <span>Page {activePage} · {pageComments.length} comment{pageComments.length === 1 ? '' : 's'}</span>
              <button style={{ ...fl.btnSecondary, padding: '2px 8px', fontSize: 10 }}>+ Add</button>
            </div>
            <div style={{ padding: 12, maxHeight: 720, overflow: 'auto' }}>
              {pageComments.length === 0 ? (
                <div style={{ fontSize: 11, color: T.color.text.tertiary, padding: '24px 0', textAlign: 'center' }}>
                  No comments on this page.
                  <br /><br />
                  Press <b>C</b> to add one, or use the comment tool.
                </div>
              ) : pageComments.map(c => (
                <div key={c.id}
                  onContextMenu={(e) => onCommentContext(e, c)}
                  style={{
                  padding: 10, marginBottom: 8, borderRadius: 6,
                  background: c.resolved ? T.color.bg.secondary : F.amberBg,
                  borderLeft: `3px solid ${c.resolved ? T.color.text.tertiary : F.amber}`,
                  opacity: c.resolved ? 0.65 : 1,
                  cursor: 'context-menu',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                    <span style={{ fontSize: 11, fontWeight: 600, color: T.color.text.primary }}>{c.author}</span>
                    <span style={{ fontSize: 9, color: T.color.text.tertiary, fontFamily: T.font.mono }}>
                      {fmt(c.at)}
                    </span>
                  </div>
                  <div style={{ fontSize: 11, color: T.color.text.secondary, lineHeight: 1.5 }}>{c.text}</div>
                  {c.replies.map((r, i) => (
                    <div key={i} style={{ marginTop: 8, paddingLeft: 10, borderLeft: `2px solid ${T.color.border.light}` }}>
                      <div style={{ fontSize: 10, fontWeight: 600, color: T.color.text.secondary }}>{r.author}</div>
                      <div style={{ fontSize: 11, color: T.color.text.secondary, lineHeight: 1.4 }}>{r.text}</div>
                    </div>
                  ))}
                  {c.resolved && (
                    <div style={{ marginTop: 6, fontSize: 9, color: F.green, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                      ✓ Resolved
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 2. LIBRARY — All PDFs across the firm by lifecycle
  // ═══════════════════════════════════════════════════════════════════════════
  function FoLibrary() {
    const [bucket, setBucket] = useState('all');
    const [query, setQuery] = useState('');

    const buckets = [
      { id: 'all',       label: 'All PDFs',     test: () => true },
      { id: 'draft',     label: 'Drafts',       test: d => d.status === 'Draft' },
      { id: 'review',    label: 'In Review',    test: d => d.status === 'In Review' },
      { id: 'final',     label: 'Final',        test: d => d.status === 'Final' || d.status === 'Filed' },
      { id: 'signed',    label: 'Signed',       test: d => d.status === 'Signed' || d.status === 'Sent' },
      { id: 'produced',  label: 'Produced',     test: d => d.status === 'Produced' },
      { id: 'received',  label: 'Received',     test: d => d.status === 'Received' },
      { id: 'archived',  label: 'Archived',     test: d => d.status === 'Archived' || d.status === 'Quarantined' },
      { id: 'tpl',       label: 'Templates',    test: d => d.status === 'Template' },
    ];
    const active = buckets.find(b => b.id === bucket);
    const q = query.trim().toLowerCase();
    const filtered = D.library.filter(active.test).filter(d =>
      !q || d.name.toLowerCase().includes(q) || d.matter.toLowerCase().includes(q));

    return (
      <div>
        {/* KPI strip */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="All PDFs"  value={D.library.length} />
          <KpiTile label="In review" value={D.library.filter(d => d.status === 'In Review').length} color={F.indigo} />
          <KpiTile label="Pending signature" value={D.library.filter(d => d.status === 'Sent').length} color={F.amber} />
          <KpiTile label="Filed"     value={D.library.filter(d => d.status === 'Filed').length}  color={F.green} />
          <KpiTile label="Produced"  value={D.library.filter(d => d.status === 'Produced').length} />
          <KpiTile label="Quarantined" value={D.library.filter(d => d.status === 'Quarantined').length}
            color={D.library.filter(d => d.status === 'Quarantined').length ? F.crim : null} />
        </div>

        <div style={fl.card}>
          <div style={{ ...fl.cardH, gap: 10, flexWrap: 'wrap' }}>
            <input value={query} onChange={(e) => setQuery(e.target.value)}
              placeholder="Search PDFs by name or matter…"
              style={{ flex: 1, minWidth: 200, padding: '5px 10px', fontSize: 11,
                border: `1px solid ${T.color.border.light}`, borderRadius: 4,
                background: T.color.bg.card, color: T.color.text.primary, outline: 'none',
                fontFamily: T.font.family, textTransform: 'none' }} />
            <button style={fl.btnPrimary}>+ Upload</button>
          </div>
          <div style={{ padding: '8px 16px', display: 'flex', gap: 6, flexWrap: 'wrap',
            borderBottom: `1px solid ${T.color.border.light}` }}>
            {buckets.map(b => {
              const n = D.library.filter(b.test).length;
              const active = bucket === b.id;
              return (
                <button key={b.id} onClick={() => setBucket(b.id)}
                  style={{ ...fl.chip, ...(active ? fl.chipActive : {}), padding: '3px 10px' }}>
                  {b.label} <span style={{ marginLeft: 6, fontFamily: T.font.mono, opacity: 0.7 }}>{n}</span>
                </button>
              );
            })}
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead style={{ background: T.color.bg.secondary }}>
              <tr>
                <th style={fl.th}>Name</th>
                <th style={fl.th}>Matter</th>
                <th style={fl.th}>Status</th>
                <th style={fl.th}>Pages</th>
                <th style={fl.th}>Size</th>
                <th style={fl.th}>Author</th>
                <th style={fl.th}>Modified</th>
                <th style={fl.th}>Tags</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(d => (
                <tr key={d.id} style={{ cursor: 'pointer' }}
                  onClick={() => flash('info', `Opening ${d.name}`)}
                  onMouseEnter={(e) => e.currentTarget.style.background = T.color.bg.secondary}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ ...fl.td, fontWeight: 600 }}>
                    <span style={{ display: 'inline-block', width: 18, height: 22, borderRadius: 2,
                      background: '#fff', border: `1px solid ${T.color.border.medium}`,
                      fontSize: 7, fontWeight: 700, color: F.crim,
                      textAlign: 'center', lineHeight: '20px', marginRight: 8 }}>PDF</span>
                    {d.name}
                  </td>
                  <td style={{ ...fl.td, color: T.color.text.tertiary, fontSize: 11 }}>{d.matter}</td>
                  <td style={fl.td}><Pill color={statusColor(d.status)}>{d.status}</Pill></td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>{d.pages}</td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11, color: T.color.text.tertiary }}>{d.size}</td>
                  <td style={{ ...fl.td, fontSize: 11 }}>{d.author}</td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 10, color: T.color.text.tertiary }}>
                    {fmtDate(d.modified)}
                  </td>
                  <td style={fl.td}>
                    {d.priv && <Pill color="#7C3AED">{d.priv}</Pill>}{' '}
                    {d.conf && <Pill color={F.crim}>{d.conf}</Pill>}
                  </td>
                </tr>
              ))}
              {filtered.length === 0 && (
                <tr><td colSpan="8" style={{ ...fl.td, textAlign: 'center',
                  color: T.color.text.tertiary, padding: '36px 16px' }}>No PDFs match this filter.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 3. REDACT — Smart redaction with pattern library
  // ═══════════════════════════════════════════════════════════════════════════
  function FoRedact() {
    const [enabled, setEnabled] = useState({ 'PAT-SSN': true, 'PAT-PHONE': true, 'PAT-EMAIL': true, 'PAT-ACCT': true });
    const [previewBurnedIn, setPreviewBurnedIn] = useState(false);
    const [hidden, setHidden] = useState({});

    const totalHits = D.redactionPatterns
      .filter(p => enabled[p.id] && !hidden[p.id])
      .reduce((s, p) => s + p.hits, 0);

    const byCategory = D.redactionPatterns.reduce((acc, p) => {
      if (hidden[p.id]) return acc;
      (acc[p.category] = acc[p.category] || []).push(p);
      return acc;
    }, {});

    const setOnly = (id) => {
      const next = {};
      D.redactionPatterns.forEach(p => { next[p.id] = p.id === id; });
      setEnabled(next);
    };
    const setCategory = (cat, on) => {
      setEnabled(prev => {
        const next = { ...prev };
        D.redactionPatterns.filter(p => p.category === cat).forEach(p => { next[p.id] = on; });
        return next;
      });
    };

    const onPatternContext = (e, p) => {
      const on = !!enabled[p.id];
      A.ContextMenu?.open(e, [
        { heading: `${p.label} · ${p.hits} hits` },
        { label: on ? 'Disable pattern' : 'Enable pattern',
          onSelect: () => setEnabled(prev => ({ ...prev, [p.id]: !on })) },
        { label: 'Run only this pattern', onSelect: () => setOnly(p.id) },
        { separator: true },
        { label: `Enable all in "${p.category}"`,  onSelect: () => setCategory(p.category, true) },
        { label: `Disable all in "${p.category}"`, onSelect: () => setCategory(p.category, false) },
        { separator: true },
        { label: 'Edit regex…',     onSelect: () => flash('info', `Edit /${p.regex}/`) },
        { label: 'Test on sample…', onSelect: () => flash('info', `Test pattern: ${p.label}`) },
        { label: 'View matched text', onSelect: () => flash('info', `${p.hits} matches highlighted in preview`) },
        { label: 'Duplicate as custom', onSelect: () => flash('success', `Duplicated as "${p.label} (custom)"`) },
        { separator: true },
        { label: 'Copy regex',  onSelect: () => { try { navigator.clipboard?.writeText(p.regex); A.toast?.({ kind: 'success', message: 'Regex copied' }); } catch {} } },
        { label: 'Export as .pat file', onSelect: () => flash('info', 'Export queued') },
        { separator: true },
        { label: 'Hide from this view', onSelect: () => setHidden(prev => ({ ...prev, [p.id]: true })) },
        { label: 'Delete custom pattern', danger: true, disabled: p.built,
          hint: p.built ? 'built-in' : undefined,
          onSelect: () => p.built ? null : flash('warn', `Custom pattern deleted: ${p.label}`) },
      ]);
    };

    const onRedactionBoxContext = (e, label, original) => {
      e.stopPropagation();
      A.ContextMenu?.open(e, [
        { heading: `Redaction · "${label}"` },
        { label: 'Reveal original (admin)', onSelect: () => flash('info', `Original: ${original}`) },
        { label: 'Change reason code', submenu: [
          { label: 'PII',                     onSelect: () => flash('info', 'Reason: PII') },
          { label: 'Privileged',              onSelect: () => flash('info', 'Reason: Privileged') },
          { label: 'Confidential — third party', onSelect: () => flash('info', 'Reason: Third-party confidential') },
          { label: 'Outside scope',            onSelect: () => flash('info', 'Reason: Out of scope') },
          { label: 'Trade secret',             onSelect: () => flash('info', 'Reason: Trade secret') },
        ]},
        { label: 'Add justification note…',  onSelect: () => flash('info', 'Open note editor') },
        { separator: true },
        { label: 'Convert to highlight (preserve)', onSelect: () => flash('info', `Highlighted instead: "${original}"`) },
        { label: 'Remove this redaction',           danger: true,
          onSelect: () => flash('warn', `Redaction lifted on "${label}"`) },
      ]);
    };

    const onPreviewContext = (e) => {
      A.ContextMenu?.open(e, [
        { heading: 'Redaction preview' },
        { label: 'Add manual redaction box', onSelect: () => flash('info', 'Click-drag on the page to draw') },
        { label: 'Run all enabled patterns now', onSelect: () => flash('success', `${totalHits} marks generated`) },
        { label: 'Clear all redactions on this page', onSelect: () => flash('warn', 'Page redactions cleared') },
        { separator: true },
        { label: 'Find & redact text…',     onSelect: () => flash('info', 'Open find-and-redact dialog') },
        { label: 'Redact by selection',     onSelect: () => flash('info', 'Select text on the page first') },
        { label: 'Strip metadata',          onSelect: () => flash('success', 'Author, dates, comments stripped') },
        { separator: true },
        { label: 'Save as redaction profile…', onSelect: () => flash('success', 'Saved as profile "Q3 production"') },
        { label: 'Apply profile…',             submenu: [
          { label: 'PII baseline',            onSelect: () => { setEnabled({'PAT-SSN':true,'PAT-PHONE':true,'PAT-EMAIL':true,'PAT-DOB':true,'PAT-ADDR':true}); flash('success','Profile applied'); } },
          { label: 'HIPAA full',              onSelect: () => { setEnabled({'PAT-MED':true,'PAT-SSN':true,'PAT-DOB':true,'PAT-ADDR':true,'PAT-NAME':true}); flash('success','HIPAA profile applied'); } },
          { label: 'Q3 production (custom)',  onSelect: () => { setEnabled({'PAT-SSN':true,'PAT-ACCT':true,'PAT-NAME':true,'PAT-PRIV':true}); flash('success','Q3 profile applied'); } },
        ]},
        { separator: true },
        { label: 'Toggle preview ↔ burned-in', onSelect: () => setPreviewBurnedIn(!previewBurnedIn) },
      ]);
    };

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Patterns" value={D.redactionPatterns.length} />
          <KpiTile label="Enabled" value={Object.values(enabled).filter(Boolean).length} color={F.indigo} />
          <KpiTile label="Total hits to redact" value={totalHits} color={totalHits ? F.crim : null} />
          <KpiTile label="Pages affected" value={Math.ceil(totalHits / 4)} />
          <KpiTile label="Permanent" value={previewBurnedIn ? 'Burned in' : 'Preview'}
            color={previewBurnedIn ? F.green : F.amber} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '380px 1fr', gap: 12, alignItems: 'start' }}>
          {/* Pattern library */}
          <div style={fl.card}>
            <div style={fl.cardH}>
              <span>Pattern library</span>
              <button style={{ ...fl.btnSecondary, padding: '2px 8px', fontSize: 10 }}>+ Custom regex</button>
            </div>
            <div style={{ padding: 12, maxHeight: 520, overflow: 'auto' }}>
              {Object.entries(byCategory).map(([cat, patterns]) => (
                <div key={cat} style={{ marginBottom: 14 }}>
                  <div style={{ fontSize: 9, fontWeight: 700, color: T.color.text.tertiary,
                    textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 6 }}>
                    {cat}
                  </div>
                  {patterns.map(p => {
                    const on = !!enabled[p.id];
                    return (
                      <div key={p.id} onClick={() => setEnabled(prev => ({ ...prev, [p.id]: !prev[p.id] }))}
                        onContextMenu={(e) => onPatternContext(e, p)}
                        title="Right-click for pattern options"
                        style={{
                          padding: '8px 10px', borderRadius: 6, marginBottom: 4, cursor: 'pointer',
                          background: on ? F.indigoBg : 'transparent',
                          border: `1px solid ${on ? F.indigo + '40' : T.color.border.light}`,
                          display: 'flex', alignItems: 'center', gap: 8,
                          transition: 'all 120ms',
                        }}>
                        <input type="checkbox" checked={on} readOnly
                          style={{ accentColor: F.indigo, cursor: 'pointer' }} />
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: 11, fontWeight: 600, color: T.color.text.primary }}>
                            {p.label}
                          </div>
                          <div style={{ fontSize: 9, color: T.color.text.tertiary,
                            fontFamily: T.font.mono, overflow: 'hidden',
                            textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            /{p.regex}/
                          </div>
                        </div>
                        <span style={{ ...fl.tag, background: p.hits ? F.crimBg : T.color.bg.secondary,
                          color: p.hits ? F.crim : T.color.text.tertiary, fontFamily: T.font.mono }}>
                          {p.hits} hits
                        </span>
                      </div>
                    );
                  })}
                </div>
              ))}
            </div>
          </div>

          {/* Preview + actions */}
          <div>
            <div style={{ ...fl.card, marginBottom: 12 }}>
              <div style={fl.cardH}>
                <span>Redaction preview · page 17 of 28</span>
                <span style={{ fontSize: 10, color: T.color.text.tertiary, fontFamily: T.font.mono }}>
                  {totalHits} marks
                </span>
              </div>
              <div onContextMenu={onPreviewContext}
                style={{ padding: 24, background: '#E8E2D6' }}>
                <div style={{
                  background: '#fff', padding: '32px 48px', minHeight: 360,
                  border: `1px solid ${T.color.border.medium}`, borderRadius: 3,
                  fontFamily: 'Times, serif', fontSize: 12, lineHeight: 1.7, color: '#1a1a1a',
                  position: 'relative',
                }}>
                  <div style={{ fontWeight: 700, marginBottom: 12 }}>EXHIBIT 14 — Custodian Communications</div>
                  {(() => {
                    const Rdct = ({ original, label, color = '#000' }) => (
                      <span onContextMenu={(e) => onRedactionBoxContext(e, label, original)}
                        title={`${label} — right-click for options`}
                        style={{ background: color, color: previewBurnedIn ? color : 'transparent',
                          padding: '0 4px', cursor: 'context-menu' }}>
                        {original}
                      </span>
                    );
                    return (<>
                      <p style={{ marginBottom: 10 }}>
                        From: <Rdct original="r.davis@meridian.com" label="Email" />{' · '}
                        Date: <Rdct original="09/14/2022" label="DOB-style date" />{' · '}
                        Phone: <Rdct original="(212) 555-0184" label="Phone" />
                      </p>
                      <p style={{ marginBottom: 10 }}>
                        Wire transfer scheduled to{' '}
                        <Rdct original="Acct #4729-1183" label="Account number" />{' '}
                        for $4,200,000 by EOB Friday. Have W. confirm SSN{' '}
                        <Rdct original="***-**-3091" label="SSN" />{' '}
                        matches on file.
                      </p>
                      <p style={{ marginBottom: 10 }}>
                        Per Q3 disclosure schedule, exposure is{' '}
                        <Rdct original="$8.4M" label="Material non-public" />{' '}
                        not <Rdct original="$2.1M" label="Material non-public" />{' '}
                        as previously reported. {' '}
                        <span style={{ background: '#FFD60A55', padding: '0 2px' }}>This matters for the SOX cert sign-off.</span>
                      </p>
                    </>);
                  })()}
                  {!previewBurnedIn && (
                    <div style={{ position: 'absolute', top: 12, right: 12,
                      padding: '2px 8px', borderRadius: 4, background: F.amber, color: '#fff',
                      fontSize: 9, fontWeight: 700, fontFamily: T.font.mono }}>PREVIEW</div>
                  )}
                  {previewBurnedIn && (
                    <div style={{ position: 'absolute', top: 12, right: 12,
                      padding: '2px 8px', borderRadius: 4, background: F.green, color: '#fff',
                      fontSize: 9, fontWeight: 700, fontFamily: T.font.mono }}>BURNED IN ✓</div>
                  )}
                </div>
              </div>
              <div style={{ padding: 12, display: 'flex', gap: 8, justifyContent: 'flex-end',
                borderTop: `1px solid ${T.color.border.light}` }}>
                <button style={fl.btnSecondary} onClick={() => setEnabled({})}>Clear all</button>
                <button style={fl.btnSecondary}
                  onClick={() => flash('info', 'Manual redaction tool — drag boxes on the page')}>
                  + Manual box
                </button>
                <button style={fl.btnSecondary}
                  onClick={() => setPreviewBurnedIn(false)}>Preview</button>
                <button style={previewBurnedIn ? fl.btnSecondary : fl.btnDanger}
                  onClick={() => { setPreviewBurnedIn(true); flash('warn', `${totalHits} marks burned in — irreversible`); }}>
                  {previewBurnedIn ? 'Burned in ✓' : `Burn in ${totalHits} marks (irreversible)`}
                </button>
              </div>
            </div>

            <div style={{ ...fl.card, padding: '12px 16px', background: F.amberBg,
              borderLeft: `3px solid ${F.amber}`, marginBottom: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: F.amber,
                textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>
                ◆ Permanence warning
              </div>
              <div style={{ fontSize: 11, color: T.color.text.secondary, lineHeight: 1.5 }}>
                Burning in redactions removes the underlying text from the PDF stream and strips embedded metadata.
                Once committed, the redaction cannot be undone — the only recovery path is to re-export from the
                original. A snapshot is preserved in <b>Versions</b> before burn-in.
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 4. COMPARE — PDF diff viewer
  // ═══════════════════════════════════════════════════════════════════════════
  function FoCompare() {
    const [run, setRun] = useState(D.compareRuns[0]);

    const additions = D.compareHunks.filter(h => h.type === 'add').length;
    const deletions = D.compareHunks.filter(h => h.type === 'del').length;
    const modifications = D.compareHunks.filter(h => h.type === 'mod').length;

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Comparing" value={`v${run.a.match(/v(\d)/)?.[1] || '?'} → v${run.b.match(/v(\d)/)?.[1] || '?'}`} />
          <KpiTile label="Additions" value={additions} color={F.green} />
          <KpiTile label="Deletions" value={deletions} color={F.crim} />
          <KpiTile label="Modifications" value={modifications} color={F.amber} />
          <KpiTile label="Pages changed" value={run.pagesChanged} />
        </div>

        <div style={fl.card}>
          <div style={fl.cardH}>
            <span>Recent compare runs</span>
            <button style={fl.btnSecondary}>+ New compare</button>
          </div>
          <div style={{ padding: 8 }}>
            {D.compareRuns.map(r => {
              const active = run.id === r.id;
              return (
                <div key={r.id} onClick={() => setRun(r)}
                  style={{ padding: 10, borderRadius: 6, marginBottom: 4, cursor: 'pointer',
                    background: active ? F.indigoBg : 'transparent',
                    border: `1px solid ${active ? F.indigo + '40' : T.color.border.light}` }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                    <div style={{ fontSize: 11, fontWeight: 600, color: T.color.text.primary, minWidth: 0,
                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {r.a} <span style={{ color: T.color.text.tertiary }}>→</span> {r.b}
                    </div>
                    {r.status === 'running' ? (
                      <Pill color={F.amber}>Running</Pill>
                    ) : (
                      <span style={{ fontFamily: T.font.mono, fontSize: 10, color: T.color.text.tertiary }}>
                        +{r.additions} −{r.deletions} ~{r.modifications}
                      </span>
                    )}
                  </div>
                  <div style={{ fontSize: 9, color: T.color.text.tertiary, fontFamily: T.font.mono, marginTop: 3 }}>
                    {r.by} · {fmt(r.at)}
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div style={{ ...fl.card, marginBottom: 0 }}>
          <div style={fl.cardH}>
            <span>Diff hunks · {D.compareHunks.length}</span>
            <span style={{ fontSize: 10, color: T.color.text.tertiary }}>Click to jump to page</span>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead style={{ background: T.color.bg.secondary }}>
              <tr>
                <th style={{ ...fl.th, width: 50 }}>Type</th>
                <th style={{ ...fl.th, width: 50 }}>Page</th>
                <th style={fl.th}>Change</th>
                <th style={{ ...fl.th, width: 100 }}>Reason</th>
              </tr>
            </thead>
            <tbody>
              {D.compareHunks.map((h, i) => {
                const c = h.type === 'add' ? F.green : h.type === 'del' ? F.crim : F.amber;
                const lbl = h.type === 'add' ? 'ADD' : h.type === 'del' ? 'DEL' : 'MOD';
                return (
                  <tr key={i} style={{ cursor: 'pointer' }}
                    onMouseEnter={(e) => e.currentTarget.style.background = T.color.bg.secondary}
                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                    onClick={() => flash('info', `Jump to p.${h.page}`)}>
                    <td style={fl.td}><Pill color={c} strong>{lbl}</Pill></td>
                    <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>p.{h.page}</td>
                    <td style={{ ...fl.td, fontSize: 11, color: T.color.text.secondary }}>{h.preview}</td>
                    <td style={{ ...fl.td, fontSize: 10, color: T.color.text.tertiary, textTransform: 'capitalize' }}>
                      {h.reason}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 5. OCR — Extract text from scanned PDFs
  // ═══════════════════════════════════════════════════════════════════════════
  function FoOcr() {
    const totalPages = D.ocrQueue.reduce((s, q) => s + q.pages, 0);
    const completed = D.ocrQueue.filter(q => q.status === 'complete').length;
    const running   = D.ocrQueue.filter(q => q.status === 'running').length;
    const queued    = D.ocrQueue.filter(q => q.status === 'queued').length;
    const failed    = D.ocrQueue.filter(q => q.status === 'failed').length;
    const avgConf = (() => {
      const finished = D.ocrQueue.filter(q => q.confidence != null);
      if (!finished.length) return 0;
      return Math.round((finished.reduce((s, q) => s + q.confidence, 0) / finished.length) * 10) / 10;
    })();

    const ocrColor = (s) => s === 'complete' ? F.green : s === 'running' ? F.indigo
      : s === 'queued' ? T.color.text.tertiary : F.crim;

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Documents" value={D.ocrQueue.length} />
          <KpiTile label="Pages total" value={totalPages.toLocaleString()} />
          <KpiTile label="Complete" value={completed} color={F.green} />
          <KpiTile label="Running"  value={running} color={running ? F.indigo : null} />
          <KpiTile label="Queued"   value={queued} color={queued ? F.amber : null} />
          <KpiTile label="Failed"   value={failed} color={failed ? F.crim : null} />
          <KpiTile label="Avg conf." value={avgConf + '%'} hint="across complete jobs" />
        </div>

        <div style={fl.card}>
          <div style={fl.cardH}>
            <span>OCR queue</span>
            <button style={fl.btnPrimary}>+ Send for OCR</button>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead style={{ background: T.color.bg.secondary }}>
              <tr>
                <th style={fl.th}>Document</th>
                <th style={fl.th}>Matter</th>
                <th style={fl.th}>Status</th>
                <th style={fl.th}>Pages</th>
                <th style={fl.th}>Confidence</th>
                <th style={fl.th}>Started</th>
                <th style={fl.th}>Completed</th>
              </tr>
            </thead>
            <tbody>
              {D.ocrQueue.map(q => (
                <tr key={q.id}>
                  <td style={{ ...fl.td, fontWeight: 600 }}>{q.name}</td>
                  <td style={{ ...fl.td, fontSize: 11, color: T.color.text.tertiary }}>{q.matter}</td>
                  <td style={fl.td}>
                    <Pill color={ocrColor(q.status)}>{q.status}</Pill>
                    {q.status === 'running' && q.progress != null && (
                      <span style={{ marginLeft: 6, fontFamily: T.font.mono, fontSize: 10, color: T.color.text.tertiary }}>
                        {Math.round(q.progress * 100)}%
                      </span>
                    )}
                  </td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>{q.pages.toLocaleString()}</td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11,
                    color: q.confidence == null ? T.color.text.tertiary
                      : q.confidence >= 95 ? F.green
                      : q.confidence >= 80 ? F.amber : F.crim }}>
                    {q.confidence != null ? `${q.confidence}%` : '—'}
                  </td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 10, color: T.color.text.tertiary }}>{q.started ? fmt(q.started) : '—'}</td>
                  <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 10, color: T.color.text.tertiary }}>{q.completed ? fmt(q.completed) : '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {D.ocrQueue.find(q => q.status === 'failed') && (
          <div style={{ ...fl.card, marginBottom: 0, padding: '12px 16px', background: F.crimBg,
            borderLeft: `3px solid ${F.crim}` }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: F.crim,
              textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>
              ◆ Failed jobs require attention
            </div>
            {D.ocrQueue.filter(q => q.status === 'failed').map(q => (
              <div key={q.id} style={{ fontSize: 11, color: T.color.text.secondary, lineHeight: 1.5 }}>
                <b>{q.name}</b> — {q.error}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 6. PIPELINES — Automated workflows
  // ═══════════════════════════════════════════════════════════════════════════
  function FoPipelines() {
    const [selected, setSelected] = useState(D.pipelines[0]);
    const totalRuns = D.pipelines.reduce((s, p) => s + p.runs, 0);
    const enabled = D.pipelines.filter(p => p.enabled).length;

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Pipelines" value={D.pipelines.length} />
          <KpiTile label="Enabled"  value={enabled} color={F.green} />
          <KpiTile label="Disabled" value={D.pipelines.length - enabled}
            color={D.pipelines.length - enabled ? F.amber : null} />
          <KpiTile label="Runs (all-time)" value={totalRuns.toLocaleString()} />
          <KpiTile label="Avg success" value={Math.round(D.pipelines.reduce((s,p) => s + p.success * 100, 0) / D.pipelines.length) + '%'}
            color={F.green} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 12, alignItems: 'start' }}>
          <div style={fl.card}>
            <div style={fl.cardH}>
              <span>All pipelines</span>
              <button style={{ ...fl.btnSecondary, padding: '2px 8px', fontSize: 10 }}>+ New</button>
            </div>
            <div style={{ padding: 8 }}>
              {D.pipelines.map(p => {
                const active = selected.id === p.id;
                return (
                  <div key={p.id} onClick={() => setSelected(p)}
                    style={{
                      padding: 10, borderRadius: 6, marginBottom: 4, cursor: 'pointer',
                      background: active ? F.indigoBg : 'transparent',
                      border: `1px solid ${active ? F.indigo + '40' : T.color.border.light}`,
                      opacity: p.enabled ? 1 : 0.55,
                    }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 6, marginBottom: 3 }}>
                      <span style={{ fontSize: 11, fontWeight: 600, color: T.color.text.primary,
                        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {p.name}
                      </span>
                      {!p.enabled && <Pill color={F.amber}>off</Pill>}
                    </div>
                    <div style={{ fontSize: 9, color: T.color.text.tertiary, fontFamily: T.font.mono,
                      display: 'flex', gap: 8 }}>
                      <span>{p.stages.length} stages</span>
                      <span>·</span>
                      <span>{p.runs} runs</span>
                      <span>·</span>
                      <span style={{ color: p.success === 1 ? F.green : p.success >= 0.95 ? F.indigo : F.amber }}>
                        {Math.round(p.success * 100)}%
                      </span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Detail panel */}
          <div>
            <div style={fl.card}>
              <div style={fl.cardH}>
                <div>
                  <div>{selected.name}</div>
                  <div style={{ fontSize: 9, color: T.color.text.tertiary, fontWeight: 500,
                    textTransform: 'none', marginTop: 2 }}>
                    Last run {fmt(selected.lastRun)} · {selected.avgDuration} avg
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <button style={fl.btnSecondary}>Edit</button>
                  <button style={fl.btnPrimary}
                    onClick={() => flash('success', `${selected.name} triggered`)}>▶ Run now</button>
                </div>
              </div>
              <div style={{ padding: 16 }}>
                <div style={{ fontSize: 11, color: T.color.text.secondary, marginBottom: 16, lineHeight: 1.5 }}>
                  {selected.description}
                </div>

                {/* Stage flow */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap', marginBottom: 16 }}>
                  {selected.stages.map((s, i) => (
                    <React.Fragment key={i}>
                      <div style={{
                        padding: '8px 12px', borderRadius: 6,
                        background: F.indigoBg, border: `1px solid ${F.indigo}40`,
                        fontSize: 11, fontWeight: 600, color: F.indigoDk,
                      }}>
                        <div style={{ fontSize: 8, color: T.color.text.tertiary,
                          fontFamily: T.font.mono, marginBottom: 2 }}>STAGE {i + 1}</div>
                        {s}
                      </div>
                      {i < selected.stages.length - 1 && (
                        <span style={{ color: F.indigo, fontSize: 14, fontWeight: 700 }}>›</span>
                      )}
                    </React.Fragment>
                  ))}
                </div>

                {/* Stats grid */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))', gap: 8 }}>
                  <KpiTile label="Total runs" value={selected.runs.toLocaleString()} />
                  <KpiTile label="Success rate" value={Math.round(selected.success * 100) + '%'}
                    color={selected.success === 1 ? F.green : selected.success >= 0.95 ? F.indigo : F.amber} />
                  <KpiTile label="Avg duration" value={selected.avgDuration} />
                  <KpiTile label="Status" value={selected.enabled ? 'Active' : 'Disabled'}
                    color={selected.enabled ? F.green : F.amber} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 7. FORMS — Designer + library
  // ═══════════════════════════════════════════════════════════════════════════
  function FoForms() {
    const [filter, setFilter] = useState('all');
    const filtered = D.formTemplates.filter(t =>
      filter === 'all' ? true :
      filter === 'pub' ? t.status === 'published' :
      filter === 'draft' ? t.status === 'draft' : true);
    const totalUses = D.formTemplates.reduce((s, t) => s + t.uses, 0);
    const totalFields = D.formTemplates.reduce((s, t) => s + t.fields, 0);

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Templates" value={D.formTemplates.length} />
          <KpiTile label="Published" value={D.formTemplates.filter(t => t.status === 'published').length} color={F.green} />
          <KpiTile label="In draft"  value={D.formTemplates.filter(t => t.status === 'draft').length} color={F.amber} />
          <KpiTile label="Total fields" value={totalFields} />
          <KpiTile label="All-time uses" value={totalUses.toLocaleString()} color={F.indigo} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 12, alignItems: 'start' }}>
          {/* Template library */}
          <div style={fl.card}>
            <div style={{ ...fl.cardH, gap: 8 }}>
              <span>Form templates</span>
              <div style={{ display: 'flex', gap: 4 }}>
                {[{id:'all',l:'All'},{id:'pub',l:'Published'},{id:'draft',l:'Drafts'}].map(o => (
                  <button key={o.id} onClick={() => setFilter(o.id)}
                    style={{ ...fl.chip, ...(filter === o.id ? fl.chipActive : {}), padding: '2px 8px', fontSize: 10 }}>
                    {o.l}
                  </button>
                ))}
                <button style={fl.btnPrimary}>+ New form</button>
              </div>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead style={{ background: T.color.bg.secondary }}>
                <tr>
                  <th style={fl.th}>Name</th>
                  <th style={fl.th}>Status</th>
                  <th style={fl.th}>Fields</th>
                  <th style={fl.th}>Uses</th>
                  <th style={fl.th}>Last edited</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(t => (
                  <tr key={t.id} style={{ cursor: 'pointer' }}
                    onMouseEnter={(e) => e.currentTarget.style.background = T.color.bg.secondary}
                    onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
                    onClick={() => flash('info', `Open form designer: ${t.name}`)}>
                    <td style={{ ...fl.td, fontWeight: 600 }}>{t.name}</td>
                    <td style={fl.td}><Pill color={t.status === 'published' ? F.green : F.amber}>{t.status}</Pill></td>
                    <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>{t.fields}</td>
                    <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>{t.uses}</td>
                    <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 10, color: T.color.text.tertiary }}>{t.lastEdit}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Field type palette */}
          <div style={fl.card}>
            <div style={fl.cardH}>
              <span>Field types</span>
              <span style={{ fontSize: 10, color: T.color.text.tertiary, fontWeight: 500 }}>drag onto page</span>
            </div>
            <div style={{ padding: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
              {D.formFieldTypes.map(f => (
                <div key={f.id}
                  style={{
                    padding: 8, borderRadius: 6,
                    border: `1px dashed ${T.color.border.medium}`,
                    background: T.color.bg.secondary,
                    cursor: 'grab', textAlign: 'center',
                  }}>
                  <div style={{ fontSize: 10, fontWeight: 600, color: T.color.text.primary }}>{f.label}</div>
                  <div style={{ fontSize: 8, color: T.color.text.tertiary, fontFamily: T.font.mono, marginTop: 2 }}>
                    {f.kind}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 8. BATES & STAMPS
  // ═══════════════════════════════════════════════════════════════════════════
  function FoBates() {
    const totalStamped = D.batesJobs
      .filter(j => j.status === 'applied')
      .reduce((s, j) => s + (j.end - j.start + 1), 0);
    const reservedStart = D.batesJobs.find(j => j.status === 'reserved')?.start;

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Stamp jobs" value={D.batesJobs.length} />
          <KpiTile label="Pages stamped" value={totalStamped.toLocaleString()} color={F.indigo} />
          <KpiTile label="Next number" value={reservedStart ? reservedStart.toLocaleString() : '—'} hint="MERIDIAN-" />
          <KpiTile label="Watermarks"  value={D.stamps.filter(s => s.kind === 'watermark').length} />
          <KpiTile label="Stamps"      value={D.stamps.filter(s => s.kind === 'stamp').length} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 12, alignItems: 'start' }}>
          <div style={fl.card}>
            <div style={fl.cardH}>
              <span>Bates jobs</span>
              <button style={fl.btnPrimary}>+ New stamp job</button>
            </div>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead style={{ background: T.color.bg.secondary }}>
                <tr>
                  <th style={fl.th}>Set</th>
                  <th style={fl.th}>Range</th>
                  <th style={fl.th}>Pages</th>
                  <th style={fl.th}>Status</th>
                  <th style={fl.th}>By</th>
                  <th style={fl.th}>When</th>
                </tr>
              </thead>
              <tbody>
                {D.batesJobs.map(j => {
                  const range = j.end ? `${j.prefix}${String(j.start).padStart(6,'0')} – ${j.prefix}${String(j.end).padStart(6,'0')}`
                    : `${j.prefix}${String(j.start).padStart(6,'0')} – (open)`;
                  const pages = j.end ? (j.end - j.start + 1).toLocaleString() : '—';
                  return (
                    <tr key={j.id}>
                      <td style={{ ...fl.td, fontWeight: 600 }}>{j.set}</td>
                      <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>{range}</td>
                      <td style={{ ...fl.td, fontFamily: T.font.mono, fontSize: 11 }}>{pages}</td>
                      <td style={fl.td}>
                        <Pill color={j.status === 'applied' ? F.green : F.amber}>{j.status}</Pill>
                      </td>
                      <td style={{ ...fl.td, fontSize: 11 }}>{j.by}</td>
                      <td style={{ ...fl.td, fontSize: 10, fontFamily: T.font.mono, color: T.color.text.tertiary }}>{fmtDate(j.at)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* Stamp library */}
          <div style={fl.card}>
            <div style={fl.cardH}>
              <span>Stamps & watermarks</span>
              <button style={{ ...fl.btnSecondary, padding: '2px 8px', fontSize: 10 }}>+ Custom</button>
            </div>
            <div style={{ padding: 12 }}>
              {['watermark', 'stamp'].map(kind => (
                <div key={kind} style={{ marginBottom: 12 }}>
                  <div style={{ fontSize: 9, fontWeight: 700, color: T.color.text.tertiary,
                    textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 6 }}>
                    {kind === 'watermark' ? 'Diagonal watermarks' : 'Date / status stamps'}
                  </div>
                  {D.stamps.filter(s => s.kind === kind).map(s => (
                    <div key={s.id} style={{
                      padding: '6px 10px', borderRadius: 4, marginBottom: 4,
                      border: `1px solid ${T.color.border.light}`,
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                      cursor: 'pointer',
                    }} onClick={() => flash('success', `Applied stamp: ${s.label}`)}>
                      <span style={{
                        fontSize: 10, fontWeight: 700, color: s.color,
                        letterSpacing: '0.06em', fontFamily: T.font.mono,
                        ...(kind === 'stamp' ? {
                          padding: '2px 6px', border: `1.5px solid ${s.color}`, borderRadius: 2,
                        } : {}),
                      }}>{s.label}</span>
                      <span style={{ fontSize: 9, color: T.color.text.tertiary, fontFamily: T.font.mono }}>{s.id}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 9. AUDIT — Lifecycle audit log
  // ═══════════════════════════════════════════════════════════════════════════
  function FoAudit() {
    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Events" value={D.auditEvents.length} />
          <KpiTile label="Actors"  value={new Set(D.auditEvents.map(e => e.actor)).size} />
          <KpiTile label="Days tracked" value={Math.ceil((new Date(D.auditEvents[D.auditEvents.length-1].ts) - new Date(D.auditEvents[0].ts)) / 86400000) + 1} />
          <KpiTile label="System events" value={D.auditEvents.filter(e => e.actor === 'system').length} color={F.indigo} />
        </div>

        <div style={fl.card}>
          <div style={fl.cardH}>
            <span>Audit timeline · {D.activeDoc.name}</span>
            <button style={fl.btnSecondary}>Export CoC report</button>
          </div>
          <div style={{ padding: 16 }}>
            {D.auditEvents.map((e, i) => {
              const isSystem = e.actor === 'system';
              return (
                <div key={e.id} style={{
                  display: 'grid', gridTemplateColumns: '140px 12px 1fr',
                  gap: 12, paddingBottom: 12, position: 'relative',
                }}>
                  <span style={{ fontFamily: T.font.mono, fontSize: 10,
                    color: T.color.text.tertiary, paddingTop: 2 }}>
                    {fmt(e.ts)}
                  </span>
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: 10, height: 10, borderRadius: '50%',
                      background: isSystem ? F.indigo : F.gold,
                      marginTop: 4, marginLeft: 1,
                    }} />
                    {i < D.auditEvents.length - 1 && (
                      <div style={{ position: 'absolute', top: 14, left: 6,
                        bottom: -12, width: 1, background: T.color.border.light }} />
                    )}
                  </div>
                  <div>
                    <div style={{ fontSize: 11, color: T.color.text.primary }}>{e.event}</div>
                    <div style={{ fontSize: 9, color: T.color.text.tertiary, marginTop: 2,
                      fontFamily: T.font.mono, textTransform: 'uppercase', letterSpacing: '0.06em' }}>
                      {e.actor}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 10. PROTECT
  // ═══════════════════════════════════════════════════════════════════════════
  function FoProtect() {
    const [pwOn, setPwOn] = useState(true);
    const [restrictions, setRestrictions] = useState({ print: false, copy: false, edit: true, fill: false });
    const [cert, setCert] = useState(false);

    const toggle = (k) => setRestrictions(prev => ({ ...prev, [k]: !prev[k] }));

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Encryption"  value={pwOn ? 'AES-256' : 'None'} color={pwOn ? F.green : F.amber} />
          <KpiTile label="Restrictions" value={Object.values(restrictions).filter(Boolean).length} />
          <KpiTile label="Certificate" value={cert ? 'Active' : 'None'} color={cert ? F.green : null} />
          <KpiTile label="Confidentiality" value="AEO" color={F.crim} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, alignItems: 'start' }}>
          <div style={fl.card}>
            <div style={fl.cardH}><span>Password protection</span></div>
            <div style={{ padding: 16 }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14, cursor: 'pointer' }}>
                <input type="checkbox" checked={pwOn} onChange={() => setPwOn(!pwOn)}
                  style={{ accentColor: F.indigo, cursor: 'pointer' }} />
                <span style={{ fontSize: 12, color: T.color.text.primary }}>Require password to open</span>
              </label>
              <div style={{ marginBottom: 14 }}>
                <div style={{ fontSize: 10, fontWeight: 700, color: T.color.text.tertiary,
                  textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>
                  Open password
                </div>
                <input type="password" defaultValue="••••••••••••" disabled={!pwOn}
                  style={{ width: '100%', padding: '6px 10px', fontSize: 12,
                    border: `1px solid ${T.color.border.light}`, borderRadius: 4,
                    background: pwOn ? T.color.bg.card : T.color.bg.secondary,
                    color: T.color.text.primary, outline: 'none', fontFamily: T.font.family,
                    cursor: pwOn ? 'text' : 'not-allowed' }} />
              </div>
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, color: T.color.text.tertiary,
                  textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>
                  Cipher
                </div>
                <select disabled={!pwOn} defaultValue="aes256"
                  style={{ width: '100%', padding: '6px 10px', fontSize: 12,
                    border: `1px solid ${T.color.border.light}`, borderRadius: 4,
                    background: T.color.bg.card, color: T.color.text.primary, outline: 'none',
                    cursor: 'pointer', fontFamily: T.font.family }}>
                  <option value="aes256">AES-256 (recommended)</option>
                  <option value="aes128">AES-128</option>
                  <option value="rc4">RC4 — legacy compat only</option>
                </select>
              </div>
            </div>
          </div>

          <div style={fl.card}>
            <div style={fl.cardH}><span>Permissions</span></div>
            <div style={{ padding: 16 }}>
              {[
                { k: 'print', l: 'Allow printing',          d: 'Hi-res print only when permitted' },
                { k: 'copy',  l: 'Allow text copy',         d: 'Required for screen readers' },
                { k: 'edit',  l: 'Allow editing',           d: 'Annotations always allowed separately' },
                { k: 'fill',  l: 'Allow form fill / sign',  d: 'Even when editing is disabled' },
              ].map(opt => (
                <label key={opt.k} style={{ display: 'flex', alignItems: 'flex-start', gap: 10,
                  marginBottom: 14, cursor: 'pointer' }}>
                  <input type="checkbox" checked={!restrictions[opt.k]}
                    onChange={() => toggle(opt.k)}
                    style={{ accentColor: F.indigo, cursor: 'pointer', marginTop: 2 }} />
                  <span>
                    <div style={{ fontSize: 12, color: T.color.text.primary, fontWeight: 500 }}>{opt.l}</div>
                    <div style={{ fontSize: 10, color: T.color.text.tertiary, marginTop: 2 }}>{opt.d}</div>
                  </span>
                </label>
              ))}
            </div>
          </div>

          <div style={fl.card}>
            <div style={fl.cardH}><span>Certificate-based encryption</span></div>
            <div style={{ padding: 16 }}>
              <label style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, cursor: 'pointer' }}>
                <input type="checkbox" checked={cert} onChange={() => setCert(!cert)}
                  style={{ accentColor: F.indigo, cursor: 'pointer' }} />
                <span style={{ fontSize: 12, color: T.color.text.primary }}>
                  Encrypt with X.509 recipient certificates
                </span>
              </label>
              {cert && (
                <div style={{ padding: 12, background: T.color.bg.secondary, borderRadius: 6, fontSize: 11 }}>
                  <div style={{ marginBottom: 6, color: T.color.text.tertiary }}>Recipients:</div>
                  <div>• M. Kirkland (mkirkland@arbiter.law) — partner cert</div>
                  <div>• L. Torres (ltorres@arbiter.law) — associate cert</div>
                  <div style={{ marginTop: 8, color: T.color.text.tertiary, fontSize: 10 }}>
                    Only the listed recipients (with their private keys) can open this PDF.
                  </div>
                </div>
              )}
            </div>
          </div>

          <div style={fl.card}>
            <div style={fl.cardH}><span>Sealed envelope</span></div>
            <div style={{ padding: 16 }}>
              <div style={{ fontSize: 11, color: T.color.text.secondary, marginBottom: 12, lineHeight: 1.5 }}>
                Wrap the document in a tamper-evident envelope with notarized timestamp. Used for filings
                under seal, in-camera review, and certified copies.
              </div>
              <button style={fl.btnPrimary}
                onClick={() => flash('success', 'Sealed envelope created — TS-2026-04-19-1742')}>
                Create sealed envelope
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  // 11. COMPOSE — Page assembly
  // ═══════════════════════════════════════════════════════════════════════════
  function FoCompose() {
    const [order, setOrder] = useState(D.pages.map(p => p.n));
    const [dragIdx, setDragIdx] = useState(null);
    const [overIdx, setOverIdx] = useState(null);
    const [dropSide, setDropSide] = useState(null); // 'left' | 'right'

    const move = (idx, dir) => {
      const next = [...order];
      const t = idx + dir;
      if (t < 0 || t >= next.length) return;
      [next[idx], next[t]] = [next[t], next[idx]];
      setOrder(next);
    };

    const onDragStart = (e, idx) => {
      setDragIdx(idx);
      try {
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('application/folio-page', String(idx));
      } catch {}
    };
    const onDragEnd = () => {
      setDragIdx(null);
      setOverIdx(null);
      setDropSide(null);
    };
    const onDragOver = (e, idx) => {
      e.preventDefault();
      try { e.dataTransfer.dropEffect = 'move'; } catch {}
      const r = e.currentTarget.getBoundingClientRect();
      const isLeft = (e.clientX - r.left) < r.width / 2;
      setOverIdx(idx);
      setDropSide(isLeft ? 'left' : 'right');
    };
    const onDragLeave = (idx) => {
      // Only clear if leaving the tile we're tracking
      setOverIdx(prev => prev === idx ? null : prev);
    };
    const onDrop = (e, idx) => {
      e.preventDefault();
      if (dragIdx == null || dragIdx === idx) { onDragEnd(); return; }
      const next = [...order];
      const [moved] = next.splice(dragIdx, 1);
      // Compute insertion index relative to the post-removal array.
      let insertAt = idx;
      if (dragIdx < idx) insertAt -= 1;          // removed an earlier item, shift target left
      if (dropSide === 'right') insertAt += 1;   // dropping on right edge inserts after
      insertAt = Math.max(0, Math.min(next.length, insertAt));
      next.splice(insertAt, 0, moved);
      setOrder(next);
      flash('success', `Moved page to position ${insertAt + 1}`);
      onDragEnd();
    };

    return (
      <div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
          <KpiTile label="Pages" value={order.length} />
          <KpiTile label="Reordered" value={order.filter((p, i) => p !== D.pages[i].n).length}
            color={order.some((p, i) => p !== D.pages[i].n) ? F.amber : null} />
          <KpiTile label="Source files" value={1} />
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 12, alignItems: 'start' }}>
          <div style={fl.card}>
            <div style={fl.cardH}>
              <span>Page order</span>
              <div style={{ display: 'flex', gap: 6 }}>
                <button style={fl.btnSecondary} onClick={() => setOrder(D.pages.map(p => p.n))}>Reset</button>
                <button style={fl.btnPrimary}
                  onClick={() => flash('success', 'Saved as new version')}>Save</button>
              </div>
            </div>
            <div style={{ padding: 12, display: 'grid',
              gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: 8, maxHeight: 720, overflow: 'auto' }}>
              {order.map((pn, i) => {
                const p = D.pages.find(pg => pg.n === pn);
                const isDragging = dragIdx === i;
                const isOver = overIdx === i && dragIdx !== i;
                const indicatorSide = isOver ? dropSide : null;
                return (
                  <div key={`${pn}-${i}`}
                    draggable={true}
                    onDragStart={(e) => onDragStart(e, i)}
                    onDragOver={(e) => onDragOver(e, i)}
                    onDragLeave={() => onDragLeave(i)}
                    onDrop={(e) => onDrop(e, i)}
                    onDragEnd={onDragEnd}
                    style={{ background: '#fff', border: `1px solid ${T.color.border.light}`,
                      borderRadius: 4, position: 'relative',
                      cursor: isDragging ? 'grabbing' : 'grab',
                      boxShadow: isDragging
                        ? `0 0 0 2px ${F.indigo}, 0 8px 16px rgba(67,56,202,0.25)`
                        : '0 1px 2px rgba(0,0,0,0.04)',
                      opacity: isDragging ? 0.45 : 1,
                      transform: isDragging ? 'scale(0.96)' : 'none',
                      transition: 'opacity 120ms, transform 120ms, box-shadow 120ms',
                    }}>
                    {/* Drop-side indicator */}
                    {indicatorSide && (
                      <div style={{ position: 'absolute', top: -4, bottom: -4,
                        [indicatorSide]: -5,
                        width: 3, background: F.indigo, borderRadius: 2,
                        boxShadow: `0 0 6px ${F.indigo}`,
                        zIndex: 10, pointerEvents: 'none',
                      }} />
                    )}
                    <div style={{ height: 140, padding: 8, pointerEvents: 'none' }}>
                      <div style={{ height: 4, background: T.color.border.light,
                        borderRadius: 1, marginBottom: 4, width: '70%' }} />
                      {Array.from({ length: 10 }).map((_, j) => (
                        <div key={j} style={{
                          height: 1.5, background: T.color.border.light,
                          borderRadius: 1, marginBottom: 3,
                          width: `${65 + (j % 3) * 10}%`,
                        }} />
                      ))}
                    </div>
                    <div style={{ padding: '4px 6px', borderTop: `1px solid ${T.color.border.light}`,
                      fontSize: 9, color: T.color.text.tertiary, fontFamily: T.font.mono,
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      pointerEvents: 'none' }}>
                      <span>{p?.heading.slice(0, 14)}</span>
                      <span style={{ fontWeight: 700, color: T.color.text.primary }}>{i + 1}</span>
                    </div>
                    <div style={{ position: 'absolute', top: 4, left: 4, display: 'flex', gap: 2 }}>
                      <button onClick={(e) => { e.stopPropagation(); move(i, -1); }} disabled={i === 0}
                        title="Move left"
                        style={{ width: 18, height: 18, padding: 0, border: 'none',
                          background: 'rgba(0,0,0,0.5)', color: '#fff', borderRadius: 2,
                          fontSize: 10, cursor: i === 0 ? 'not-allowed' : 'pointer' }}>‹</button>
                      <button onClick={(e) => { e.stopPropagation(); move(i, 1); }} disabled={i === order.length - 1}
                        title="Move right"
                        style={{ width: 18, height: 18, padding: 0, border: 'none',
                          background: 'rgba(0,0,0,0.5)', color: '#fff', borderRadius: 2,
                          fontSize: 10, cursor: i === order.length - 1 ? 'not-allowed' : 'pointer' }}>›</button>
                    </div>
                    <div style={{ position: 'absolute', top: 4, right: 4, fontSize: 12,
                      color: T.color.text.tertiary, pointerEvents: 'none' }}
                      title="Drag to reorder">⋮⋮</div>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={fl.card}>
            <div style={fl.cardH}><span>Page actions</span></div>
            <div style={{ padding: 12 }}>
              {[
                { l: 'Insert blank page',           d: 'Add a blank A4 page' },
                { l: 'Insert from another PDF…',    d: 'Pull pages from a related doc' },
                { l: 'Insert exhibit cover sheet',  d: 'Auto-numbered tab divider' },
                { l: 'Duplicate page',              d: 'Copy current page' },
                { l: 'Delete page',                 d: 'Remove from order' },
                { l: 'Rotate 90° CW',               d: 'Fix orientation' },
                { l: 'Crop page',                   d: 'Adjust margins / trim' },
                { l: 'Split here',                  d: 'Break into two PDFs' },
                { l: 'Extract pages…',              d: 'New PDF from selection' },
              ].map(act => (
                <button key={act.l}
                  onClick={() => flash('info', act.l)}
                  style={{
                    display: 'block', width: '100%', textAlign: 'left',
                    padding: '8px 12px', marginBottom: 4, borderRadius: 6,
                    border: `1px solid ${T.color.border.light}`,
                    background: T.color.bg.card, cursor: 'pointer',
                    fontFamily: T.font.family,
                  }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = F.indigoBg; e.currentTarget.style.borderColor = F.indigo + '40'; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = T.color.bg.card; e.currentTarget.style.borderColor = T.color.border.light; }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: T.color.text.primary }}>{act.l}</div>
                  <div style={{ fontSize: 9, color: T.color.text.tertiary, marginTop: 2 }}>{act.d}</div>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ═══════════════════════════════════════════════════════════════════════════
  //  PLATFORM SHELL
  // ═══════════════════════════════════════════════════════════════════════════
  function FolioPlatform() {
    const [activeTab, setActiveTab] = useState('workbench');
    A.useTrack?.('folio.tab', { tab: activeTab }, [activeTab]);

    const tabs = [
      { id: 'workbench', label: 'Workbench' },
      { id: 'library',   label: 'Library' },
      { id: 'compose',   label: 'Compose' },
      { id: 'redact',    label: 'Redact' },
      { id: 'compare',   label: 'Compare' },
      { id: 'ocr',       label: 'OCR & Extract' },
      { id: 'forms',     label: 'Forms' },
      { id: 'bates',     label: 'Bates & Stamps' },
      { id: 'protect',   label: 'Protect' },
      { id: 'pipelines', label: 'Pipelines' },
      { id: 'audit',     label: 'Audit' },
    ];

    const renderTab = () => {
      switch (activeTab) {
        case 'workbench': return <FoWorkbench />;
        case 'library':   return <FoLibrary />;
        case 'compose':   return <FoCompose />;
        case 'redact':    return <FoRedact />;
        case 'compare':   return <FoCompare />;
        case 'ocr':       return <FoOcr />;
        case 'forms':     return <FoForms />;
        case 'bates':     return <FoBates />;
        case 'protect':   return <FoProtect />;
        case 'pipelines': return <FoPipelines />;
        case 'audit':     return <FoAudit />;
        default: return <FoWorkbench />;
      }
    };

    return (
      <div style={fl.container}>
        <div style={fl.header}>
          <div style={fl.headerTitle}>
            <div style={fl.flIcon}>F</div>
            <div>
              <div style={fl.title}>Folio</div>
              <div style={fl.subtitle}>PDF lifecycle · authoring · annotation · redaction · production · sign · archive</div>
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 8 }}>
              <KpiTile label="Active" value={D.activeDoc.name.length > 18 ? 'Opp. MSJ v3' : D.activeDoc.name} />
              <KpiTile label="Library" value={D.library.length} />
              <KpiTile label="OCR queue" value={D.ocrQueue.filter(q => q.status === 'queued' || q.status === 'running').length}
                color={D.ocrQueue.filter(q => q.status === 'queued' || q.status === 'running').length ? F.amber : null} />
            </div>
            <button style={fl.btnPrimary}
              onClick={() => flash('info', 'Open uploader')}>+ New PDF</button>
          </div>
        </div>

        <div style={fl.tabs}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setActiveTab(t.id)}
              style={{ ...fl.tab, ...(activeTab === t.id ? fl.tabActive : {}) }}>
              {t.label}
            </button>
          ))}
        </div>

        <div style={fl.body}>{renderTab()}</div>
      </div>
    );
  }

  window.FolioPlatform = FolioPlatform;
})();