// CoParent — Household tab (Shared Binder)
// A reference-y, factual hub for the kids and home. Three variants.
// Reuses: CalmHeader, CalmSectionLabel, ListRow, CalmAvatar, CalmBottomSheet.

// ─── Household icon ──────────────────────────────────────────────────────────
function IcHousehold({ active, color }) {
  // A bound binder spine with three rings/tabs
  return (
    <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
      <rect x="4" y="3" width="16" height="18" rx="2"
        stroke={color} strokeWidth={active ? 2.3 : 1.9} strokeLinejoin="round" />
      <path d="M8 3v18" stroke={color} strokeWidth={active ? 2.3 : 1.9} strokeLinecap="round" />
      <circle cx="8" cy="8" r="0.9" fill={color} />
      <circle cx="8" cy="12" r="0.9" fill={color} />
      <circle cx="8" cy="16" r="0.9" fill={color} />
    </svg>
  );
}

// ─── Shared bits ─────────────────────────────────────────────────────────────
function BinderKidsRow({ t, base, openStack }) {
  const kids = COPARENT_DATA.children;
  return (
    <div style={{ padding: '14px 22px 2px', display: 'flex', gap: 10 }}>
      {kids.map(c => {
        const p = COPARENT_DATA.childProfiles[c.id];
        return (
          <div key={c.id}
            onClick={() => openStack && openStack({ kind: 'child', data: c })}
            style={{ flex: 1, background: t.bgSecondary, borderRadius: 16,
              padding: '14px 14px 12px', cursor: 'pointer',
              border: t.cardBorder || 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <CalmAvatar name={c.name} color={c.color} size={36} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: t.text, lineHeight: 1.1 }}>{c.name}</div>
                <div style={{ fontSize: 11, color: t.subtext, marginTop: 2 }}>
                  Age {c.age} · {p.school.grade}
                </div>
              </div>
            </div>
            {p.medical.allergies.length > 0 && (
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '2px 7px', borderRadius: 6, background: base.redBg,
                fontSize: 10, fontWeight: 700, color: base.red, letterSpacing: 0.4 }}>
                <span style={{ fontSize: 11 }}>!</span>
                {p.medical.allergies.join(', ').toUpperCase()}
              </div>
            )}
            {p.medical.meds.length > 0 && p.medical.allergies.length === 0 && (
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5,
                padding: '2px 7px', borderRadius: 6, background: base.amberBg,
                fontSize: 10, fontWeight: 700, color: base.amber, letterSpacing: 0.4 }}>
                MED · {p.medical.meds[0].split(' ')[0].toUpperCase()}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function Attribution({ who, when, t }) {
  const isYou = who === 'You' || who === 'you';
  return (
    <span style={{ fontSize: 11, color: t.subtext, fontWeight: 600,
      display: 'inline-flex', alignItems: 'center', gap: 5 }}>
      <span style={{ width: 5, height: 5, borderRadius: 3,
        background: isYou ? '#4EADA0' : '#2D6A7F' }} />
      {who} · {when}
    </span>
  );
}

// Tiny "binder tab" graphic anchored to the left edge of a section
function BinderTab({ label, color }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '4px 12px 4px 10px', marginLeft: -22,
      background: color, color: '#fff',
      fontSize: 10, fontWeight: 800, letterSpacing: 1.4, textTransform: 'uppercase',
      borderTopRightRadius: 4, borderBottomRightRadius: 4 }}>
      {label}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// V1 — BINDER (paper-tab dividers, attribution everywhere)
// ═══════════════════════════════════════════════════════════════════════════
function HouseholdBinderScreen({ t, base, openStack }) {
  const d = COPARENT_DATA;
  const recentJournal = d.journal.slice(0, 2);
  const recentHealth = d.healthLog.slice(0, 2);
  const docCount = d.documents.length;
  const providerCount = d.providers.length;
  const docsByGroup = d.documents.reduce((m, x) => ({ ...m, [x.group]: (m[x.group] || 0) + 1 }), {});

  return (
    <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column',
      padding: '0 0 24px', position: 'relative' }}>

      <CalmHeader title="Household" t={t} base={base}
        subtitle="Shared binder · Alex & Jordan" />

      <BinderKidsRow t={t} base={base} openStack={openStack} />

      {/* Quick capture strip — feels like dropping pages into the binder */}
      <div style={{ padding: '14px 22px 6px', display: 'flex', gap: 8 }}>
        {[
          { k: 'journal', label: 'Journal', glyph: '✎' },
          { k: 'health', label: 'Health', glyph: '+' },
          { k: 'vault', label: 'Document', glyph: '▤' },
        ].map(x => (
          <div key={x.k} onClick={() => openStack && openStack({ kind: x.k })}
            style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
              padding: '12px 8px', borderRadius: 12, background: t.bgSecondary,
              cursor: 'pointer', border: t.cardBorder || 'none' }}>
            <span style={{ fontSize: 14, fontWeight: 800, color: base.primary, lineHeight: 1 }}>{x.glyph}</span>
            <span style={{ fontSize: 13, fontWeight: 700, color: t.text }}>{x.label}</span>
          </div>
        ))}
      </div>

      {/* ── Tab 1 · JOURNAL ─────────────────────────────────────────────── */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ marginBottom: 8 }}>
          <BinderTab label="Journal" color={base.accent} />
        </div>
        <CalmSectionLabel label={`Shared moments · ${d.journal.length} entries`} t={t}
          action="See all" onAction={() => openStack && openStack({ kind: 'journal' })} />
        <div>
          {recentJournal.map((j, i) => (
            <div key={j.id} style={{ padding: '12px 0',
              borderBottom: i === recentJournal.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: t.text,
                  padding: '2px 8px', borderRadius: 10,
                  background: j.child === 'Emma' ? '#4EADA022' : '#2D6A7F22' }}>
                  {j.child}
                </span>
                <Attribution who={j.author} when={j.date.split(' · ')[0]} t={t} />
              </div>
              <div style={{ fontSize: 14, color: t.text, lineHeight: 1.45,
                display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                overflow: 'hidden' }}>{j.text}</div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Tab 2 · HEALTH ─────────────────────────────────────────────── */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ marginBottom: 8 }}>
          <BinderTab label="Health" color={base.red} />
        </div>
        <CalmSectionLabel label={`Health log · ${d.healthLog.length} entries`} t={t}
          action="See all" onAction={() => openStack && openStack({ kind: 'health' })} />
        <div>
          {recentHealth.map((h, i) => {
            const sevColor = h.severity === 'high' ? base.red : h.severity === 'med' ? base.amber : base.accent;
            return (
              <div key={h.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 12,
                padding: '12px 0',
                borderBottom: i === recentHealth.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
                <div style={{ width: 4, alignSelf: 'stretch', borderRadius: 2,
                  background: sevColor, flexShrink: 0 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{h.label}</span>
                  </div>
                  <div style={{ fontSize: 12, color: t.subtext }}>
                    {h.child} · {h.date.split(' · ')[0]}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* ── Tab 3 · DOCUMENTS ─────────────────────────────────────────── */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ marginBottom: 8 }}>
          <BinderTab label="Documents" color={base.primary} />
        </div>
        <CalmSectionLabel label={`Vault · ${docCount} shared files`} t={t}
          action="Open" onAction={() => openStack && openStack({ kind: 'vault' })} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
          {Object.entries(docsByGroup).map(([group, n]) => (
            <div key={group} onClick={() => openStack && openStack({ kind: 'vault' })}
              style={{ padding: '14px 14px', borderRadius: 12, background: t.bgSecondary,
                cursor: 'pointer', border: t.cardBorder || 'none' }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: t.subtext,
                letterSpacing: 1.1, textTransform: 'uppercase' }}>{group}</div>
              <div style={{ fontSize: 17, fontWeight: 800, color: t.text, marginTop: 4,
                letterSpacing: -0.3 }}>
                {n} <span style={{ fontSize: 13, fontWeight: 600, color: t.subtext }}>
                  file{n > 1 ? 's' : ''}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* ── Tab 4 · PEOPLE ─────────────────────────────────────────── */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ marginBottom: 8 }}>
          <BinderTab label="People" color={'#8B6F47'} />
        </div>
        <CalmSectionLabel label={`Providers & contacts · ${providerCount}`} t={t}
          action="See all" onAction={() => openStack && openStack({ kind: 'providers' })} />
        <div>
          {d.providers.slice(0, 3).map((p, i) => (
            <ListRow key={p.id} t={t} last={i === 2}
              onClick={() => openStack && openStack({ kind: 'providers' })}
              left={
                <div style={{ width: 32, height: 32, borderRadius: 16,
                  background: p.emerg ? base.redBg : t.bgSecondary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 13, fontWeight: 800, color: p.emerg ? base.red : t.subtext }}>
                  {p.name.split(' ').map(s => s[0]).slice(0, 2).join('')}
                </div>
              }
              primary={p.name}
              secondary={`${p.role} · ${p.for}`}
              right={p.emerg ?
                <span style={{ fontSize: 10, fontWeight: 800, color: base.red,
                  background: base.redBg, padding: '3px 8px', borderRadius: 6,
                  letterSpacing: 0.8 }}>EMRG</span> :
                <span style={{ fontSize: 16, color: t.subtext }}>›</span>}
            />
          ))}
        </div>
      </div>

      {/* ── Tab 5 · RULES ─────────────────────────────────────────── */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ marginBottom: 8 }}>
          <BinderTab label="House rules" color={'#7E6BB5'} />
        </div>
        <CalmSectionLabel label={`${d.houseRules.length} agreements`} t={t}
          action="Open" onAction={() => openStack && openStack({ kind: 'rules' })} />
        <div>
          {d.houseRules.slice(0, 3).map((r, i) => (
            <ListRow key={r.id} t={t} last={i === 2}
              onClick={() => openStack && openStack({ kind: 'rules' })}
              primary={r.topic}
              secondary={r.agreed ? 'Agreed by both' : 'Open · 1 suggestion'}
              right={r.agreed ?
                <span style={{ fontSize: 11, fontWeight: 700, color: base.green,
                  background: base.greenBg, padding: '3px 8px', borderRadius: 8 }}>✓</span> :
                <span style={{ fontSize: 11, fontWeight: 700, color: base.amber,
                  background: base.amberBg, padding: '3px 8px', borderRadius: 8 }}>OPEN</span>}
            />
          ))}
        </div>
      </div>

      {/* ── Tab 6 · LOGISTICS ─────────────────────────────────────────── */}
      <div style={{ padding: '24px 22px 0' }}>
        <div style={{ marginBottom: 8 }}>
          <BinderTab label="Logistics" color={'#2D6A7F'} />
        </div>
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'school' })}
            primary="School updates"
            secondary={`${d.schoolFeed.length} recent · 1 needs action`}
            right={<span style={{ fontSize: 11, fontWeight: 700, color: base.amber,
              background: base.amberBg, padding: '3px 8px', borderRadius: 8 }}>1</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'travel' })}
            primary="Travel notices"
            secondary={`${d.travelNotices.length} trips · 1 pending`}
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'wishlist' })}
            primary="Wishlist & gifts"
            secondary={`${d.wishlist.length} items · birthday Jun 18`}
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'caregiver' })}
            primary="Caregiver passes"
            secondary={`${d.caregivers.length} active`}
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'emergency' })}
            primary="Emergency card"
            secondary="For caregivers · allergies, contacts, ER"
            right={<span style={{ fontSize: 11, fontWeight: 800, color: base.red,
              background: base.redBg, padding: '3px 8px', borderRadius: 6,
              letterSpacing: 0.8 }}>SOS</span>}
          />
        </div>
      </div>

      {/* Footer · binder edge */}
      <div style={{ padding: '28px 22px 0' }}>
        <div style={{ height: 1, background: t.divider, marginBottom: 12 }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          fontSize: 11, color: t.subtext, fontWeight: 600, letterSpacing: 0.3 }}>
          <span>Auto-logged · timestamped for the record</span>
          <span style={{ color: base.primary, cursor: 'pointer' }}
            onClick={() => openStack && openStack({ kind: 'records' })}>Export ›</span>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// V2 — INDEX CARD (tabbed card stack)
// One peek-card per section. Tap a tab to swap which section is in focus.
// ═══════════════════════════════════════════════════════════════════════════
function HouseholdIndexScreen({ t, base, openStack }) {
  const d = COPARENT_DATA;
  const [active, setActive] = React.useState('journal');

  const TABS = [
    { id: 'journal', label: 'Journal', color: base.accent, count: d.journal.length },
    { id: 'health', label: 'Health', color: base.red, count: d.healthLog.length },
    { id: 'docs', label: 'Docs', color: base.primary, count: d.documents.length },
    { id: 'people', label: 'People', color: '#8B6F47', count: d.providers.length },
    { id: 'rules', label: 'Rules', color: '#7E6BB5', count: d.houseRules.length },
  ];

  return (
    <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column',
      padding: '0 0 24px', position: 'relative' }}>

      <CalmHeader title="Household" t={t} base={base}
        subtitle="Shared binder · Alex & Jordan" />

      <BinderKidsRow t={t} base={base} openStack={openStack} />

      {/* Tab strip — index card tabs along the top */}
      <div style={{ padding: '20px 22px 0', position: 'relative' }}>
        <div style={{ display: 'flex', gap: 4, overflowX: 'auto', paddingBottom: 0,
          scrollbarWidth: 'none' }}>
          {TABS.map(tab => {
            const isActive = active === tab.id;
            return (
              <div key={tab.id} onClick={() => setActive(tab.id)}
                style={{ flexShrink: 0, padding: '10px 14px 14px',
                  background: isActive ? t.cardBg : t.bgSecondary,
                  color: isActive ? t.text : t.subtext,
                  borderTopLeftRadius: 12, borderTopRightRadius: 12,
                  borderTop: `3px solid ${isActive ? tab.color : 'transparent'}`,
                  cursor: 'pointer',
                  position: 'relative', top: isActive ? 1 : 0,
                  boxShadow: isActive && t.shadow ? t.shadow : 'none',
                  fontSize: 13, fontWeight: isActive ? 800 : 600,
                  display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                {tab.label}
                <span style={{ fontSize: 11, fontWeight: 700,
                  color: isActive ? t.subtext : t.subtext, opacity: 0.7 }}>{tab.count}</span>
              </div>
            );
          })}
        </div>
        {/* Page edge under tabs */}
        <div style={{ height: 0, borderTop: `1px solid ${t.divider}`, position: 'relative', top: -1 }} />
      </div>

      {/* Active section content */}
      <div style={{ padding: '4px 22px 0' }}>
        {active === 'journal' && (
          <div>
            <CalmSectionLabel label="Shared moments" t={t}
              action="Open all" onAction={() => openStack && openStack({ kind: 'journal' })} />
            {d.journal.slice(0, 4).map((j, i, arr) => (
              <div key={j.id} style={{ padding: '14px 0',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: t.text,
                    padding: '2px 8px', borderRadius: 10,
                    background: j.child === 'Emma' ? '#4EADA022' : '#2D6A7F22' }}>
                    {j.child}
                  </span>
                  <Attribution who={j.author} when={j.date.split(' · ')[0]} t={t} />
                  <span style={{ marginLeft: 'auto', fontSize: 14 }}>{j.mood}</span>
                </div>
                <div style={{ fontSize: 14, color: t.text, lineHeight: 1.5 }}>{j.text}</div>
              </div>
            ))}
          </div>
        )}
        {active === 'health' && (
          <div>
            <CalmSectionLabel label="Recent · 30 days" t={t}
              action="Open log" onAction={() => openStack && openStack({ kind: 'health' })} />
            {d.healthLog.map((h, i, arr) => {
              const sevColor = h.severity === 'high' ? base.red : h.severity === 'med' ? base.amber : base.accent;
              return (
                <div key={h.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 12,
                  padding: '14px 0',
                  borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
                  <div style={{ width: 4, alignSelf: 'stretch', borderRadius: 2,
                    background: sevColor, flexShrink: 0 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>{h.label}</div>
                    <div style={{ fontSize: 12, color: t.subtext, marginTop: 3 }}>
                      {h.child} · {h.date.split(' · ')[0]}
                    </div>
                    {h.notes && (
                      <div style={{ fontSize: 12, color: t.subtext, marginTop: 4, fontStyle: 'italic' }}>
                        {h.notes}
                      </div>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
        {active === 'docs' && (
          <div>
            <CalmSectionLabel label={`${d.documents.length} shared files`} t={t}
              action="Open vault" onAction={() => openStack && openStack({ kind: 'vault' })} />
            {d.documents.map((doc, i, arr) => (
              <ListRow key={doc.id} t={t} last={i === arr.length - 1}
                onClick={() => openStack && openStack({ kind: 'vault' })}
                left={
                  <div style={{ width: 30, height: 36, borderRadius: 4,
                    background: t.bgSecondary, border: `1px solid ${t.divider}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 9, fontWeight: 800, color: t.subtext }}>
                    {doc.kind.toUpperCase()}
                  </div>
                }
                primary={doc.name}
                secondary={`${doc.group} · ${doc.updated} · ${doc.size}`}
                right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
              />
            ))}
          </div>
        )}
        {active === 'people' && (
          <div>
            <CalmSectionLabel label="Providers & contacts" t={t}
              action="Manage" onAction={() => openStack && openStack({ kind: 'providers' })} />
            {d.providers.map((p, i, arr) => (
              <ListRow key={p.id} t={t} last={i === arr.length - 1}
                onClick={() => openStack && openStack({ kind: 'providers' })}
                left={
                  <div style={{ width: 32, height: 32, borderRadius: 16,
                    background: p.emerg ? base.redBg : t.bgSecondary,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 800, color: p.emerg ? base.red : t.subtext }}>
                    {p.name.split(' ').map(s => s[0]).slice(0, 2).join('')}
                  </div>
                }
                primary={p.name}
                secondary={`${p.role} · ${p.for} · ${p.phone}`}
              />
            ))}
          </div>
        )}
        {active === 'rules' && (
          <div>
            <CalmSectionLabel label="Agreements" t={t}
              action="Open" onAction={() => openStack && openStack({ kind: 'rules' })} />
            {d.houseRules.map((r, i, arr) => (
              <div key={r.id} style={{ padding: '14px 0',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginBottom: 6 }}>
                  <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>{r.topic}</div>
                  {r.agreed ?
                    <span style={{ fontSize: 11, fontWeight: 700, color: base.green,
                      background: base.greenBg, padding: '3px 8px', borderRadius: 8 }}>✓ Agreed</span> :
                    <span style={{ fontSize: 11, fontWeight: 700, color: base.amber,
                      background: base.amberBg, padding: '3px 8px', borderRadius: 8 }}>Open</span>}
                </div>
                <div style={{ fontSize: 12, color: t.subtext, lineHeight: 1.5 }}>
                  <b style={{ color: t.text, fontWeight: 700 }}>Emma:</b> {r.emma}
                  {r.liam !== '—' && <>{' · '}<b style={{ color: t.text, fontWeight: 700 }}>Liam:</b> {r.liam}</>}
                </div>
                {r.note && (
                  <div style={{ fontSize: 12, color: base.amber, marginTop: 5, fontStyle: 'italic' }}>
                    {r.note}
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Always-visible quick rail */}
      <div style={{ padding: '22px 22px 0' }}>
        <CalmSectionLabel label="Also in the binder" t={t} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
          {[
            { k: 'school', label: 'School updates', sub: `${d.schoolFeed.length} recent` },
            { k: 'travel', label: 'Travel notices', sub: `${d.travelNotices.length} trips` },
            { k: 'wishlist', label: 'Wishlist', sub: `${d.wishlist.length} items` },
            { k: 'emergency', label: 'Emergency card', sub: 'SOS access', emrg: true },
            { k: 'caregiver', label: 'Caregivers', sub: `${d.caregivers.length} active` },
            { k: 'records', label: 'Export records', sub: 'Court-ready' },
          ].map(x => (
            <div key={x.k} onClick={() => openStack && openStack({ kind: x.k })}
              style={{ padding: '12px 14px', borderRadius: 12, background: t.bgSecondary,
                cursor: 'pointer', border: t.cardBorder || 'none' }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: x.emrg ? base.red : t.text }}>{x.label}</div>
              <div style={{ fontSize: 11, color: t.subtext, marginTop: 2 }}>{x.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// V3 — STACKED DOSSIER (court-binder feel · all business · two-column)
// ═══════════════════════════════════════════════════════════════════════════
function HouseholdDossierScreen({ t, base, openStack }) {
  const d = COPARENT_DATA;
  const kids = d.children;

  // Dossier metric tile
  const Metric = ({ kicker, value, sub, accent, onClick }) => (
    <div onClick={onClick} style={{ padding: '14px 14px', borderRadius: 12,
      background: t.bgSecondary, cursor: onClick ? 'pointer' : 'default',
      border: t.cardBorder || 'none', minWidth: 0 }}>
      <div style={{ fontSize: 10, fontWeight: 800, color: accent || t.subtext,
        letterSpacing: 1.4, textTransform: 'uppercase' }}>{kicker}</div>
      <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginTop: 5,
        letterSpacing: -0.5, lineHeight: 1.05 }}>{value}</div>
      <div style={{ fontSize: 11, color: t.subtext, marginTop: 3 }}>{sub}</div>
    </div>
  );

  return (
    <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column',
      padding: '0 0 24px', position: 'relative' }}>

      <CalmHeader title="Household" t={t} base={base}
        subtitle={`Dossier · last sync just now`} />

      {/* Stamp · shared with Jordan */}
      <div style={{ padding: '4px 22px 0' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '5px 10px', borderRadius: 6,
          border: `1.5px dashed ${base.primary}`, color: base.primary,
          fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase' }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: base.primary }} />
          Shared · Alex + Jordan
        </div>
      </div>

      {/* Kids dossier rows — dense, like a profile sheet */}
      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel label="Children" t={t}
          action="Edit" onAction={() => {}} />
        {kids.map((c, ki) => {
          const p = COPARENT_DATA.childProfiles[c.id];
          return (
            <div key={c.id}
              onClick={() => openStack && openStack({ kind: 'child', data: c })}
              style={{ padding: '16px 0', display: 'flex', gap: 14, cursor: 'pointer',
                borderBottom: ki === kids.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
              <CalmAvatar name={c.name} color={c.color} size={48} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
                  <div style={{ fontSize: 18, fontWeight: 800, color: t.text, letterSpacing: -0.3 }}>{c.name}</div>
                  <div style={{ fontSize: 12, color: t.subtext }}>Age {c.age}</div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '70px 1fr', gap: '4px 10px',
                  fontSize: 12, lineHeight: 1.45 }}>
                  <div style={{ color: t.subtext, fontWeight: 600 }}>School</div>
                  <div style={{ color: t.text }}>{p.school.name} · {p.school.grade}</div>
                  <div style={{ color: t.subtext, fontWeight: 600 }}>Doctor</div>
                  <div style={{ color: t.text }}>{p.medical.doctor}</div>
                  {p.medical.allergies.length > 0 && (
                    <>
                      <div style={{ color: base.red, fontWeight: 700 }}>Allergy</div>
                      <div style={{ color: base.red, fontWeight: 700 }}>{p.medical.allergies.join(', ')}</div>
                    </>
                  )}
                  {p.medical.meds.length > 0 && (
                    <>
                      <div style={{ color: base.amber, fontWeight: 700 }}>Meds</div>
                      <div style={{ color: t.text }}>{p.medical.meds.join(', ')}</div>
                    </>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Index — two-column metric grid */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Index" t={t} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 8 }}>
          <Metric kicker="Journal" value={d.journal.length} sub="last: today"
            accent={base.accent}
            onClick={() => openStack && openStack({ kind: 'journal' })} />
          <Metric kicker="Health log" value={d.healthLog.length} sub="last: yesterday"
            accent={base.red}
            onClick={() => openStack && openStack({ kind: 'health' })} />
          <Metric kicker="Documents" value={d.documents.length} sub="across 4 groups"
            accent={base.primary}
            onClick={() => openStack && openStack({ kind: 'vault' })} />
          <Metric kicker="Providers" value={d.providers.length} sub="1 emergency"
            accent={'#8B6F47'}
            onClick={() => openStack && openStack({ kind: 'providers' })} />
          <Metric kicker="House rules" value={`${d.houseRules.filter(r => r.agreed).length}/${d.houseRules.length}`}
            sub="1 in discussion"
            accent={'#7E6BB5'}
            onClick={() => openStack && openStack({ kind: 'rules' })} />
          <Metric kicker="Travel" value={d.travelNotices.length} sub="1 pending"
            onClick={() => openStack && openStack({ kind: 'travel' })} />
        </div>
      </div>

      {/* Recent activity log — feels like binder timestamp index */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Recent entries" t={t}
          action="Full log" onAction={() => openStack && openStack({ kind: 'records' })} />
        <div>
          {[
            { who: 'You', when: 'Today 4:12 PM', what: 'Journal · Emma — spelling test', k: 'journal' },
            { who: 'Jordan', when: 'Yesterday 7:30 PM', what: 'Health · Liam inhaler, 2 puffs', k: 'health' },
            { who: 'Jordan', when: 'Yesterday 11:04 AM', what: "Document · Liam's pediatrician notes", k: 'vault' },
            { who: 'You', when: 'May 6 6:00 PM', what: 'Journal · Emma — first tooth', k: 'journal' },
            { who: 'Jordan', when: 'May 4', what: 'Health · Emma well-check, all normal', k: 'health' },
          ].map((e, i, arr) => (
            <div key={i} onClick={() => openStack && openStack({ kind: e.k })}
              style={{ display: 'flex', alignItems: 'flex-start', gap: 12,
                padding: '12px 0', cursor: 'pointer',
                borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${t.divider}` }}>
              <div style={{ width: 60, flexShrink: 0, fontSize: 10, fontWeight: 700,
                color: t.subtext, letterSpacing: 0.4, paddingTop: 3,
                fontVariantNumeric: 'tabular-nums' }}>
                {e.when.split(' ')[0].toUpperCase()}
              </div>
              <div style={{ width: 1, alignSelf: 'stretch', background: t.divider, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, color: t.text, lineHeight: 1.4 }}>{e.what}</div>
                <div style={{ fontSize: 11, color: t.subtext, marginTop: 3,
                  display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3,
                    background: e.who === 'You' ? '#4EADA0' : '#2D6A7F' }} />
                  Logged by {e.who} · {e.when}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Footer with export */}
      <div style={{ padding: '28px 22px 0' }}>
        <div style={{ padding: '14px 16px', borderRadius: 12,
          background: t.bgSecondary, display: 'flex', alignItems: 'center', gap: 12,
          border: t.cardBorder || 'none' }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: t.text }}>Court-ready export</div>
            <div style={{ fontSize: 11, color: t.subtext, marginTop: 2 }}>
              PDF · timestamped · admissible
            </div>
          </div>
          <div onClick={() => openStack && openStack({ kind: 'records' })}
            style={{ padding: '8px 14px', borderRadius: 10, background: base.primary,
            color: '#fff', fontSize: 12, fontWeight: 700, cursor: 'pointer' }}>
            Export
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  IcHousehold,
  HouseholdBinderScreen,
  HouseholdIndexScreen,
  HouseholdDossierScreen,
});