ShieldSync - Church Security Team Management App - Design Document & UI Mockups

2026-03-23-security-team-app-design.md

Church Security Team Management App — Design Document

Date: 2026-03-23 Author: Jared + Claude Status: Approved

---

Overview

A mobile-first web application for volunteer church security teams to manage scheduling, training certifications, communications, and coordination. The web app (PWA) is the source of truth; Discord (and later Telegram) serve as alternative frontends that bridge to the same backend.

Target Users

• Volunteer church security teams (5-10 members)
• Mixed backgrounds: law enforcement, military, general volunteers
• Non-technical users who need a simple, clean interface
• One admin (team lead/coordinator), rest are members

Key Constraints

• Free tier hosting (Vercel + Neon Postgres)
• Google OIDC auth (personal Gmail accounts)
• Multi-tenant (multiple churches on one platform)
• Mobile-first, dark mode
• Push notifications via Web Push + Discord

---

Architecture

┌─────────────────────────────────────────────────────┐
│                    CLIENTS                           │
│                                                      │
│  ┌──────────┐   ┌──────────┐   ┌──────────────┐    │
│  │ Web PWA  │   │ Discord  │   │  Telegram    │    │
│  │ (primary)│   │   Bot    │   │  (future)    │    │
│  └────┬─────┘   └────┬─────┘   └──────┬───────┘    │
│       │              │                 │             │
└───────┼──────────────┼─────────────────┼─────────────┘
        │              │                 │
        ▼              ▼                 ▼
┌─────────────────────────────────────────────────────┐
│              UNIFIED API (Next.js 16)                │
│                                                      │
│  ┌────────────┐ ┌────────────┐ ┌─────────────────┐  │
│  │ Schedule   │ │ Chat /     │ │ Notifications   │  │
│  │ & Calendar │ │ Messages   │ │ Engine          │  │
│  ├────────────┤ ├────────────┤ ├─────────────────┤  │
│  │ Certs &    │ │ AI Chatbot │ │ Web Push +      │  │
│  │ Training   │ │ (AI SDK)   │ │ Discord relay   │  │
│  ├────────────┤ ├────────────┤ ├─────────────────┤  │
│  │ Staff &    │ │ Broadcast  │ │ Swap Request    │  │
│  │ Profiles   │ │ System     │ │ Workflow        │  │
│  └────────────┘ └────────────┘ └─────────────────┘  │
│                                                      │
│  Auth: Google OIDC  │  Realtime: SSE                 │
└──────────┬───────────────────────────────────────────┘
           │
           ▼
┌─────────────────────────────────────────────────────┐
│                    DATA LAYER                        │
│                                                      │
│  ┌──────────────┐  ┌──────────────────────────────┐  │
│  │ Neon Postgres│  │ Upstash Redis (optional)     │  │
│  │ (all data)   │  │ (realtime, presence, cache)  │  │
│  └──────────────┘  └──────────────────────────────┘  │
└─────────────────────────────────────────────────────┘

Tech Stack

Layer	Technology	Why
Framework	Next.js 16 (App Router)	Server Components, API routes, Vercel-native
Hosting	Vercel (free tier)	Zero-config deploys, serverless functions
Database	Neon Postgres (Vercel Marketplace)	Free tier, serverless, branching
Auth	NextAuth.js + Google OIDC	Free, simple, personal Gmail support
AI	AI SDK + AI Gateway	Chatbot, schedule generation
Chat bridge	Chat SDK + Discord adapter	Unified bot across platforms
Realtime	Server-Sent Events (SSE)	Simpler than WebSockets, works on Vercel
Push	Web Push API + Discord notifications	Dual-channel delivery
UI	shadcn/ui + Tailwind + Geist	Mobile-first, dark mode, clean

Key Principles

• Web app is the source of truth — all data lives in Postgres
• Discord is a bridge, not a silo — messages sent via Discord stored in same DB
• Notification engine is platform-agnostic — delivers to each user's preferred channel(s)
• AI chatbot is one brain, multiple mouths — same logic for web and Discord

---

Data Model

Multi-Tenant Organization

organizations
  id              uuid PK
  name            text               -- "Grace Bible Church"
  address         text               -- "1234 Main St, Austin, TX 78701"
  city            text
  state           text
  slug            text UNIQUE        -- "grace-bible-austin"
  created_at      timestamptz

memberships
  id              uuid PK
  user_id         uuid FK→users
  org_id          uuid FK→organizations
  role            enum(admin, member)
  status          enum(active, pending, inactive)
  joined_at       timestamptz

Users & Auth

users
  id              uuid PK
  google_id       text UNIQUE
  email           text UNIQUE
  name            text
  phone           text
  avatar_url      text
  discord_user_id text
  created_at      timestamptz

Notification preferences are per-membership (per-org):

notification_preferences
  membership_id   uuid FK→memberships
  web_push        boolean DEFAULT true
  discord         boolean DEFAULT true
  shift_reminder  boolean DEFAULT true
  swap_request    boolean DEFAULT true
  broadcast       boolean DEFAULT true
  cert_expiry     boolean DEFAULT false

Scheduling

events
  id              uuid PK
  org_id          uuid FK→organizations
  title           text               -- "Sunday Main Service"
  day_of_week     int                -- 0=Sunday
  start_time      time
  end_time        time
  recurrence      text               -- 'weekly'
  min_staff       int                -- 1 for first service, 2 for main
  created_by      uuid FK→users

assignments
  id              uuid PK
  org_id          uuid FK→organizations
  event_id        uuid FK→events
  date            date
  user_id         uuid FK→users
  role            enum(primary, secondary)
  status          enum(confirmed, pending_swap, swapped)
  created_at      timestamptz

swap_requests
  id              uuid PK
  org_id          uuid FK→organizations
  assignment_id   uuid FK→assignments
  requester_id    uuid FK→users
  target_id       uuid FK→users
  target_date     date
  status          enum(pending, accepted, declined, cancelled)
  created_at      timestamptz

blackout_dates
  id              uuid PK
  org_id          uuid FK→organizations
  user_id         uuid FK→users
  start_date      date
  end_date        date
  reason          text
  created_at      timestamptz

Training & Certs

certifications
  id              uuid PK
  org_id          uuid FK→organizations
  user_id         uuid FK→users
  cert_type       text               -- "CPR", "Concealed Carry"
  issued_date     date
  expiry_date     date
  document_url    text               -- future: uploaded proof
  created_at      timestamptz

abilities
  id              uuid PK
  org_id          uuid FK→organizations
  name            text               -- "Armed", "First Aid", "Door Greeter"
  description     text
  UNIQUE(org_id, name)

user_abilities
  user_id         uuid FK→users
  ability_id      uuid FK→abilities
  PRIMARY KEY (user_id, ability_id)

Communications

messages
  id              uuid PK
  org_id          uuid FK→organizations
  channel         enum(team, ai_bot)
  author_id       uuid FK→users      -- null if AI response
  content         text
  is_broadcast    boolean DEFAULT false
  source          enum(web, discord, telegram)
  created_at      timestamptz

push_subscriptions
  id              uuid PK
  user_id         uuid FK→users
  endpoint        text
  keys            jsonb              -- p256dh + auth
  created_at      timestamptz

Key Data Model Decisions

• Events are templates (recurring), assignments are instances (specific date + person)
• Swap requests are a workflow with state (pending → accepted/declined)
• Messages table is unified — web and Discord messages in one table
• Abilities are tags (what you can do), certs are documents with expiry dates
• Role lives on membership, not user — same person can be admin at one church, member at another
• All tables scoped by org_id for data isolation

---

User Interface

Navigation (mobile-first bottom tabs)

Tab	Icon	Screen
Calendar	Calendar	Monthly view, assignments, next shift card
Team	People	Roster, member profiles, abilities
Chat	Message	Team channel (bridged to Discord)
AI	Bot	1:1 AI chatbot
Me	User	Profile, certs, blackout dates, settings

Calendar (home screen)

• Monthly view with dots on assigned days
• Next upcoming shift highlighted as a card at top
• Tap a day → see who's on primary/secondary
• Admin: tap to assign/edit coverage

Team

• Roster list with ability badges and active certs
• Tap member → profile with certs, abilities, upcoming shifts, blackout dates
• Admin: manage abilities, view cert expirations

Chat

• One team channel per org
• Broadcasts pinned/highlighted at top
• Messages show source icon (web/Discord)
• Admin: broadcast mode toggle

AI Bot

• Conversational 1:1 interface
• Takes actions: schedule queries, swap requests, blackout dates
• Shows structured confirmation cards
• Admin-only tools: broadcast, schedule builder

Profile (Me)

• Upcoming shifts
• Certs with expiry countdown
• Abilities
• Blackout date management
• Notification preferences
• Link Discord account

---

AI Chatbot Design

Tool-calling agent with access to the unified API.

Tools

Tool	Access	Description
getMySchedule	all	Fetch user's upcoming assignments
getDateCoverage	all	Check who's assigned on a date
checkAvailability	all	List available members for a date
submitSwapRequest	all	Create a swap request to another member
setBlackoutDates	all	Add/remove user's blackout dates
getTeamRoster	all	List team members + abilities
getMyCerts	all	Fetch user's certifications
sendBroadcast	admin	Send team broadcast
buildSchedule	admin	Auto-generate fair rotation

Schedule Generation Algorithm

1. Get all recurring events for the date range
2. Get all member blackout dates
3. Get member abilities (e.g., "Armed" required for primary)
4. Distribute assignments fairly — track count per member, balance
5. Never double-book same person on same day
6. Respect minimum staffing requirements
7. Output draft schedule for admin review before publishing

Context (always available to AI)

• Authenticated user identity and role
• Current org context
• Current date
• User's upcoming assignments and blackout dates

---

Notifications

Delivery channels

• Web Push API — browser/PWA notifications
• Discord DM — for users with linked Discord accounts
• Both channels deliver simultaneously based on user preferences

Event types

Event	Default	Delivery
Shift reminder (24hr before)	ON	Push + Discord DM
Swap request received	ON	Push + Discord DM
Swap accepted/declined	ON	Push + Discord DM
Broadcast from admin	ON	Push + Discord channel + DM
Schedule published	ON	Push + Discord channel
Cert expiring (30 days)	OFF	Push + Discord DM

Discord server structure

• #announcements — broadcasts (read-only for members)
• #team-chat — bridged bidirectionally to web app team chat
• Bot DMs — AI chatbot (same capabilities as web app)

---

Auth & Security

Authentication

• Google OIDC (personal Gmail accounts)
• NextAuth.js with JWT strategy (httpOnly cookies)
• Invite-only: admin adds email or shares invite link
• No self-registration

Authorization

Action	Admin	Member
View calendar/schedule	Yes	Yes
Request swap	Yes	Yes
Set own blackout dates	Yes	Yes
Team chat + AI bot	Yes	Yes
Build/publish schedule	Yes	No
Send broadcasts	Yes	No
Manage roster	Yes	No
Manage abilities/cert types	Yes	No
Approve new members	Yes	No

Multi-tenant auth flow

1. Sign in with Google
2. No memberships → "Join or Create a Church" screen
3. Single membership → straight to app
4. Multiple memberships → org picker
5. App scoped to selected org

Future security (Phase 3)

• E2E encrypted messaging (additive layer, doesn't change auth)
• Client-side key management (per-device)
• Encrypted document storage

---

Phasing

Phase 1 — MVP

• Auth (Google OIDC, multi-tenant orgs, invite-only)
• Org setup (create church, invite by email)
• Calendar (monthly view, assignments, next shift card)
• Schedule management (recurring events, assign primary/secondary)
• Swap requests (request → notify → accept/decline → auto-update)
• Blackout dates
• Staff profiles (abilities as tags)
• Cert tracking (type, issued, expiry — no uploads)
• Team chat (one channel, bridged to Discord)
• AI chatbot (schedule queries, swaps, blackout dates, availability)
• AI schedule builder (admin: generate fair rotation)
• Notifications (Web Push + Discord)
• Discord bot (full parity with web AI + chat bridge)
• PWA (installable, service worker for push)
• Mobile-first UI (shadcn/ui, dark mode, bottom tabs)

Phase 2 — Enhancements

• Cert document upload (Vercel Blob)
• Training management (assign courses, track completion)
• Practice journal (log drills, range time)
• Scheduled training events (calendar events, "training" type)
• Telegram bot (second Chat SDK adapter)
• Multiple chat channels
• DMs in web app
• Cert expiry notifications (opt-in)

Phase 3 — Secure

• E2E encrypted messaging (Signal Protocol or similar)
• Secure document storage (encrypted policies, SOPs)
• OTR conversations
• Client-side key management

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShieldSync — Church Security Team App Mockups</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet">
<style>
  :root {
    --bg-primary: #0c0e12;
    --bg-secondary: #141720;
    --bg-card: #1a1d28;
    --bg-elevated: #222636;
    --bg-input: #1a1d28;
    --border: #2a2e3d;
    --border-subtle: #1f2232;
    --text-primary: #e8eaf0;
    --text-secondary: #8b90a5;
    --text-muted: #5c6178;
    --accent: #e5a238;
    --accent-dim: rgba(229, 162, 56, 0.15);
    --accent-glow: rgba(229, 162, 56, 0.08);
    --success: #3dd68c;
    --success-dim: rgba(61, 214, 140, 0.12);
    --danger: #ef5656;
    --danger-dim: rgba(239, 86, 86, 0.12);
    --info: #5b9aff;
    --info-dim: rgba(91, 154, 255, 0.12);
    --font-display: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --phone-width: 390px;
    --phone-height: 844px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: #08090c;
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  /* ── Page Layout ── */
  .page-header {
    text-align: center;
    padding: 60px 24px 20px;
    position: relative;
  }
  .page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
  }
  .page-header .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .page-header .logo svg { width: 36px; height: 36px; }
  .page-header .logo span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--accent) 0%, #f0c56e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .page-header p {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 500px;
    margin: 0 auto;
  }
  .page-subtitle {
    color: var(--text-muted);
    font-size: 12px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
  }

  /* ── Section Headers ── */
  .section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px 60px;
  }
  .section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-title .num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-weight: 500;
  }
  .section-desc {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 32px;
    max-width: 600px;
  }
  .section-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 0 24px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Phone Frame ── */
  .screen-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .screen-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .screen-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
  }
  .screen-sublabel {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    max-width: 280px;
  }
  .phone {
    width: var(--phone-width);
    height: var(--phone-height);
    background: var(--bg-primary);
    border-radius: 44px;
    border: 3px solid #2a2e3d;
    overflow: hidden;
    position: relative;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.03),
      0 25px 60px rgba(0,0,0,0.5),
      0 4px 12px rgba(0,0,0,0.3);
  }
  .phone::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 120px; height: 30px;
    background: #0c0e12;
    border-radius: 0 0 18px 18px;
    z-index: 10;
  }
  .phone-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ── Status Bar ── */
  .status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 28px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .status-bar .time { font-family: var(--font-body); }
  .status-icons { display: flex; gap: 5px; align-items: center; }
  .status-icons svg { width: 16px; height: 16px; fill: var(--text-primary); }

  /* ── Top Header ── */
  .app-header {
    padding: 8px 20px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
  }
  .app-header h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.3px;
  }
  .app-header .header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .header-icon-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-icon-btn svg { width: 18px; height: 18px; stroke: var(--text-secondary); fill: none; stroke-width: 2; }

  /* ── Bottom Nav ── */
  .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 12px 28px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .nav-item.active { color: var(--accent); }
  .nav-item .nav-badge {
    position: absolute;
    top: -2px; right: -6px;
    width: 8px; height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--bg-secondary);
  }
  .nav-icon-wrap { position: relative; }

  /* ── Content Area ── */
  .content {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
  }

  /* ── Cards ── */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
  }
  .card-accent {
    border-left: 3px solid var(--accent);
  }
  .card-success {
    border-left: 3px solid var(--success);
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .card-overline {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--accent);
    font-weight: 500;
  }
  .card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin-top: 2px;
  }
  .card-detail {
    font-size: 13px;
    color: var(--text-secondary);
  }
  .card-detail strong { color: var(--text-primary); font-weight: 600; }

  /* ── Buttons ── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
  }
  .btn-primary {
    background: var(--accent);
    color: #0c0e12;
  }
  .btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
  }
  .btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
  }
  .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--radius-xs);
  }
  .btn-full { width: 100%; }

  /* ── Tags / Badges ── */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
  }
  .badge-accent { background: var(--accent-dim); color: var(--accent); }
  .badge-success { background: var(--success-dim); color: var(--success); }
  .badge-danger { background: var(--danger-dim); color: var(--danger); }
  .badge-info { background: var(--info-dim); color: var(--info); }
  .badge-muted { background: rgba(92,97,120,0.2); color: var(--text-secondary); }

  /* ── Calendar ── */
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin: 16px 0;
  }
  .cal-header {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    position: relative;
    gap: 2px;
  }
  .cal-day.today {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 700;
  }
  .cal-day.assigned::after {
    content: '';
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
  }
  .cal-day.assigned-other::after {
    content: '';
    width: 5px; height: 5px;
    background: var(--info);
    border-radius: 50%;
    opacity: 0.5;
  }
  .cal-day.blackout {
    color: var(--text-muted);
    text-decoration: line-through;
    opacity: 0.4;
  }
  .cal-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
  }
  .cal-month-nav h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
  }
  .cal-nav-btn {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
  }
  .cal-legend {
    display: flex;
    gap: 16px;
    margin-top: 4px;
    margin-bottom: 16px;
  }
  .cal-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .cal-legend-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
  }

  /* ── Roster / List items ── */
  .list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .list-item:last-child { border-bottom: none; }
  .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
  }
  .avatar-amber { background: var(--accent-dim); color: var(--accent); }
  .avatar-blue { background: var(--info-dim); color: var(--info); }
  .avatar-green { background: var(--success-dim); color: var(--success); }
  .avatar-red { background: var(--danger-dim); color: var(--danger); }
  .list-item-info { flex: 1; min-width: 0; }
  .list-item-name {
    font-weight: 600;
    font-size: 14px;
  }
  .list-item-sub {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .list-item-action {
    flex-shrink: 0;
    color: var(--text-muted);
  }

  /* ── Chat ── */
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .msg {
    max-width: 85%;
  }
  .msg-other { align-self: flex-start; }
  .msg-self { align-self: flex-end; }
  .msg-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
  }
  .msg-author {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
  }
  .msg-source {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-mono);
  }
  .msg-time {
    font-size: 10px;
    color: var(--text-muted);
  }
  .msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
  }
  .msg-other .msg-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top-left-radius: 4px;
  }
  .msg-self .msg-bubble {
    background: var(--accent-dim);
    border: 1px solid rgba(229,162,56,0.2);
    border-top-right-radius: 4px;
    color: var(--text-primary);
  }
  .msg-broadcast {
    align-self: stretch;
    max-width: 100%;
  }
  .msg-broadcast .msg-bubble {
    background: var(--accent-dim);
    border: 1px solid rgba(229,162,56,0.25);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
  }
  .msg-broadcast .broadcast-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    font-weight: 500;
  }
  .chat-input-bar {
    padding: 12px 20px 8px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
  }
  .chat-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
  }
  .chat-send {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* ── AI Bot ── */
  .ai-bubble {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    border-top-left-radius: 4px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.5;
  }
  .ai-action-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
    margin-top: 8px;
  }
  .ai-action-card .action-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
  }
  .ai-action-card .action-detail {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
  }

  /* ── Profile ── */
  .profile-header {
    text-align: center;
    padding: 16px 0 20px;
  }
  .profile-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin: 0 auto 10px;
    border: 2px solid rgba(229,162,56,0.3);
  }
  .profile-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
  }
  .profile-role {
    font-size: 12px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .profile-section {
    margin-bottom: 20px;
  }
  .profile-section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .cert-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
  }
  .cert-name { font-size: 13px; font-weight: 600; }
  .cert-expiry { font-size: 11px; }

  /* ── Login Screen ── */
  .login-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    background:
      radial-gradient(ellipse at 50% 30%, var(--accent-glow) 0%, transparent 50%),
      var(--bg-primary);
  }
  .login-logo {
    margin-bottom: 32px;
  }
  .login-logo svg { width: 64px; height: 64px; }
  .login-logo h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--accent) 0%, #f0c56e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 12px;
  }
  .login-logo p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 6px;
  }
  .google-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #fff;
    color: #333;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    margin-bottom: 16px;
  }
  .google-btn svg { width: 20px; height: 20px; }
  .login-footer {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 24px;
  }

  /* ── Org Setup ── */
  .org-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
  }
  .org-option {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .org-option:hover { border-color: var(--accent); }
  .org-option h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
  }
  .org-option p {
    font-size: 13px;
    color: var(--text-secondary);
  }
  .form-group {
    margin-bottom: 16px;
  }
  .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-mono);
  }
  .form-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
  }
  .form-input::placeholder { color: var(--text-muted); }

  /* ── Swap Request Modal ── */
  .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: flex-end;
    z-index: 20;
  }
  .modal-sheet {
    width: 100%;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
    padding: 20px;
    max-height: 70%;
  }
  .modal-handle {
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 16px;
  }
  .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 16px;
  }

  /* ── Notification toast ── */
  .notif-toast {
    position: absolute;
    top: 44px;
    left: 12px; right: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .notif-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
  }
  .notif-content { flex: 1; }
  .notif-app {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .notif-text {
    font-size: 13px;
    color: var(--text-primary);
    margin-top: 2px;
  }
  .notif-time {
    font-size: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
  }

  /* ── Toggle ── */
  .toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .toggle-row:last-child { border-bottom: none; }
  .toggle-label { font-size: 13px; }
  .toggle {
    width: 40px; height: 22px;
    border-radius: 11px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
  }
  .toggle::after {
    content: '';
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    position: absolute;
    top: 2px; left: 2px;
    transition: all 0.2s;
  }
  .toggle.on {
    background: var(--accent-dim);
    border-color: rgba(229,162,56,0.3);
  }
  .toggle.on::after {
    background: var(--accent);
    left: 20px;
  }

  /* ── Discord preview ── */
  .discord-preview {
    background: #2b2d31;
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
    max-width: 480px;
  }
  .discord-sidebar {
    background: #1e1f22;
    padding: 12px;
  }
  .discord-channel {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: #949ba4;
  }
  .discord-channel.active {
    background: #404249;
    color: #fff;
  }
  .discord-channel::before {
    content: '#';
    font-size: 18px;
    font-weight: 500;
    opacity: 0.5;
  }
  .discord-main {
    padding: 16px;
  }
  .discord-msg {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
  }
  .discord-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
  }
  .discord-msg-content { flex: 1; }
  .discord-msg-author {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .discord-msg-author .bot-tag {
    background: #5865f2;
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
  }
  .discord-msg-author .timestamp {
    font-size: 11px;
    color: #949ba4;
    font-weight: 400;
  }
  .discord-msg-text {
    font-size: 14px;
    color: #dbdee1;
    line-height: 1.4;
    margin-top: 2px;
  }
  .discord-embed {
    border-left: 3px solid var(--accent);
    background: #2b2d31;
    border-radius: 4px;
    padding: 10px 12px;
    margin-top: 6px;
    max-width: 350px;
  }
  .discord-embed-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
  }
  .discord-embed-field {
    font-size: 13px;
    color: #b5bac1;
  }
  .discord-input {
    margin-top: 8px;
    background: #383a40;
    border-radius: 8px;
    padding: 10px 14px;
    color: #949ba4;
    font-size: 14px;
  }

  /* ── Flow diagrams ── */
  .flow-container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    padding: 20px 0;
  }
  .flow-diagram {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 480px;
    width: 100%;
  }
  .flow-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .flow-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 4px;
  }
  .flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
  }
  .flow-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .flow-dot-amber { background: var(--accent); }
  .flow-dot-green { background: var(--success); }
  .flow-dot-blue { background: var(--info); }
  .flow-dot-red { background: var(--danger); }
  .flow-dot-muted { background: var(--text-muted); }
  .flow-line {
    width: 2px;
    height: 24px;
    background: var(--border);
  }
  .flow-content {
    padding-bottom: 12px;
  }
  .flow-content h4 {
    font-size: 13px;
    font-weight: 600;
  }
  .flow-content p {
    font-size: 12px;
    color: var(--text-muted);
  }

  /* ── Admin schedule builder ── */
  .schedule-draft {
    margin-top: 12px;
  }
  .schedule-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    margin-bottom: 4px;
    font-size: 13px;
  }
  .schedule-date {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    min-width: 56px;
  }
  .schedule-roles {
    flex: 1;
    display: flex;
    gap: 12px;
  }
  .schedule-role {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .schedule-role-tag {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-transform: uppercase;
  }
</style>
</head>
<body>

<!-- ════════════════════ PAGE HEADER ════════════════════ -->
<div class="page-header">
  <div class="logo">
    <svg viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="36" height="36" rx="10" fill="url(#g1)"/>
      <path d="M18 8l-8 6v8l8 6 8-6v-8l-8-6z" stroke="#0c0e12" stroke-width="2.2" fill="none"/>
      <circle cx="18" cy="18" r="3.5" fill="#0c0e12"/>
      <defs><linearGradient id="g1" x1="0" y1="0" x2="36" y2="36"><stop stop-color="#e5a238"/><stop offset="1" stop-color="#f0c56e"/></linearGradient></defs>
    </svg>
    <span>ShieldSync</span>
  </div>
  <p>Church Security Team Management — Interactive Mockups</p>
  <div class="page-subtitle">Draft v1 &middot; March 2026</div>
</div>

<!-- ════════════════════ 01. SIGN IN ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">01</span> Sign In</div>
  <p class="section-desc">Google OIDC authentication. Clean, focused entry point.</p>
  <div class="screen-row">
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons">
              <svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg>
              <svg viewBox="0 0 16 16"><path d="M8 2C4.69 2 2 4.69 2 8s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zM8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/><path d="M8 5v3.5l2.5 1.5"/></svg>
            </div>
          </div>
          <div class="login-screen">
            <div class="login-logo">
              <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="64" height="64" rx="18" fill="url(#g2)"/>
                <path d="M32 14l-14 10.5v15L32 50l14-10.5v-15L32 14z" stroke="#0c0e12" stroke-width="3.5" fill="none"/>
                <circle cx="32" cy="32" r="6" fill="#0c0e12"/>
                <defs><linearGradient id="g2" x1="0" y1="0" x2="64" y2="64"><stop stop-color="#e5a238"/><stop offset="1" stop-color="#f0c56e"/></linearGradient></defs>
              </svg>
              <h1>ShieldSync</h1>
              <p>Secure your team. Simplify your schedule.</p>
            </div>
            <button class="google-btn">
              <svg viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg>
              Sign in with Google
            </button>
            <div class="login-footer">Invite-only access &middot; Contact your team lead</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Sign In</div>
      <div class="screen-sublabel">Google OIDC — personal Gmail accounts</div>
    </div>

    <!-- Join / Create Org -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons">
              <svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg>
            </div>
          </div>
          <div class="org-screen" style="padding-top: 50px;">
            <h2 style="font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 4px;">Welcome, Jared</h2>
            <p style="color: var(--text-secondary); font-size: 14px; margin-bottom: 28px;">Get started by joining or creating a team.</p>

            <div class="org-option">
              <h3>Join an Existing Team</h3>
              <p>Enter an invite code from your team lead</p>
              <div style="margin-top: 12px;">
                <input class="form-input" placeholder="Enter invite code" style="width: 100%;">
              </div>
            </div>

            <div style="text-align: center; color: var(--text-muted); font-size: 13px; padding: 8px 0;">or</div>

            <div class="org-option" style="border-color: rgba(229,162,56,0.3);">
              <h3 style="color: var(--accent);">Create a New Team</h3>
              <p>Set up a security team for your church</p>
            </div>
          </div>
        </div>
      </div>
      <div class="screen-label">Join or Create Team</div>
      <div class="screen-sublabel">First-time users — after Google sign-in</div>
    </div>

    <!-- Create Org Form -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:42</span>
            <div class="status-icons">
              <svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg>
            </div>
          </div>
          <div class="app-header">
            <h1>New Team</h1>
          </div>
          <div class="content">
            <div class="form-group">
              <label class="form-label">Church Name</label>
              <input class="form-input" value="Grace Bible Church">
            </div>
            <div class="form-group">
              <label class="form-label">Address</label>
              <input class="form-input" value="1234 Main St">
            </div>
            <div style="display: flex; gap: 12px;">
              <div class="form-group" style="flex: 1;">
                <label class="form-label">City</label>
                <input class="form-input" value="Austin">
              </div>
              <div class="form-group" style="width: 80px;">
                <label class="form-label">State</label>
                <input class="form-input" value="TX">
              </div>
            </div>
            <div style="margin-top: 8px;">
              <button class="btn btn-primary btn-full">Create Team</button>
            </div>
            <p style="text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 12px;">You'll be the team admin</p>
          </div>
        </div>
      </div>
      <div class="screen-label">Create Team</div>
      <div class="screen-sublabel">Admin fills in church details</div>
    </div>
  </div>
</div>

<!-- ════════════════════ 02. CALENDAR ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">02</span> Calendar — Home Screen</div>
  <p class="section-desc">Monthly view with upcoming shift card. Your assigned days marked with dots.</p>
  <div class="screen-row">
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons">
              <svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg>
            </div>
          </div>
          <div class="app-header">
            <h1>Schedule</h1>
            <div class="header-actions">
              <div class="header-icon-btn">
                <svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/></svg>
              </div>
            </div>
          </div>
          <div class="content">
            <!-- Next shift card -->
            <div class="card card-accent">
              <div class="card-overline">Your Next Shift</div>
              <div class="card-title">Sunday Main Service</div>
              <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 6px;">
                <div>
                  <div class="card-detail"><strong>Mar 29</strong> &middot; 10:30 AM</div>
                  <div class="card-detail" style="margin-top: 2px;">Role: <span class="badge badge-accent">Primary</span></div>
                  <div class="card-detail" style="margin-top: 2px;">With: <strong>Josh M.</strong> (Secondary)</div>
                </div>
                <button class="btn btn-outline btn-sm">Swap</button>
              </div>
            </div>

            <!-- Calendar -->
            <div class="cal-month-nav">
              <button class="cal-nav-btn">&larr;</button>
              <h2>March 2026</h2>
              <button class="cal-nav-btn">&rarr;</button>
            </div>
            <div class="cal-legend">
              <div class="cal-legend-item"><div class="cal-legend-dot" style="background: var(--accent);"></div> Your shift</div>
              <div class="cal-legend-item"><div class="cal-legend-dot" style="background: var(--info); opacity: 0.5;"></div> Others on duty</div>
            </div>
            <div class="calendar-grid">
              <div class="cal-header">Su</div><div class="cal-header">Mo</div><div class="cal-header">Tu</div><div class="cal-header">We</div><div class="cal-header">Th</div><div class="cal-header">Fr</div><div class="cal-header">Sa</div>
              <div class="cal-day assigned">1</div><div class="cal-day">2</div><div class="cal-day">3</div><div class="cal-day">4</div><div class="cal-day">5</div><div class="cal-day">6</div><div class="cal-day">7</div>
              <div class="cal-day assigned-other">8</div><div class="cal-day">9</div><div class="cal-day">10</div><div class="cal-day">11</div><div class="cal-day">12</div><div class="cal-day">13</div><div class="cal-day">14</div>
              <div class="cal-day assigned">15</div><div class="cal-day">16</div><div class="cal-day">17</div><div class="cal-day">18</div><div class="cal-day">19</div><div class="cal-day">20</div><div class="cal-day">21</div>
              <div class="cal-day assigned-other">22</div><div class="cal-day today">23</div><div class="cal-day">24</div><div class="cal-day">25</div><div class="cal-day">26</div><div class="cal-day">27</div><div class="cal-day">28</div>
              <div class="cal-day assigned">29</div><div class="cal-day">30</div><div class="cal-day">31</div><div class="cal-day"></div><div class="cal-day"></div><div class="cal-day"></div><div class="cal-day"></div>
            </div>
          </div>
          <div class="bottom-nav">
            <div class="nav-item active">
              <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Schedule
            </div>
            <div class="nav-item">
              <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
              Team
            </div>
            <div class="nav-item">
              <div class="nav-icon-wrap">
                <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
                <span class="nav-badge"></span>
              </div>
              Chat
            </div>
            <div class="nav-item">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h-2V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/><path d="M19.07 4.93l-1.41 1.41M4.93 4.93l1.41 1.41M22 12h-2M4 12H2M19.07 19.07l-1.41-1.41M4.93 19.07l1.41-1.41M12 22v-2"/></svg>
              AI
            </div>
            <div class="nav-item">
              <svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              Me
            </div>
          </div>
        </div>
      </div>
      <div class="screen-label">Calendar — Member View</div>
      <div class="screen-sublabel">Home screen with next shift + monthly calendar</div>
    </div>

    <!-- Day Detail -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons">
              <svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg>
            </div>
          </div>
          <div class="app-header">
            <h1>Sun, Mar 29</h1>
          </div>
          <div class="content">
            <div class="card" style="border-left: 3px solid var(--text-muted);">
              <div class="card-overline" style="color: var(--text-muted);">8:30 AM &middot; 1st Service</div>
              <div class="card-title">Early Service</div>
              <div style="margin-top: 8px;">
                <div class="list-item" style="padding: 8px 0; border: none;">
                  <div class="avatar avatar-green" style="width: 32px; height: 32px; font-size: 12px;">SM</div>
                  <div class="list-item-info">
                    <div class="list-item-name" style="font-size: 13px;">Sarah M.</div>
                  </div>
                  <span class="badge badge-muted">Solo</span>
                </div>
              </div>
            </div>

            <div class="card card-accent">
              <div class="card-overline">10:30 AM &middot; Main Service</div>
              <div class="card-title">Main Service</div>
              <div style="margin-top: 8px;">
                <div class="list-item" style="padding: 8px 0;">
                  <div class="avatar avatar-amber" style="width: 32px; height: 32px; font-size: 12px;">JW</div>
                  <div class="list-item-info">
                    <div class="list-item-name" style="font-size: 13px;">Jared W.</div>
                  </div>
                  <span class="badge badge-accent">Primary</span>
                </div>
                <div class="list-item" style="padding: 8px 0; border: none;">
                  <div class="avatar avatar-blue" style="width: 32px; height: 32px; font-size: 12px;">JM</div>
                  <div class="list-item-info">
                    <div class="list-item-name" style="font-size: 13px;">Josh M.</div>
                  </div>
                  <span class="badge badge-info">Secondary</span>
                </div>
              </div>
            </div>
            <p style="color: var(--text-muted); font-size: 12px; text-align: center; margin-top: 16px;">Tap a name to view profile or request swap</p>
          </div>
          <div class="bottom-nav">
            <div class="nav-item active">
              <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Schedule
            </div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h-2V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Day Detail</div>
      <div class="screen-sublabel">Tap a calendar day to see coverage</div>
    </div>

    <!-- Push Notification -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen" style="position: relative;">
          <div class="status-bar">
            <span class="time">Sat 8:00 PM</span>
            <div class="status-icons">
              <svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg>
            </div>
          </div>

          <!-- Push notification -->
          <div class="notif-toast">
            <div class="notif-icon" style="background: var(--accent-dim);">🛡️</div>
            <div class="notif-content">
              <div class="notif-app">ShieldSync</div>
              <div class="notif-text"><strong>Shift Reminder:</strong> You're on primary tomorrow at 10:30 AM (Main Service) with Josh M.</div>
            </div>
            <div class="notif-time">now</div>
          </div>

          <div class="app-header" style="margin-top: 48px;">
            <h1>Schedule</h1>
          </div>
          <div class="content">
            <div class="card card-accent">
              <div class="card-overline">Tomorrow</div>
              <div class="card-title">Sunday Main Service</div>
              <div style="margin-top: 6px;">
                <div class="card-detail"><strong>Mar 29</strong> &middot; 10:30 AM</div>
                <div class="card-detail" style="margin-top: 2px;">Role: <span class="badge badge-accent">Primary</span></div>
              </div>
            </div>
          </div>
          <div class="bottom-nav">
            <div class="nav-item active">
              <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
              Schedule
            </div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Push Notification</div>
      <div class="screen-sublabel">24-hour shift reminder</div>
    </div>
  </div>
</div>

<!-- ════════════════════ 03. TEAM ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">03</span> Team Roster</div>
  <p class="section-desc">View all team members, their abilities, and certification status.</p>
  <div class="screen-row">
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>
          <div class="app-header">
            <h1>Team</h1>
            <div class="header-actions">
              <div class="badge badge-muted" style="font-size: 12px;">6 members</div>
            </div>
          </div>
          <div class="content">
            <div class="list-item">
              <div class="avatar avatar-amber">JW</div>
              <div class="list-item-info">
                <div class="list-item-name">Jared W. <span style="font-size: 10px; color: var(--text-muted);">(you)</span></div>
                <div class="list-item-sub">
                  <span class="badge badge-accent" style="font-size: 9px;">Armed</span>
                  <span class="badge badge-success" style="font-size: 9px;">First Aid</span>
                </div>
              </div>
              <div class="list-item-action" style="font-size: 18px; color: var(--border);">&rsaquo;</div>
            </div>
            <div class="list-item">
              <div class="avatar avatar-blue">AM</div>
              <div class="list-item-info">
                <div class="list-item-name">Adam M.</div>
                <div class="list-item-sub">
                  <span class="badge badge-accent" style="font-size: 9px;">Armed</span>
                  <span class="badge badge-success" style="font-size: 9px;">First Aid</span>
                  <span class="badge badge-info" style="font-size: 9px;">LEO</span>
                </div>
              </div>
              <div class="list-item-action" style="font-size: 18px; color: var(--border);">&rsaquo;</div>
            </div>
            <div class="list-item">
              <div class="avatar avatar-green">JM</div>
              <div class="list-item-info">
                <div class="list-item-name">Josh M.</div>
                <div class="list-item-sub">
                  <span class="badge badge-accent" style="font-size: 9px;">Armed</span>
                </div>
              </div>
              <div class="list-item-action" style="font-size: 18px; color: var(--border);">&rsaquo;</div>
            </div>
            <div class="list-item">
              <div class="avatar avatar-red">SM</div>
              <div class="list-item-info">
                <div class="list-item-name">Sarah M.</div>
                <div class="list-item-sub">
                  <span class="badge badge-success" style="font-size: 9px;">First Aid</span>
                  <span class="badge badge-muted" style="font-size: 9px;">Greeter</span>
                </div>
              </div>
              <div class="list-item-action" style="font-size: 18px; color: var(--border);">&rsaquo;</div>
            </div>
            <div class="list-item">
              <div class="avatar avatar-blue">DP</div>
              <div class="list-item-info">
                <div class="list-item-name">David P.</div>
                <div class="list-item-sub">
                  <span class="badge badge-accent" style="font-size: 9px;">Armed</span>
                  <span class="badge badge-info" style="font-size: 9px;">Military</span>
                </div>
              </div>
              <div class="list-item-action" style="font-size: 18px; color: var(--border);">&rsaquo;</div>
            </div>
            <div class="list-item">
              <div class="avatar avatar-green">RK</div>
              <div class="list-item-info">
                <div class="list-item-name">Rachel K. <span class="badge badge-danger" style="font-size: 9px; margin-left: 4px;">CPR Expiring</span></div>
                <div class="list-item-sub">
                  <span class="badge badge-success" style="font-size: 9px;">First Aid</span>
                  <span class="badge badge-muted" style="font-size: 9px;">Greeter</span>
                </div>
              </div>
              <div class="list-item-action" style="font-size: 18px; color: var(--border);">&rsaquo;</div>
            </div>
          </div>
          <div class="bottom-nav">
            <div class="nav-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>Schedule</div>
            <div class="nav-item active"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Team Roster</div>
      <div class="screen-sublabel">Members with ability badges</div>
    </div>

    <!-- Member Detail -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:42</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>
          <div class="app-header">
            <h1>&larr; Profile</h1>
          </div>
          <div class="content">
            <div class="profile-header">
              <div class="avatar avatar-blue" style="width: 72px; height: 72px; font-size: 28px; margin: 0 auto 10px; border: 2px solid rgba(91,154,255,0.3);">AM</div>
              <div class="profile-name">Adam M.</div>
              <div class="profile-role">Member &middot; Since Jan 2024</div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Abilities</div>
              <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                <span class="badge badge-accent">Armed</span>
                <span class="badge badge-success">First Aid</span>
                <span class="badge badge-info">LEO (Retired)</span>
              </div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Certifications</div>
              <div class="cert-item">
                <div>
                  <div class="cert-name">Concealed Carry</div>
                  <div class="cert-expiry" style="color: var(--success);">Expires Dec 2027</div>
                </div>
                <span class="badge badge-success" style="font-size: 10px;">Valid</span>
              </div>
              <div class="cert-item">
                <div>
                  <div class="cert-name">CPR / AED</div>
                  <div class="cert-expiry" style="color: var(--success);">Expires Aug 2026</div>
                </div>
                <span class="badge badge-success" style="font-size: 10px;">Valid</span>
              </div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Upcoming Shifts</div>
              <div class="card" style="padding: 12px;">
                <div style="font-size: 13px;"><strong>Mar 29</strong> &middot; Early Service &middot; <span class="badge badge-muted" style="font-size: 10px;">Solo</span></div>
              </div>
              <div class="card" style="padding: 12px;">
                <div style="font-size: 13px;"><strong>Apr 12</strong> &middot; Main Service &middot; <span class="badge badge-accent" style="font-size: 10px;">Primary</span></div>
              </div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Blackout Dates</div>
              <div class="card" style="padding: 12px; border-left: 3px solid var(--danger);">
                <div style="font-size: 13px; color: var(--text-secondary);">Apr 5 – Apr 12 &middot; <span style="color: var(--text-muted);">Vacation</span></div>
              </div>
            </div>
          </div>
          <div class="bottom-nav">
            <div class="nav-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>Schedule</div>
            <div class="nav-item active"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Member Profile</div>
      <div class="screen-sublabel">Certs, abilities, shifts, blackout dates</div>
    </div>
  </div>
</div>

<!-- ════════════════════ 04. CHAT ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">04</span> Team Chat</div>
  <p class="section-desc">One team channel, bridged to Discord. Broadcasts pinned at top.</p>
  <div class="screen-row">
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">2:30 PM</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>
          <div class="app-header">
            <h1>Team Chat</h1>
            <div class="badge badge-muted" style="font-size: 11px;">4 online</div>
          </div>
          <div class="chat-messages" style="padding-top: 8px;">
            <!-- Broadcast -->
            <div class="msg msg-broadcast">
              <div class="msg-bubble">
                <div class="broadcast-tag">📢 Broadcast &middot; Pastor Mike</div>
                <div style="font-size: 14px;">Everyone will be carrying pepper spray starting next month. Training video: <span style="color: var(--info); text-decoration: underline;">watch here</span></div>
              </div>
              <div class="msg-time" style="margin-top: 4px;">Today 1:15 PM</div>
            </div>

            <div class="msg msg-other">
              <div class="msg-header">
                <span class="msg-author">Josh M.</span>
                <span class="msg-source">discord</span>
                <span class="msg-time">2:15 PM</span>
              </div>
              <div class="msg-bubble">Sounds good, do we need to buy our own?</div>
            </div>

            <div class="msg msg-other">
              <div class="msg-header">
                <span class="msg-author">Adam M.</span>
                <span class="msg-source">web</span>
                <span class="msg-time">2:18 PM</span>
              </div>
              <div class="msg-bubble">Church is providing them. Pastor said they ordered a case.</div>
            </div>

            <div class="msg msg-self">
              <div class="msg-header" style="justify-content: flex-end;">
                <span class="msg-time">2:22 PM</span>
              </div>
              <div class="msg-bubble">Nice. When's the training session?</div>
            </div>

            <div class="msg msg-other">
              <div class="msg-header">
                <span class="msg-author">Pastor Mike</span>
                <span class="msg-source">discord</span>
                <span class="msg-time">2:25 PM</span>
              </div>
              <div class="msg-bubble">Planning for April 5th after second service. I'll put it on the calendar.</div>
            </div>
          </div>
          <div class="chat-input-bar">
            <input class="chat-input" placeholder="Message the team...">
            <button class="chat-send">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0c0e12" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
            </button>
          </div>
          <div class="bottom-nav">
            <div class="nav-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>Schedule</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Team</div>
            <div class="nav-item active"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Team Chat</div>
      <div class="screen-sublabel">Broadcast + messages from web &amp; Discord</div>
    </div>

    <!-- AI Bot -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">2:35 PM</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>
          <div class="app-header">
            <h1 style="display: flex; align-items: center; gap: 8px;">
              <span style="width: 28px; height: 28px; background: var(--accent-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px;">🤖</span>
              AI Assistant
            </h1>
          </div>
          <div class="chat-messages" style="padding-top: 8px;">
            <div class="msg msg-self">
              <div class="msg-bubble">When am I on next?</div>
            </div>
            <div class="msg msg-other">
              <div class="ai-bubble">You're on <strong>primary</strong> this Sunday, March 29 at 10:30 AM for Main Service. Josh M. is your secondary.</div>
            </div>
            <div class="msg msg-self">
              <div class="msg-bubble">I need to swap with someone that day</div>
            </div>
            <div class="msg msg-other">
              <div class="ai-bubble">
                Checking availability for March 29...
                <br><br>
                <strong>Available members:</strong><br>
                • Adam M. — Armed, First Aid, LEO<br>
                • David P. — Armed, Military<br><br>
                Sarah is on early service that day. Want me to send a swap request to Adam or David?
              </div>
            </div>
            <div class="msg msg-self">
              <div class="msg-bubble">Send it to Adam</div>
            </div>
            <div class="msg msg-other">
              <div class="ai-bubble">
                Done!
                <div class="ai-action-card">
                  <div class="action-status" style="color: var(--success);">
                    <span>✓</span> Swap Request Sent
                  </div>
                  <div class="action-detail">
                    <strong>You</strong> ↔ <strong>Adam M.</strong><br>
                    Sunday, Mar 29 &middot; Main Service (Primary)<br>
                    Status: <span class="badge badge-accent" style="font-size: 10px;">Pending</span>
                  </div>
                </div>
                Adam will be notified. I'll let you know when he responds.
              </div>
            </div>
          </div>
          <div class="chat-input-bar">
            <input class="chat-input" placeholder="Ask anything...">
            <button class="chat-send">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0c0e12" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
            </button>
          </div>
          <div class="bottom-nav">
            <div class="nav-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>Schedule</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item active"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 2a2 2 0 012 2c0 .74-.4 1.39-1 1.73V7h-2V5.73c-.6-.34-1-.99-1-1.73a2 2 0 012-2z"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">AI Chatbot</div>
      <div class="screen-sublabel">Natural language → actions (swap request)</div>
    </div>

    <!-- AI Bot - Admin -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">7:15 PM</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>
          <div class="app-header">
            <h1 style="display: flex; align-items: center; gap: 8px;">
              <span style="width: 28px; height: 28px; background: var(--accent-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px;">🤖</span>
              AI Assistant
            </h1>
            <span class="badge badge-accent" style="font-size: 10px;">Admin</span>
          </div>
          <div class="chat-messages" style="padding-top: 8px;">
            <div class="msg msg-self">
              <div class="msg-bubble">Build the April schedule</div>
            </div>
            <div class="msg msg-other">
              <div class="ai-bubble">
                Building April schedule. Considering 6 team members, 4 Sundays, blackout dates, and fair rotation...
                <div class="schedule-draft">
                  <div style="font-weight: 600; font-size: 13px; margin-bottom: 8px;">📋 Draft Schedule — April 2026</div>
                  <div class="schedule-row">
                    <div class="schedule-date">Apr 5</div>
                    <div class="schedule-roles">
                      <div class="schedule-role"><span class="schedule-role-tag">P:</span> <strong>Josh M.</strong></div>
                      <div class="schedule-role"><span class="schedule-role-tag">S:</span> <strong>Sarah M.</strong></div>
                    </div>
                  </div>
                  <div class="schedule-row">
                    <div class="schedule-date">Apr 12</div>
                    <div class="schedule-roles">
                      <div class="schedule-role"><span class="schedule-role-tag">P:</span> <strong>David P.</strong></div>
                      <div class="schedule-role"><span class="schedule-role-tag">S:</span> <strong>Rachel K.</strong></div>
                    </div>
                  </div>
                  <div class="schedule-row">
                    <div class="schedule-date">Apr 19</div>
                    <div class="schedule-roles">
                      <div class="schedule-role"><span class="schedule-role-tag">P:</span> <strong>Jared W.</strong></div>
                      <div class="schedule-role"><span class="schedule-role-tag">S:</span> <strong>Adam M.</strong></div>
                    </div>
                  </div>
                  <div class="schedule-row">
                    <div class="schedule-date">Apr 26</div>
                    <div class="schedule-roles">
                      <div class="schedule-role"><span class="schedule-role-tag">P:</span> <strong>Adam M.</strong></div>
                      <div class="schedule-role"><span class="schedule-role-tag">S:</span> <strong>Josh M.</strong></div>
                    </div>
                  </div>
                </div>
                <div style="margin-top: 8px; font-size: 13px; color: var(--text-secondary);">
                  Adam is blacked out Apr 5–12 so he's scheduled later. Everyone gets 1–2 shifts. Want me to publish this or make changes?
                </div>
              </div>
            </div>
            <div class="msg msg-self">
              <div class="msg-bubble">Looks good, publish it</div>
            </div>
            <div class="msg msg-other">
              <div class="ai-bubble">
                <div class="ai-action-card">
                  <div class="action-status" style="color: var(--success);">✓ April Schedule Published</div>
                  <div class="action-detail">4 Sundays &middot; 6 members &middot; All notified</div>
                </div>
                Everyone's been notified of their April assignments.
              </div>
            </div>
          </div>
          <div class="chat-input-bar">
            <input class="chat-input" placeholder="Ask anything...">
            <button class="chat-send">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0c0e12" stroke-width="2.5"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
            </button>
          </div>
          <div class="bottom-nav">
            <div class="nav-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>Schedule</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item active"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">AI — Admin Schedule Builder</div>
      <div class="screen-sublabel">Auto-generate fair rotation, then publish</div>
    </div>
  </div>
</div>

<!-- ════════════════════ 05. PROFILE ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">05</span> Profile &amp; Settings</div>
  <p class="section-desc">Your certs, blackout dates, notification preferences, and Discord link.</p>
  <div class="screen-row">
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>
          <div class="app-header">
            <h1>Me</h1>
            <div class="header-actions">
              <div class="header-icon-btn">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
              </div>
            </div>
          </div>
          <div class="content">
            <div class="profile-header">
              <div class="profile-avatar">JW</div>
              <div class="profile-name">Jared W.</div>
              <div class="profile-role">Member &middot; Grace Bible Church — Austin</div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">My Certifications</div>
              <div class="cert-item">
                <div>
                  <div class="cert-name">Concealed Carry</div>
                  <div class="cert-expiry" style="color: var(--success);">Expires Mar 2028</div>
                </div>
                <span class="badge badge-success" style="font-size: 10px;">Valid</span>
              </div>
              <div class="cert-item">
                <div>
                  <div class="cert-name">CPR / AED</div>
                  <div class="cert-expiry" style="color: var(--accent);">Expires Jun 2026 (3 mo)</div>
                </div>
                <span class="badge badge-accent" style="font-size: 10px;">Renew Soon</span>
              </div>
              <div class="cert-item">
                <div>
                  <div class="cert-name">Pepper Spray Training</div>
                  <div class="cert-expiry" style="color: var(--text-muted);">Pending — Apr 5</div>
                </div>
                <span class="badge badge-muted" style="font-size: 10px;">Scheduled</span>
              </div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Blackout Dates</div>
              <div class="card" style="padding: 12px; border-left: 3px solid var(--danger); margin-bottom: 6px;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                  <div style="font-size: 13px;">May 10 – May 17 <span style="color: var(--text-muted);">&middot; Family trip</span></div>
                  <span style="color: var(--danger); font-size: 12px; cursor: pointer;">Remove</span>
                </div>
              </div>
              <button class="btn btn-outline btn-sm btn-full" style="margin-top: 8px;">+ Add Blackout Dates</button>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Notifications</div>
              <div class="card" style="padding: 12px 16px;">
                <div class="toggle-row">
                  <span class="toggle-label">Shift reminders</span>
                  <div class="toggle on"></div>
                </div>
                <div class="toggle-row">
                  <span class="toggle-label">Swap requests</span>
                  <div class="toggle on"></div>
                </div>
                <div class="toggle-row">
                  <span class="toggle-label">Broadcasts</span>
                  <div class="toggle on"></div>
                </div>
                <div class="toggle-row">
                  <span class="toggle-label">Cert expiry warnings</span>
                  <div class="toggle"></div>
                </div>
              </div>
            </div>

            <div class="profile-section">
              <div class="profile-section-title">Integrations</div>
              <div class="card" style="padding: 12px 16px; display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex; align-items: center; gap: 10px;">
                  <span style="font-size: 20px;">💬</span>
                  <div>
                    <div style="font-size: 13px; font-weight: 600;">Discord</div>
                    <div style="font-size: 11px; color: var(--text-muted);">Not connected</div>
                  </div>
                </div>
                <button class="btn btn-secondary btn-sm">Link</button>
              </div>
            </div>
          </div>
          <div class="bottom-nav">
            <div class="nav-item"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>Schedule</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item active"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Profile (Me)</div>
      <div class="screen-sublabel">Certs, blackout dates, notifications, Discord</div>
    </div>

    <!-- Swap Request Modal -->
    <div class="screen-container">
      <div class="phone">
        <div class="phone-screen" style="position: relative;">
          <div class="status-bar">
            <span class="time">9:41</span>
            <div class="status-icons"><svg viewBox="0 0 16 16"><path d="M1 12h2v2H1zm4-3h2v5H5zm4-3h2v8H9zm4-4h2v12h-2z"/></svg></div>
          </div>

          <!-- Dimmed background content -->
          <div style="opacity: 0.3; pointer-events: none;">
            <div class="app-header"><h1>Schedule</h1></div>
            <div class="content">
              <div class="card card-accent">
                <div class="card-overline">Your Next Shift</div>
                <div class="card-title">Sunday Main Service</div>
              </div>
            </div>
          </div>

          <!-- Modal -->
          <div class="modal-overlay">
            <div class="modal-sheet">
              <div class="modal-handle"></div>
              <div class="modal-title">Swap Request</div>

              <div class="card" style="margin-bottom: 16px; background: var(--bg-primary);">
                <div class="card-overline">Your Shift</div>
                <div style="font-size: 14px; font-weight: 600; margin-top: 4px;">Sunday, Mar 29 &middot; Main Service</div>
                <div style="font-size: 13px; color: var(--text-secondary);">10:30 AM &middot; Primary</div>
              </div>

              <div style="font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;">Available to swap:</div>

              <div class="list-item" style="padding: 10px 0;">
                <div class="avatar avatar-blue" style="width: 36px; height: 36px; font-size: 13px;">AM</div>
                <div class="list-item-info">
                  <div class="list-item-name" style="font-size: 13px;">Adam M.</div>
                  <div class="list-item-sub"><span class="badge badge-accent" style="font-size: 9px;">Armed</span><span class="badge badge-info" style="font-size: 9px;">LEO</span></div>
                </div>
                <button class="btn btn-primary btn-sm">Request</button>
              </div>
              <div class="list-item" style="padding: 10px 0;">
                <div class="avatar avatar-blue" style="width: 36px; height: 36px; font-size: 13px;">DP</div>
                <div class="list-item-info">
                  <div class="list-item-name" style="font-size: 13px;">David P.</div>
                  <div class="list-item-sub"><span class="badge badge-accent" style="font-size: 9px;">Armed</span><span class="badge badge-info" style="font-size: 9px;">Military</span></div>
                </div>
                <button class="btn btn-secondary btn-sm">Request</button>
              </div>
            </div>
          </div>

          <div class="bottom-nav">
            <div class="nav-item active"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/></svg>Schedule</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>Team</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>Chat</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>AI</div>
            <div class="nav-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>Me</div>
          </div>
        </div>
      </div>
      <div class="screen-label">Swap Request Sheet</div>
      <div class="screen-sublabel">Bottom sheet — pick who to swap with</div>
    </div>
  </div>
</div>

<!-- ════════════════════ 06. DISCORD ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">06</span> Discord Integration</div>
  <p class="section-desc">Same AI bot, same team chat — just through Discord. Messages bridge to the web app.</p>
  <div class="screen-row">
    <div style="display: flex; flex-direction: column; gap: 24px; max-width: 520px; width: 100%;">
      <!-- Discord: Team Chat -->
      <div>
        <div class="screen-label" style="margin-bottom: 10px;">Discord — Team Chat Bridge</div>
        <div class="discord-preview">
          <div class="discord-sidebar">
            <div style="font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; padding: 0 4px;">Grace Bible Security</div>
            <div class="discord-channel active">team-chat</div>
            <div class="discord-channel">announcements</div>
          </div>
          <div class="discord-main">
            <div class="discord-msg">
              <div class="discord-avatar" style="background: var(--accent-dim); color: var(--accent);">JW</div>
              <div class="discord-msg-content">
                <div class="discord-msg-author">Jared W. <span class="timestamp">Today at 2:22 PM</span></div>
                <div class="discord-msg-text">Nice. When's the training session?</div>
              </div>
            </div>
            <div class="discord-msg">
              <div class="discord-avatar" style="background: var(--success-dim); color: var(--success);">PM</div>
              <div class="discord-msg-content">
                <div class="discord-msg-author">Pastor Mike <span class="timestamp">Today at 2:25 PM</span></div>
                <div class="discord-msg-text">Planning for April 5th after second service. I'll put it on the calendar.</div>
              </div>
            </div>
            <div class="discord-input">Message #team-chat</div>
          </div>
        </div>
      </div>

      <!-- Discord: AI Bot DM -->
      <div>
        <div class="screen-label" style="margin-bottom: 10px;">Discord — AI Bot DM</div>
        <div class="discord-preview">
          <div class="discord-main">
            <div class="discord-msg">
              <div class="discord-avatar" style="background: var(--accent-dim); color: var(--accent);">JW</div>
              <div class="discord-msg-content">
                <div class="discord-msg-author">Jared W. <span class="timestamp">Today at 2:35 PM</span></div>
                <div class="discord-msg-text">I'm not available April 5-12, family vacation</div>
              </div>
            </div>
            <div class="discord-msg">
              <div class="discord-avatar" style="background: #5865f2;">🛡️</div>
              <div class="discord-msg-content">
                <div class="discord-msg-author">ShieldSync <span class="bot-tag">BOT</span> <span class="timestamp">Today at 2:35 PM</span></div>
                <div class="discord-msg-text">Got it! I've added a blackout for April 5–12 (family vacation).</div>
                <div class="discord-embed">
                  <div class="discord-embed-title">✓ Blackout Date Added</div>
                  <div class="discord-embed-field">
                    <strong>Dates:</strong> Apr 5 – Apr 12, 2026<br>
                    <strong>Reason:</strong> Family vacation<br>
                    <strong>Note:</strong> You have no shifts during this period.
                  </div>
                </div>
              </div>
            </div>
            <div class="discord-input">Message @ShieldSync</div>
          </div>
        </div>
      </div>

      <!-- Discord: Broadcast -->
      <div>
        <div class="screen-label" style="margin-bottom: 10px;">Discord — Broadcast (from admin)</div>
        <div class="discord-preview">
          <div class="discord-sidebar">
            <div style="font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 8px; padding: 0 4px;">Grace Bible Security</div>
            <div class="discord-channel">team-chat</div>
            <div class="discord-channel active">announcements</div>
          </div>
          <div class="discord-main">
            <div class="discord-msg">
              <div class="discord-avatar" style="background: #5865f2;">🛡️</div>
              <div class="discord-msg-content">
                <div class="discord-msg-author">ShieldSync <span class="bot-tag">BOT</span> <span class="timestamp">Today at 1:15 PM</span></div>
                <div class="discord-msg-text">📢 <strong>Team Broadcast from Pastor Mike</strong></div>
                <div class="discord-embed">
                  <div class="discord-embed-title">Pepper Spray Training</div>
                  <div class="discord-embed-field">
                    Everyone will be carrying pepper spray starting next month. Training video: <span style="color: #5b9aff;">watch here</span><br><br>
                    <em style="color: #949ba4;">Sent via ShieldSync</em>
                  </div>
                </div>
              </div>
            </div>
            <div class="discord-input">This channel is read-only</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ════════════════════ 07. FLOWS ════════════════════ -->
<hr class="section-divider">
<div class="section">
  <div class="section-title"><span class="num">07</span> User Flows</div>
  <p class="section-desc">Key workflows mapped step by step.</p>
  <div class="flow-container">

    <!-- Swap Request Flow -->
    <div class="flow-diagram">
      <div class="flow-title">🔄 Swap Request Flow</div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Member requests swap</h4><p>Via web app "Swap" button, AI bot, or Discord DM</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-blue"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>System checks availability</h4><p>Target member must be free (no blackout, no assignment)</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Target notified</h4><p>Push notification + Discord DM: "Jared wants to swap Mar 29"</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Target accepts or declines</h4><p>Via web app, AI bot, or Discord</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div></div>
        <div class="flow-content"><h4>Assignments auto-updated</h4><p>Both members notified. Calendar updated instantly.</p></div>
      </div>
    </div>

    <!-- Onboarding Flow -->
    <div class="flow-diagram">
      <div class="flow-title">👤 New Member Onboarding</div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Admin adds email to roster</h4><p>Or generates an invite link</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-blue"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>New member signs in with Google</h4><p>Email matched → auto-joined to org</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Complete profile</h4><p>Add abilities, certs, link Discord (optional)</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Enable notifications</h4><p>Web Push prompt + Discord link</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div></div>
        <div class="flow-content"><h4>Ready for scheduling</h4><p>Appears in schedule builder pool</p></div>
      </div>
    </div>

    <!-- Schedule Building Flow -->
    <div class="flow-diagram">
      <div class="flow-title">📅 Schedule Building (Admin)</div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Admin asks AI: "Build April schedule"</h4><p>Via web app AI tab or Discord DM</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-blue"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>AI considers constraints</h4><p>Blackout dates, abilities, fair rotation, min staffing</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Draft presented for review</h4><p>Admin can adjust before publishing</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Admin publishes</h4><p>"Looks good, publish it"</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div></div>
        <div class="flow-content"><h4>All members notified</h4><p>Push + Discord: "April schedule is live"</p></div>
      </div>
    </div>

    <!-- Broadcast Flow -->
    <div class="flow-diagram">
      <div class="flow-title">📢 Broadcast Flow</div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-amber"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Admin composes broadcast</h4><p>Web chat (broadcast mode) or Discord bot or AI: "Tell everyone..."</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-blue"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Stored in unified messages table</h4><p>Marked as broadcast, pinned in team chat</p></div>
      </div>
      <div class="flow-step">
        <div class="flow-connector"><div class="flow-dot flow-dot-green"></div><div class="flow-line"></div></div>
        <div class="flow-content"><h4>Delivered everywhere</h4><p>Web app chat (pinned) + Discord #announcements + Push to all</p></div>
      </div>
    </div>
  </div>
</div>

<!-- ════════════════════ FOOTER ════════════════════ -->
<div style="text-align: center; padding: 40px 24px 80px; color: var(--text-muted); font-size: 13px;">
  <div style="font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-secondary); margin-bottom: 4px;">ShieldSync — Draft Mockups v1</div>
  <div>March 2026 &middot; Share feedback with the team</div>
  <div style="margin-top: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);">
    MVP: Calendar &middot; Schedule &middot; Swaps &middot; Certs &middot; Chat &middot; AI Bot &middot; Discord &middot; Push Notifications
  </div>
</div>

</body>
</html>