{/* HEADER */}

MISSION
CRITICAL.

{(objectives || []).filter(o => o.status === 'DONE').length} COMPLETED

{(memberList || []).slice(0, 4).map((m, i) => (

m.handle && openProfile(m.handle)} style={{ width: 32, height: 32, borderRadius: '50%', border: `2px solid ${STYLES.bg}`, marginLeft: i > 0 ? -12 : 0, backgroundColor: STYLES.fg, backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'none', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', color: STYLES.bg, fontSize: 12, fontWeight: 800, zIndex: 10 - i, cursor: m.handle ? 'pointer' : 'default' }}> {!m.avatarUrl && (m.displayName || '?').charAt(0).toUpperCase()}

))}

{/* LIST VIEW */}

{(objectives || []).map((obj, i) => (

{ setActiveGoalId(obj.id); setView('checkin'); }} style={{ padding: '32px 0', borderBottom: `2px solid ${STYLES.fg}`, cursor: 'pointer', animation: `slideInRight 0.4s ease-out ${i * 0.1}s both`, opacity: obj.status === 'DONE' ? 0.4 : 1, transition: 'all 0.2s' }} >

{obj.status}

{obj.isDemo && (

DEMO

)}

{obj.title}

{obj.updates && (obj.updates || []).length > 0 && (

{obj.updates[0].text}

— {obj.updates[0]._user?.displayName?.toUpperCase() || 'TEAM'}

)}

))} {(objectives || []).length === 0 && (

NO MISSIONS.

)}

{/* FAB / MAIN ACTION */}

{/* ADD NEW OVERLAY */} {view === 'add' && (

DEFINE MISSION

setNewGoalTitle(e.target.value)}
            placeholder="WHAT MUST BE DONE?"
            style={{
              width: '100%', flex: 1, backgroundColor: 'transparent', color: STYLES.bg, border: 'none', outline: 'none',
              fontSize: 'clamp(48px, 12vw, 80px)', fontWeight: 900, lineHeight: 0.9, letterSpacing: '-0.03em',
              textTransform: 'uppercase', resize: 'none',
              WebkitTextFillColor: newGoalTitle ? STYLES.bg : 'transparent',
              WebkitTextStroke: newGoalTitle ? 'none' : `1px ${STYLES.bg}`,
              opacity: newGoalTitle ? 1 : 0.5
            }}
          />
          
          <button 
            onClick={handleAddObjective}
            style={{ 
              width: '100%', padding: '24px', backgroundColor: STYLES.accent, color: STYLES.bg, border: 'none', 
              fontSize: 24, fontWeight: 900, letterSpacing: '0.05em', cursor: 'pointer', marginTop: 24
            }}
          >
            COMMIT
          </button>
        </div>
      )}

{/* CHECK-IN OVERLAY */}
      {view === 'checkin' && activeObjective && (
        <div style={{ 
          position: 'fixed', inset: 0, backgroundColor: 'rgba(10,10,10,0.8)', zIndex: 40,
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end'
        }}>
          <div 
            style={{ position: 'absolute', inset: 0 }} 
            onClick={() => setView('list')} 
          />
          <div style={{
            backgroundColor: STYLES.bg, 
            padding: '32px 24px max(env(safe-area-inset-bottom, 20px), 32px)',
            borderTop: `4px solid ${STYLES.fg}`,
            position: 'relative',
            animation: 'slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)',
            maxHeight: '80vh', overflowY: 'auto'
          }} className="hide-scrollbar">
            
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
               <h3 style={{ margin: 0, fontSize: 24, fontWeight: 900, lineHeight: 1.1, flex: 1, paddingRight: 16 }}>{activeObjective.title}</h3>
               <button onClick={() => setView('list')} style={{ background: 'none', border: 'none', fontSize: 24, padding: 0, cursor: 'pointer' }}>✕</button>
            </div>

<div style={{ display: 'flex', gap: 8, marginBottom: 32 }}>
              {['TODO', 'IN_PROGRESS', 'BLOCKED', 'DONE'].map(status => (
                <button 
                  key={status}
                  onClick={() => handleUpdateStatus(activeObjective.id, status)}
                  style={{ 
                    flex: 1, padding: '12px 0', fontSize: 12, fontWeight: 800, 
                    backgroundColor: activeObjective.status === status ? STYLES.fg : 'transparent',
                    color: activeObjective.status === status ? STYLES.bg : STYLES.fg,
                    border: `2px solid ${STYLES.fg}`,
                    cursor: 'pointer'
                  }}
                >
                  {status === 'IN_PROGRESS' ? 'DOING' : status}
                </button>
              ))}
            </div>

<div style={{ marginBottom: 24 }}>
              <span style={{ fontSize: 12, fontWeight: 800, letterSpacing: '0.1em', display: 'block', marginBottom: 12 }}>ADD INTEL</span>
              <textarea 
                value={updateText}
                onChange={e => setUpdateText(e.target.value)}
                placeholder="Latest progress or blockers..."
                style={{
                  width: '100%', height: 120, padding: 16, backgroundColor: '#FFF', border: `2px solid ${STYLES.fg}`,
                  fontSize: 18, fontWeight: 500, fontFamily: STYLES.font, outline: 'none',
                  boxSizing: 'border-box', resize: 'none'
                }}
              />
            </div>

<button 
              onClick={() => handleAddCheckIn(activeObjective.id)}
              style={{ 
                width: '100%', padding: '20px', backgroundColor: STYLES.fg, color: STYLES.bg, border: 'none', 
                fontSize: 18, fontWeight: 900, letterSpacing: '0.05em', cursor: 'pointer'
              }}
            >
              SUBMIT REPORT
            </button>
          </div>
        </div>
      )}

{/* CELEBRATION OVERLAY */}
      {celebrating && (
        <div style={{
          position: 'fixed', inset: 0, backgroundColor: STYLES.accent, zIndex: 100,
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24,
          animation: 'fadeScale 2.5s forwards ease-in-out'
        }}>
          <h1 style={{ 
            fontSize: 'clamp(64px, 15vw, 120px)', color: STYLES.bg, fontWeight: 900, 
            lineHeight: 0.85, textAlign: 'center', textTransform: 'uppercase',
            letterSpacing: '-0.05em', margin: 0
          }}>
            MISSION<br/>ACCOMPLISHED
          </h1>
        </div>
      )}

</div>
  );
}</article></body></html>