// CoParent — Calm Screens (Quiet List language propagated app-wide)
// Patterns:
//   • Big header (28/800/-0.6)
//   • Amber accent strip ONLY when something needs attention
//   • Section labels (12/700, uppercase, 1.2 letter-spacing)
//   • Minimal divider-rows (no card chrome unless metric/featured)
//   • Bottom sheets for all detail / actions
//   • One primary action per surface

// ─── Shared atoms ─────────────────────────────────────────────────────────────
function CalmHeader({ title, subtitle, t, base, right }) {
  return (
    <div style={{ padding: '12px 22px 8px', flexShrink: 0 }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 28, fontWeight: 800, color: t.text, letterSpacing: -0.6, lineHeight: 1.1 }}>{title}</div>
          {subtitle && (
            <div style={{ marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7 }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: base.accent }} />
              <span style={{ fontSize: 12, fontWeight: 600, color: t.subtext, letterSpacing: 0.2 }}>{subtitle}</span>
            </div>
          )}
        </div>
        {right}
      </div>
    </div>
  );
}

function CalmSectionLabel({ label, t, action, onAction }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      marginBottom: 12, paddingLeft: 2 }}>
      <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1.2,
        textTransform: 'uppercase', color: t.subtext }}>{label}</div>
      {action && <div onClick={onAction} style={{ fontSize: 13, fontWeight: 700,
        color: t.subtext, cursor: 'pointer' }}>{action}</div>}
    </div>
  );
}

function AmberBanner({ kicker, title, t, base, onClick }) {
  return (
    <div onClick={onClick} style={{ padding: '14px 18px', background: base.amberBg,
      borderRadius: 14, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 14 }}>
      <div style={{ width: 6, alignSelf: 'stretch', borderRadius: 3, background: base.amber, flexShrink: 0 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: base.amber, letterSpacing: 0.5 }}>{kicker}</div>
        <div style={{ fontSize: 15, fontWeight: 600, color: t.text, marginTop: 2, lineHeight: 1.3 }}>{title}</div>
      </div>
      <span style={{ fontSize: 18, color: base.amber }}>›</span>
    </div>
  );
}

function ListRow({ left, primary, secondary, right, dot, t, onClick, last }) {
  return (
    <div onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 16,
      padding: '16px 0', borderBottom: last ? 'none' : `1px solid ${t.divider}`,
      cursor: onClick ? 'pointer' : 'default' }}>
      {left}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 16, fontWeight: 600, color: t.text, lineHeight: 1.3 }}>{primary}</div>
        {secondary && <div style={{ fontSize: 13, color: t.subtext, marginTop: 3, lineHeight: 1.3 }}>{secondary}</div>}
      </div>
      {right}
      {dot && <div style={{ width: 8, height: 8, borderRadius: 4, background: dot }} />}
    </div>
  );
}

function CalmAvatar({ name, color, size = 32 }) {
  return (
    <div style={{ width: size, height: size, borderRadius: size / 2, background: color,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#fff', fontWeight: 700, fontSize: size * 0.42, flexShrink: 0 }}>{name[0]}</div>
  );
}

// Sheet container — universal bottom sheet
function CalmBottomSheet({ t, onClose, children }) {
  return (
    <div onClick={onClose} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.32)',
      zIndex: 50, display: 'flex', alignItems: 'flex-end' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', background: t.cardBg,
        borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '14px 26px 32px',
        maxHeight: '90%', overflowY: 'auto',
        animation: 'slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1)' }}>
        <div style={{ width: 40, height: 4, borderRadius: 2, background: t.divider, margin: '0 auto 22px' }} />
        {children}
      </div>
      <style>{`@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }`}</style>
    </div>
  );
}

function PrimaryButton({ label, onClick, base, full = true }) {
  return (
    <div onClick={onClick} style={{ flex: full ? 1 : '0 0 auto',
      padding: '15px 22px', borderRadius: 14, background: base.primary,
      color: '#fff', textAlign: 'center', fontSize: 15, fontWeight: 700, cursor: 'pointer' }}>
      {label}
    </div>
  );
}
function SecondaryButton({ label, onClick, t, full = true }) {
  return (
    <div onClick={onClick} style={{ flex: full ? 1 : '0 0 auto',
      padding: '15px 22px', borderRadius: 14, background: t.bgSecondary,
      color: t.text, textAlign: 'center', fontSize: 15, fontWeight: 600, cursor: 'pointer' }}>
      {label}
    </div>
  );
}

// Floating + button (used on Expenses & Messages)
function FloatingPlus({ onClick, base }) {
  return (
    <div onClick={onClick} style={{ position: 'absolute', bottom: 20, right: 20,
      width: 56, height: 56, borderRadius: 28, background: base.primary,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: `0 6px 18px ${base.primary}55`, cursor: 'pointer', zIndex: 5 }}>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
        <path d="M11 4v14M4 11h14" stroke="#fff" strokeWidth="2.4" strokeLinecap="round"/>
      </svg>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// CALENDAR — calm version
// ═══════════════════════════════════════════════════════════════════════════
function CalmCalendarScreen({ t, base, openStack }) {
  const d = COPARENT_DATA;
  const [selectedDay, setSelectedDay] = React.useState(26);
  const [sheet, setSheet] = React.useState(null);
  const custody = d.aprCustody;
  const events = d.upcomingEvents;
  const daysInMonth = 30;
  const startDay = 3; // April 1, 2026 = Wednesday

  const isHandoff = (day) => day > 1 && custody[day] !== custody[day - 1];

  const cells = [];
  for (let i = 0; i < startDay; i++) cells.push(null);
  for (let dnum = 1; dnum <= daysInMonth; dnum++) cells.push(dnum);

  const youColor = base.accent;
  const themColor = base.primary;
  const custodyColor = (c) => c === 'A' ? youColor : c === 'J' ? themColor : null;

  const dayEvents = events.filter(e => e.day === selectedDay);
  const selCustody = custody[selectedDay];
  const upcomingHandoff = events.find(e => e.type === 'handoff');

  return (
    <div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column',
      padding: '0 0 24px', position: 'relative' }}>
      <CalmHeader title="April" t={t} base={base}
        subtitle="Your weeks · split with Jordan"
        right={
          <div style={{ display: 'flex', gap: 8 }}>
            {['‹','›'].map((ch, i) => (
              <div key={i} style={{ width: 32, height: 32, borderRadius: 10, background: t.bgSecondary,
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
                fontSize: 18, fontWeight: 700, color: t.subtext, lineHeight: 1 }}>{ch}</div>
            ))}
          </div>
        }
      />

      {/* Mini-grid: cleaner cells, no badge chrome, just color */}
      <div style={{ padding: '14px 18px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', marginBottom: 6 }}>
          {['S','M','T','W','T','F','S'].map((d, i) => (
            <div key={i} style={{ textAlign: 'center', fontSize: 11, fontWeight: 700,
              color: t.subtext, padding: '4px 0', letterSpacing: 0.5 }}>{d}</div>
          ))}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: '4px' }}>
          {cells.map((day, i) => {
            if (!day) return <div key={i} />;
            const cc = custody[day];
            const bg = custodyColor(cc);
            const isSelected = day === selectedDay;
            const isToday = day === 25;
            const hasEvent = events.some(e => e.day === day);
            const handoff = isHandoff(day);

            return (
              <div key={i} onClick={() => setSelectedDay(day)} style={{ cursor: 'pointer',
                aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative' }}>
                <div style={{
                  width: '100%', height: '100%', borderRadius: 12,
                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  background: isSelected ? base.primary : bg ? bg + '22' : 'transparent',
                  border: isToday && !isSelected ? `2px solid ${base.primary}` : 'none',
                  transition: 'background 0.15s',
                }}>
                  <span style={{ fontSize: 15, fontWeight: isSelected || isToday ? 800 : 600,
                    color: isSelected ? '#fff' : bg ? (cc === 'A' ? youColor : themColor) : t.subtext,
                    lineHeight: 1 }}>{day}</span>
                  {hasEvent && (
                    <div style={{ width: 4, height: 4, borderRadius: 2,
                      background: isSelected ? '#fff' : t.text, marginTop: 3, opacity: 0.7 }} />
                  )}
                </div>
                {handoff && !isSelected && (
                  <div style={{ position: 'absolute', top: 2, right: 2, width: 6, height: 6,
                    borderRadius: 3, background: base.amber }} />
                )}
              </div>
            );
          })}
        </div>
        {/* Tiny legend */}
        <div style={{ display: 'flex', gap: 16, paddingTop: 14, paddingBottom: 4 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 10, height: 10, borderRadius: 3, background: youColor + '55' }} />
            <span style={{ fontSize: 11, color: t.subtext, fontWeight: 600 }}>You</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 10, height: 10, borderRadius: 3, background: themColor + '55' }} />
            <span style={{ fontSize: 11, color: t.subtext, fontWeight: 600 }}>Jordan</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <div style={{ width: 6, height: 6, borderRadius: 3, background: base.amber }} />
            <span style={{ fontSize: 11, color: t.subtext, fontWeight: 600 }}>Handoff</span>
          </div>
        </div>
      </div>

      {/* Selected day section */}
      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel
          label={`Apr ${selectedDay} · ${selCustody === 'A' ? 'Your day' : selCustody === 'J' ? "Jordan's day" : ''}`}
          t={t}
        />
        {dayEvents.length === 0 ? (
          <div style={{ padding: '14px 0', fontSize: 14, color: t.subtext }}>Nothing scheduled.</div>
        ) : (
          <div>
            {dayEvents.map((ev, i) => (
              <ListRow key={ev.id} t={t} last={i === dayEvents.length - 1}
                onClick={() => setSheet({ type: 'event', data: ev })}
                left={
                  <div style={{ width: 64, fontSize: 13, fontWeight: 700,
                    color: ev.type === 'handoff' ? base.primary : t.subtext }}>{ev.time}</div>
                }
                primary={ev.title}
                secondary={ev.children}
                right={ev.type === 'handoff' ? <span style={{ fontSize: 18, color: t.subtext }}>›</span> : null}
              />
            ))}
          </div>
        )}
      </div>

      {/* Coming up next handoff */}
      {upcomingHandoff && (
        <div style={{ padding: '24px 22px 0' }}>
          <CalmSectionLabel label="Next handoff" t={t} />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'pickup' })}
            primary={upcomingHandoff.title}
            secondary={`${upcomingHandoff.dateLabel} · ${upcomingHandoff.time} · Tap to start check-in`}
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
          />
        </div>
      )}

      {/* FAB */}
      <FloatingPlus base={base} onClick={() => openStack && openStack({ kind: 'addEvent' })} />

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.type === 'event' && (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>
                {sheet.data.dateLabel} · {sheet.data.time}
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 10,
                letterSpacing: -0.3 }}>{sheet.data.title}</div>
              <div style={{ fontSize: 15, color: t.subtext, lineHeight: 1.6, marginBottom: 24 }}>
                With {sheet.data.children}.
                {sheet.data.type === 'handoff' && ` ${sheet.data.direction === 'you pick up' ? 'You pick up.' : 'You drop off.'}`}
              </div>
              <div style={{ display: 'flex', gap: 10 }}>
                <SecondaryButton label="Request change" t={t} onClick={() => setSheet(null)} />
                <PrimaryButton label="Got it" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
          {sheet.type === 'add-event' && (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4,
                letterSpacing: -0.3 }}>What's happening?</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Quick add — fill details after</div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {[
                  { lbl: 'Schedule change request', sub: 'Swap a day with Jordan' },
                  { lbl: 'Activity or appointment', sub: 'Soccer, doctor, school event' },
                  { lbl: 'Pickup or drop-off', sub: 'Coordinate a handoff' },
                ].map((it, i, arr) => (
                  <ListRow key={it.lbl} t={t} last={i === arr.length - 1}
                    onClick={() => setSheet(null)}
                    primary={it.lbl} secondary={it.sub}
                    right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
                  />
                ))}
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// EXPENSES — calm version with metrics & per-child split
// ═══════════════════════════════════════════════════════════════════════════
function CalmExpensesScreen({ t, base, openStack }) {
  const d = COPARENT_DATA;
  const [sheet, setSheet] = React.useState(null);
  const [filter, setFilter] = React.useState('all'); // 'all' | child id
  const [showAll, setShowAll] = React.useState(false);

  const youOwed = 210;
  const youOwe = 32.50;
  const net = d.balance.owedToYou;
  const pendingCount = d.expenses.filter(e => e.status === 'pending').length;

  const filteredExpenses = filter === 'all'
    ? d.expenses
    : d.expenses.filter(e => {
        const childName = d.childMetrics.find(c => c.id === filter)?.name;
        return e.child === childName || e.child === 'both';
      });
  const visibleExpenses = showAll ? filteredExpenses : filteredExpenses.slice(0, 4);

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

      <CalmHeader title="Expenses" t={t} base={base} subtitle="Shared with Jordan" />

      {/* Net balance: hero metric, not a colorful card — just a big number */}
      <div style={{ padding: '28px 22px 12px' }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 1.2,
          textTransform: 'uppercase', marginBottom: 8 }}>Net balance</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
          <div style={{ fontSize: 44, fontWeight: 800, color: base.green, letterSpacing: -1.5,
            lineHeight: 1 }}>+${net.toFixed(0)}</div>
          <div style={{ fontSize: 16, color: t.subtext, fontWeight: 500 }}>Jordan owes you</div>
        </div>
      </div>

      {/* Two-stat row, no cards */}
      <div style={{ padding: '20px 22px 0', display: 'flex', gap: 28 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 0.6,
            textTransform: 'uppercase', marginBottom: 6 }}>You're owed</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text }}>${youOwed.toFixed(0)}</div>
        </div>
        <div style={{ width: 1, background: t.divider }} />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: t.subtext, letterSpacing: 0.6,
            textTransform: 'uppercase', marginBottom: 6 }}>You owe</div>
          <div style={{ fontSize: 22, fontWeight: 800, color: t.text }}>${youOwe.toFixed(2)}</div>
        </div>
      </div>

      {/* Pending banner — only when there are pending */}
      {pendingCount > 0 && (
        <div style={{ padding: '24px 22px 0' }}>
          <AmberBanner t={t} base={base}
            kicker={`${pendingCount} PENDING`}
            title="Expenses awaiting review or settlement"
            onClick={() => setSheet({ type: 'pending' })}
          />
        </div>
      )}

      {/* Per-child breakdown */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="By child · this month" t={t} />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {d.childMetrics.map((c, i) => {
            const max = Math.max(...d.childMetrics.map(x => x.monthTotal));
            const pct = (c.monthTotal / max) * 100;
            return (
              <div key={c.id}
                onClick={() => setSheet({ type: 'child', data: c })}
                style={{ padding: '14px 0', borderBottom: i < d.childMetrics.length - 1 ? `1px solid ${t.divider}` : 'none',
                  cursor: 'pointer' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
                  <CalmAvatar name={c.name} color={c.color} size={26} />
                  <div style={{ flex: 1, fontSize: 15, fontWeight: 600, color: t.text }}>{c.name}</div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: t.text }}>${c.monthTotal}</div>
                  <span style={{ fontSize: 16, color: t.subtext }}>›</span>
                </div>
                <div style={{ height: 4, background: t.divider, borderRadius: 2, overflow: 'hidden', marginLeft: 38 }}>
                  <div style={{ height: '100%', width: `${pct}%`, background: c.color, borderRadius: 2 }} />
                </div>
                <div style={{ fontSize: 12, color: t.subtext, marginTop: 6, marginLeft: 38 }}>
                  Your share ${c.yourShare.toFixed(2)} · {c.breakdown.map(b => b.cat).join(' · ')}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Recent expenses with filter chips */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Recent" t={t}
          action={showAll ? 'Show less' : `${filteredExpenses.length} total`}
          onAction={() => setShowAll(s => !s)}
        />
        {/* filter chips — minimal text */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
          {[{ k: 'all', l: 'All' }, ...d.childMetrics.map(c => ({ k: c.id, l: c.name }))].map(opt => (
            <div key={opt.k} onClick={() => setFilter(opt.k)} style={{
              padding: '6px 14px', borderRadius: 16, fontSize: 13, fontWeight: 600,
              background: filter === opt.k ? t.text : t.bgSecondary,
              color: filter === opt.k ? t.bg : t.subtext,
              cursor: 'pointer', transition: 'all 0.15s' }}>
              {opt.l}
            </div>
          ))}
        </div>
        <div>
          {visibleExpenses.map((ex, i) => {
            const isPending = ex.status === 'pending';
            return (
              <ListRow key={ex.id} t={t} last={i === visibleExpenses.length - 1}
                onClick={() => setSheet({ type: 'expense', data: ex })}
                primary={ex.desc}
                secondary={`${ex.date} · ${ex.child === 'both' ? 'Both' : ex.child} · ${ex.paidBy === 'you' ? 'You paid' : 'Jordan paid'}`}
                right={
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 16, fontWeight: 700, color: t.text }}>${ex.amount}</div>
                    <div style={{ fontSize: 11, fontWeight: 700, marginTop: 3,
                      color: isPending ? base.amber : base.green }}>
                      {isPending ? 'Pending' : 'Settled'}
                    </div>
                  </div>
                }
              />
            );
          })}
        </div>
      </div>

      <FloatingPlus base={base} onClick={() => openStack && openStack({ kind: 'addExpense' })} />

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.type === 'expense' && (
            <>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 8 }}>
                {sheet.data.date} · {sheet.data.category}
              </div>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4,
                letterSpacing: -0.3 }}>{sheet.data.desc}</div>
              <div style={{ fontSize: 36, fontWeight: 800, color: t.text, letterSpacing: -1, marginBottom: 22 }}>
                ${sheet.data.amount.toFixed(2)}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <ListRow t={t} primary="Paid by"
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>
                    {sheet.data.paidBy === 'you' ? 'You' : 'Jordan'}</span>} />
                <ListRow t={t} primary="Split"
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>50 / 50</span>} />
                <ListRow t={t} primary="For" last
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>
                    {sheet.data.child === 'both' ? 'Emma & Liam' : sheet.data.child}</span>} />
              </div>
              <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
                {sheet.data.status === 'pending' ? (
                  <>
                    <SecondaryButton label="Dispute" t={t} onClick={() => setSheet(null)} />
                    <PrimaryButton label={sheet.data.paidBy === 'you' ? 'Send reminder' : 'Mark paid'}
                      base={base} onClick={() => setSheet(null)} />
                  </>
                ) : (
                  <PrimaryButton label="Got it" base={base} onClick={() => setSheet(null)} />
                )}
              </div>
            </>
          )}
          {sheet.type === 'child' && (
            <>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <CalmAvatar name={sheet.data.name} color={sheet.data.color} size={36} />
                <div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: t.text, letterSpacing: -0.3 }}>{sheet.data.name}</div>
                  <div style={{ fontSize: 13, color: t.subtext }}>This month · {sheet.data.breakdown.length} categories</div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 22 }}>
                <div style={{ fontSize: 36, fontWeight: 800, color: t.text, letterSpacing: -1 }}>${sheet.data.monthTotal}</div>
                <div style={{ fontSize: 14, color: t.subtext }}>your share ${sheet.data.yourShare.toFixed(2)}</div>
              </div>
              <CalmSectionLabel label="Breakdown" t={t} />
              <div>
                {sheet.data.breakdown.map((b, i, arr) => (
                  <ListRow key={b.cat} t={t} last={i === arr.length - 1}
                    primary={b.cat}
                    right={<span style={{ fontSize: 15, fontWeight: 700, color: t.text }}>${b.amt}</span>}
                  />
                ))}
              </div>
            </>
          )}
          {sheet.type === 'pending' && (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4,
                letterSpacing: -0.3 }}>Pending</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>{pendingCount} expenses awaiting action</div>
              <div>
                {d.expenses.filter(e => e.status === 'pending').map((ex, i, arr) => (
                  <ListRow key={ex.id} t={t} last={i === arr.length - 1}
                    primary={ex.desc}
                    secondary={`${ex.date} · ${ex.paidBy === 'you' ? 'You paid' : 'Jordan paid'}`}
                    right={<span style={{ fontSize: 15, fontWeight: 700, color: t.text }}>${ex.amount}</span>}
                  />
                ))}
              </div>
            </>
          )}
          {sheet.type === 'add-expense' && (
            <>
              <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4,
                letterSpacing: -0.3 }}>New expense</div>
              <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>Split with Jordan</div>
              <div style={{ background: t.bgSecondary, borderRadius: 16, padding: '20px 22px',
                marginBottom: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 32, fontWeight: 800, color: t.subtext }}>$</span>
                <span style={{ fontSize: 38, fontWeight: 800, color: t.subtext, letterSpacing: -1 }}>0.00</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                <ListRow t={t} primary="Description"
                  right={<span style={{ fontSize: 14, color: t.subtext }}>Required</span>} />
                <ListRow t={t} primary="For"
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>Both kids</span>} />
                <ListRow t={t} primary="Split" last
                  right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>50 / 50</span>} />
              </div>
              <div style={{ marginTop: 24 }}>
                <PrimaryButton label="Submit to Jordan" base={base} onClick={() => setSheet(null)} />
              </div>
            </>
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// MESSAGES — Communication hub (init swaps / expenses / pickups)
// ═══════════════════════════════════════════════════════════════════════════
function CalmMessagesScreen({ t, base, openStack }) {
  const d = COPARENT_DATA;
  const [sheet, setSheet] = React.useState(null);
  const [thread, setThread] = React.useState(null);

  if (thread) {
    const m = d.messages.find(x => x.id === thread);
    return (
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '12px 22px 12px', display: 'flex', alignItems: 'center', gap: 14,
          borderBottom: `1px solid ${t.divider}` }}>
          <div onClick={() => setThread(null)} style={{ width: 32, height: 32, borderRadius: 10,
            background: t.bgSecondary, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer' }}>
            <svg width="11" height="20" viewBox="0 0 11 20" fill="none">
              <path d="M9 2L2 10l7 8" stroke={t.text} strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 16, fontWeight: 800, color: t.text, lineHeight: 1.2 }}>{m.title}</div>
            <div style={{ fontSize: 12, color: t.subtext, marginTop: 2 }}>
              with Jordan · tied to {m.type === 'schedule' ? 'calendar' : m.type === 'expense' ? 'expense' : 'reminder'}
            </div>
          </div>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '20px 22px',
          display: 'flex', flexDirection: 'column', gap: 14 }}>
          {m.thread.map((msg, i) => (
            <div key={i} style={{ maxWidth: '82%',
              alignSelf: msg.from === 'system' ? 'center' : msg.from === 'you' ? 'flex-end' : 'flex-start' }}>
              {msg.from === 'system' ? (
                <div style={{ background: t.bgSecondary, borderRadius: 12, padding: '10px 14px',
                  fontSize: 12, color: t.subtext, textAlign: 'center', fontWeight: 600 }}>{msg.text}</div>
              ) : (
                <div style={{ background: msg.from === 'you' ? base.primary : t.bgSecondary,
                  borderRadius: 16, padding: '12px 16px' }}>
                  <div style={{ fontSize: 14, lineHeight: 1.45,
                    color: msg.from === 'you' ? '#fff' : t.text }}>{msg.text}</div>
                  {msg.time && <div style={{ fontSize: 11, marginTop: 4,
                    color: msg.from === 'you' ? 'rgba(255,255,255,0.65)' : t.subtext }}>{msg.time}</div>}
                </div>
              )}
            </div>
          ))}
        </div>
        <div style={{ padding: '12px 18px', borderTop: `1px solid ${t.divider}`,
          display: 'flex', alignItems: 'center', gap: 10 }}>
          <div onClick={() => setSheet({ type: 'init' })} style={{ width: 38, height: 38, borderRadius: 19,
            background: t.bgSecondary, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer', flexShrink: 0 }}>
            <svg width="16" height="16" viewBox="0 0 22 22" fill="none">
              <path d="M11 4v14M4 11h14" stroke={t.subtext} strokeWidth="2.4" strokeLinecap="round"/>
            </svg>
          </div>
          <div style={{ flex: 1, background: t.bgSecondary, borderRadius: 22, padding: '11px 18px',
            fontSize: 14, color: t.subtext }}>Add a note…</div>
        </div>
        {sheet && sheet.type === 'init' && (
          <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
            <CommunicationActions t={t} base={base} onClose={() => setSheet(null)} />
          </CalmBottomSheet>
        )}
      </div>
    );
  }

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

      <CalmHeader title="Messages" t={t} base={base}
        subtitle="Tied to events & expenses · with Jordan" />

      {/* Quick-init hub: 3 large action rows */}
      <div style={{ padding: '20px 22px 0' }}>
        <CalmSectionLabel label="Start something" t={t} />
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {[
            { k: 'swap', icon: '↔', label: 'Request a swap', sub: 'Trade a custody day with Jordan', color: base.primary },
            { k: 'expense', icon: '$', label: 'Submit expense', sub: 'Add a shared cost to settle', color: base.accent },
            { k: 'pickup', icon: '◐', label: 'Coordinate pickup', sub: 'Confirm or reschedule a handoff', color: base.amber },
          ].map((it, i, arr) => (
            <div key={it.k} onClick={() => setSheet({ type: 'init', preset: it.k })}
              style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '16px 0',
                borderBottom: i < arr.length - 1 ? `1px solid ${t.divider}` : 'none', cursor: 'pointer' }}>
              <div style={{ width: 38, height: 38, borderRadius: 12,
                background: it.color + '18', color: it.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 20, fontWeight: 800, flexShrink: 0 }}>{it.icon}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: t.text }}>{it.label}</div>
                <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>{it.sub}</div>
              </div>
              <span style={{ fontSize: 18, color: t.subtext }}>›</span>
            </div>
          ))}
        </div>
      </div>

      {/* Active thread: top urgent one as banner */}
      {(() => {
        const urgent = d.messages.find(m => m.unread);
        return urgent && (
          <div style={{ padding: '24px 22px 0' }}>
            <AmberBanner t={t} base={base}
              kicker={`FROM JORDAN · ${urgent.time.toUpperCase()}`}
              title={urgent.title}
              onClick={() => setThread(urgent.id)}
            />
          </div>
        );
      })()}

      {/* Threads list */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Threads" t={t} />
        <div>
          {d.messages.map((m, i) => {
            const dotColor = m.type === 'schedule' ? base.amber
              : m.type === 'expense' ? base.accent : base.primary;
            return (
              <ListRow key={m.id} t={t} last={i === d.messages.length - 1}
                onClick={() => setThread(m.id)}
                left={<div style={{ width: 8, height: 8, borderRadius: 4, background: dotColor, flexShrink: 0 }} />}
                primary={m.title}
                secondary={`${m.preview} · ${m.time}`}
                right={m.unread
                  ? <div style={{ width: 8, height: 8, borderRadius: 4, background: base.primary }} />
                  : <span style={{ fontSize: 16, color: t.subtext }}>›</span>}
              />
            );
          })}
        </div>
      </div>

      {/* Floating compose */}
      <FloatingPlus base={base} onClick={() => openStack && openStack({ kind: 'newMessage' })} />

      {sheet && (
        <CalmBottomSheet t={t} onClose={() => setSheet(null)}>
          {sheet.type === 'init' && (
            sheet.preset
              ? <PresetForm t={t} base={base} preset={sheet.preset} onClose={() => setSheet(null)} />
              : <CommunicationActions t={t} base={base} onClose={() => setSheet(null)} />
          )}
        </CalmBottomSheet>
      )}
    </div>
  );
}

function CommunicationActions({ t, base, onClose, onPick }) {
  const items = [
    { k: 'swap', label: 'Request a swap', sub: 'Trade a custody day' },
    { k: 'expense', label: 'Submit expense', sub: 'Split a shared cost' },
    { k: 'pickup', label: 'Coordinate pickup', sub: 'Confirm or reschedule' },
    { k: 'note', label: 'Add a note', sub: 'Log info for the record' },
  ];
  return (
    <>
      <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>What's up?</div>
      <div style={{ fontSize: 13, color: t.subtext, marginBottom: 18 }}>Send Jordan a structured request</div>
      <div>
        {items.map((it, i) => (
          <ListRow key={it.k} t={t} last={i === items.length - 1}
            onClick={onClose}
            primary={it.label} secondary={it.sub}
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>}
          />
        ))}
      </div>
    </>
  );
}

function PresetForm({ t, base, preset, onClose }) {
  const titles = {
    swap: { title: 'Request a swap', sub: 'Trade a custody day with Jordan' },
    expense: { title: 'Submit expense', sub: 'Split a shared cost' },
    pickup: { title: 'Coordinate pickup', sub: 'Confirm or reschedule a handoff' },
  };
  const meta = titles[preset];
  return (
    <>
      <div style={{ fontSize: 22, fontWeight: 800, color: t.text, marginBottom: 4, letterSpacing: -0.3 }}>{meta.title}</div>
      <div style={{ fontSize: 13, color: t.subtext, marginBottom: 22 }}>{meta.sub}</div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {preset === 'swap' && (
          <>
            <ListRow t={t} primary="Day to swap" right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>May 10 (Sat)</span>} />
            <ListRow t={t} primary="In exchange for" right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>May 17 (Sat)</span>} />
            <ListRow t={t} primary="Reason" last right={<span style={{ fontSize: 14, color: t.subtext }}>Optional</span>} />
          </>
        )}
        {preset === 'expense' && (
          <>
            <ListRow t={t} primary="Amount" right={<span style={{ fontSize: 14, color: t.subtext }}>Required</span>} />
            <ListRow t={t} primary="For" right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>Both kids</span>} />
            <ListRow t={t} primary="Split" last right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>50 / 50</span>} />
          </>
        )}
        {preset === 'pickup' && (
          <>
            <ListRow t={t} primary="When" right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>Tomorrow 3:00 PM</span>} />
            <ListRow t={t} primary="Where" right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>School</span>} />
            <ListRow t={t} primary="Who" last right={<span style={{ fontSize: 14, color: t.text, fontWeight: 600 }}>Emma & Liam</span>} />
          </>
        )}
      </div>
      <div style={{ marginTop: 24, display: 'flex', gap: 10 }}>
        <SecondaryButton label="Cancel" t={t} onClick={onClose} />
        <PrimaryButton label="Send to Jordan" base={base} onClick={onClose} />
      </div>
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SETTINGS — calm version
// ═══════════════════════════════════════════════════════════════════════════
function CalmSettingsScreen({ t, base, darkMode, toggleDark, openStack }) {
  const d = COPARENT_DATA;
  const [sheet, setSheet] = React.useState(null);

  return (
    <div style={{ flex: 1, overflowY: 'auto', padding: '0 0 24px' }}>
      <CalmHeader title="Settings" t={t} base={base} subtitle="Workspace · Alex & Jordan" />

      {/* Profile row */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0',
          borderBottom: `1px solid ${t.divider}`, cursor: 'pointer' }}
          onClick={() => setSheet({ type: 'profile' })}>
          <CalmAvatar name="Alex" color={base.accent} size={48} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: t.text }}>Alex</div>
            <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>alex@email.com</div>
          </div>
          <span style={{ fontSize: 18, color: t.subtext }}>›</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 0', cursor: 'pointer' }}
          onClick={() => setSheet({ type: 'coparent' })}>
          <CalmAvatar name="Jordan" color={base.primary} size={36} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 15, fontWeight: 600, color: t.text }}>Co-parenting with Jordan</div>
            <div style={{ fontSize: 13, color: t.subtext, marginTop: 2 }}>Connected · since Jan 2024</div>
          </div>
          <span style={{ fontSize: 18, color: t.subtext }}>›</span>
        </div>
      </div>

      {/* Children */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Children" t={t} action="Add" onAction={() => {}} />
        <div>
          {d.children.map((c, i) => (
            <ListRow key={c.id} t={t} last={i === d.children.length - 1}
              onClick={() => openStack && openStack({ kind: 'child', data: c })}
              left={<CalmAvatar name={c.name} color={c.color} size={32} />}
              primary={c.name}
              secondary={`Age ${c.age}`}
              right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
            />
          ))}
        </div>
      </div>

      {/* Account */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Account" t={t} />
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'profile' })}
            primary="Your account"
            secondary={`${COPARENT_DATA.profile.email} · ${COPARENT_DATA.profile.role}`}
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'pair' })}
            primary="Co-parent: Jordan"
            secondary="Connected · invite history"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
        </div>
      </div>

      {/* Coordination */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Coordination" t={t} />
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'schedule' })}
            primary="Custody schedule"
            secondary="2-2-3 rotation · 1 pending"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'holidays' })}
            primary="Holidays & vacations"
            secondary="3 upcoming · 2 need agreement"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'vault' })}
            primary="Documents"
            secondary="7 shared files"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'notifications' })}
            primary="Activity & notifications"
            secondary="2 need attention"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'rules' })}
            primary="House rules"
            secondary="5 agreements · 1 open"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'travel' })}
            primary="Travel notices"
            secondary="2 trips · 1 pending"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'records' })}
            primary="Records & export"
            secondary="Court-ready PDF · timestamped log"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
        </div>
      </div>

      {/* Wellbeing */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Wellbeing" t={t} />
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'journal' })}
            primary="Journal"
            secondary="Shared moments · 4 entries"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'health' })}
            primary="Health log"
            secondary="4 entries · last 30 days"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
        </div>
      </div>

      {/* Search shortcut */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Tools" t={t} />
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'reimburse' })}
            primary="Request reimbursement"
            secondary="Direct payment · Venmo / Zelle / bank"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'lock' })}
            primary="App lock"
            secondary="Face ID · privacy gate"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'swapInbox' })}
            primary="Day swaps"
            secondary="1 needs your reply"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'school' })}
            primary="School updates"
            secondary="4 recent · 1 needs action"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'wishlist' })}
            primary="Wishlist & gifts"
            secondary="5 items · birthday Jun 18"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'emergency' })}
            primary="Emergency card"
            secondary="For caregivers · 911 · ER"
            right={<span style={{ fontSize: 13, fontWeight: 700, color: base.red,
              background: base.redBg, padding: '3px 10px', borderRadius: 12 }}>!</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'providers' })}
            primary="Providers & contacts"
            secondary="Doctors, teachers, sitters · 8 saved"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'caregiver' })}
            primary="Caregiver passes"
            secondary="Temporary view for sitters · 2 active"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'dispute' })}
            primary="Disputes"
            secondary="2 open · guided resolution"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'attorney' })}
            primary="Share with attorney"
            secondary="Read-only · time-bound"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'subscription' })}
            primary="CoParent Pro"
            secondary={`Free trial · 9 days left`}
            right={<span style={{ fontSize: 13, fontWeight: 700, color: base.primary,
              background: base.primaryLight, padding: '3px 10px', borderRadius: 12 }}>Upgrade</span>}
          />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'help' })}
            primary="Help & support"
            secondary="Chat, FAQ, contact"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
        </div>
      </div>

      {/* Preferences */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Preferences" t={t} />
        <div>
          <ListRow t={t} last
            primary="Dark mode"
            right={<Toggle on={darkMode} onChange={toggleDark} t={t} base={base} />}
          />
        </div>
      </div>

      {/* Account */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Account" t={t} />
        <div>
          <ListRow t={t} onClick={() => {}}
            primary="Subscription"
            right={<span style={{ fontSize: 13, fontWeight: 700, color: base.primary,
              background: base.primaryLight, padding: '3px 10px', borderRadius: 12 }}>Pro</span>}
          />
          <ListRow t={t} onClick={() => {}} primary="Privacy & security"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
          <ListRow t={t} onClick={() => {}} primary="Help & support"
            right={<span style={{ fontSize: 18, color: t.subtext }}>›</span>} />
          <ListRow t={t} last onClick={() => {}}
            primary={<span style={{ color: base.red }}>Sign out</span>}
          />
        </div>
      </div>

      {/* Region & data */}
      <div style={{ padding: '24px 22px 0' }}>
        <CalmSectionLabel label="Region & data" t={t} />
        <div>
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'locale' })}
            primary="Language, currency, time zone"
            secondary="English (US) · USD · PT"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t}
            onClick={() => openStack && openStack({ kind: 'delete' })}
            primary="Data & account deletion"
            secondary="Download or delete your records"
            right={<span style={{ fontSize: 16, color: t.subtext }}>›</span>}
          />
          <ListRow t={t} last
            onClick={() => openStack && openStack({ kind: 'uncouple' })}
            primary={<span style={{ color: base.red }}>Unlink from Jordan</span>}
            secondary="Graceful separation · your data stays"
          />
        </div>
      </div>
    </div>
  );
}

function Toggle({ on, onChange, t, base }) {
  return (
    <div onClick={onChange} style={{ width: 46, height: 28, borderRadius: 14,
      background: on ? base.primary : t.divider, position: 'relative',
      cursor: 'pointer', transition: 'background 0.2s', flexShrink: 0 }}>
      <div style={{ position: 'absolute', top: 3, left: on ? 21 : 3,
        width: 22, height: 22, borderRadius: 11, background: '#fff',
        transition: 'left 0.2s', boxShadow: '0 1px 4px rgba(0,0,0,0.2)' }} />
    </div>
  );
}

Object.assign(window, {
  CalmCalendarScreen, CalmExpensesScreen, CalmMessagesScreen, CalmSettingsScreen,
  CalmHeader, CalmSectionLabel, CalmBottomSheet, AmberBanner, ListRow,
  PrimaryButton, SecondaryButton, FloatingPlus, CalmAvatar
});