Write

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DCS Playbook | Photography</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #500778;
            --secondary: #c4d600;
            --accent: #4b4f54;
            --bg: #F3F4F6;
            --card-bg: #FFFFFF;
            --text-main: #1F2937;
            --text-sub: #6B7280;
            --nav-height: 70px;
            --sidebar-width: 270px;
            --pre:  #0369a1;
            --prod: #7c3aed;
            --post: #d97706;
            --del:  #059669;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Inter', 'Segoe UI', sans-serif; background: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); }

        /* ── NAV ── */
        .main-nav { background: var(--primary); height: var(--nav-height); width: 100%; position: fixed; top: 0; left: 0; z-index: 1000; display: flex; align-items: center; border-bottom: 4px solid var(--secondary); box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
        .nav-container { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; }
        .nav-logo-link { display: flex; align-items: center; text-decoration: none; height: calc(var(--nav-height) - 15px); }
        .nav-logo-img { height: 100%; width: auto; }
        .nav-links { display: flex; gap: 8px; align-items: center; }
        .nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.78rem; font-weight: 700; padding: 7px 12px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; }
        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
        .nav-links a.active { background: var(--secondary); color: var(--primary); }
        .nav-playbook-label { color: var(--secondary); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 10px; border: 1px solid rgba(196,214,0,0.4); border-radius: 4px; margin-right: 8px; }

        /* ── LAYOUT ── */
        .app-shell { display: flex; min-height: calc(100vh - var(--nav-height)); }

        /* ── SIDEBAR ── */
        .sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); background: white; border-right: 1px solid #E5E7EB; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; display: flex; flex-direction: column; }
        .sidebar-header { padding: 20px 18px 14px; border-bottom: 1px solid #E5E7EB; }
        .sidebar-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-sub); margin-bottom: 2px; }
        .project-manager { margin: 16px 0 12px; display: grid; gap: 12px; }
        .project-manager select { width: 100%; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 12px; font-size: 0.95rem; color: var(--text-main); background: white; appearance: none; }
        .project-actions { display: flex; gap: 10px; flex-wrap: wrap; }
        .btn-small { border: none; border-radius: 999px; background: var(--primary); color: white; font-weight: 700; padding: 10px 14px; cursor: pointer; transition: background 0.2s; font-size: 0.78rem; }
        .btn-small:hover { background: #3b0465; }
        .btn-small.btn-danger { background: #DC2626; }
        .btn-small.btn-danger:hover { background: #b91c1c; }
        .sidebar-project-name { font-size: 1rem; font-weight: 800; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .progress-bar-wrap { margin-top: 10px; background: #E5E7EB; border-radius: 4px; height: 6px; overflow: hidden; }
        .progress-bar-fill { height: 100%; background: var(--secondary); border-radius: 4px; transition: width 0.4s; }
        .progress-label { font-size: 0.72rem; color: var(--text-sub); margin-top: 4px; }
        .phase-group { padding: 10px 0; border-bottom: 1px solid #F3F4F6; }
        .phase-label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 18px 4px; display: flex; align-items: center; gap: 6px; }
        .phase-label.pre  { color: var(--pre); }
        .phase-label.prod { color: var(--prod); }
        .phase-label.post { color: var(--post); }
        .phase-label.del  { color: var(--del); }
        .step-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 18px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; font-size: 0.82rem; color: var(--text-main); border-left: 3px solid transparent; transition: all 0.15s; }
        .step-btn:hover { background: #F9FAFB; }
        .step-btn.active { background: #FBF5FF; border-left-color: var(--primary); color: var(--primary); font-weight: 700; }
        .step-btn.done .step-check { background: var(--del); border-color: var(--del); }
        .step-btn.done .step-check::after { content: '✓'; }
        .step-check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D1D5DB; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: white; transition: all 0.2s; }
        .step-name { flex: 1; line-height: 1.3; }
        .step-btn.checkpoint { font-style: italic; }
        .sidebar-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid #E5E7EB; }
        .task-board-btn { width: 100%; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .task-board-btn:hover { background: #3d0560; }
        .task-board-note { margin-top: 10px; font-size: 0.82rem; color: var(--text-sub); line-height: 1.4; }

        /* ── MAIN ── */
        .main-content { flex: 1; padding: 36px 40px 60px; max-width: 860px; }
        .phase-badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
        .phase-badge.pre  { background: #E0F2FE; color: var(--pre); }
        .phase-badge.prod { background: #EDE9FE; color: var(--prod); }
        .phase-badge.post { background: #FEF3C7; color: #92400E; }
        .phase-badge.del  { background: #DCFCE7; color: var(--del); }
        .phase-badge.chk  { background: #FEF3C7; color: #92400E; }
        .step-section { display: none; }
        .step-section.active { display: block; }
        .step-title { font-size: 2rem; font-weight: 800; color: var(--primary); margin: 0 0 6px 0; line-height: 1.15; }
        .step-subtitle { font-size: 1rem; color: var(--text-sub); margin: 0 0 28px 0; line-height: 1.4; }

        /* ── CARDS ── */
        .card { background: white; border: 1px solid #E5E7EB; border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
        .card-title { font-size: 1rem; font-weight: 800; color: var(--primary); margin: 0 0 10px 0; }
        .card p { font-size: 0.9rem; line-height: 1.65; color: #374151; margin: 0 0 12px 0; }
        .card p:last-child { margin-bottom: 0; }
        .card ul { font-size: 0.9rem; line-height: 1.7; color: #374151; padding-left: 20px; margin: 8px 0 0 0; }
        .card ul li { margin-bottom: 6px; }

        /* ── CALLOUTS ── */
        .callout { border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; display: flex; gap: 14px; align-items: flex-start; font-size: 0.88rem; line-height: 1.5; }
        .callout-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }
        .callout-teal   { background: #E0F2FE; border: 1px solid #7DD3FC; color: #0C4A6E; }

        /* ── GLOSSARY / HOW-TO ── */
        .glossary-term { font-weight: 800; color: var(--primary); }
        .how-to-list { list-style: none; padding: 0; margin: 10px 0 0 0; counter-reset: how-to; }
        .how-to-list li { counter-increment: how-to; display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.9rem; line-height: 1.5; color: #374151; }
        .how-to-list li:last-child { border-bottom: none; }
        .how-to-list li::before { content: counter(how-to); background: var(--prod); color: white; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; flex-shrink: 0; margin-top: 1px; }

        /* ── QUESTION LIST ── */
        .question-list { list-style: none; padding: 0; margin: 10px 0 0 0; }
        .question-list li { padding: 9px 12px 9px 36px; position: relative; font-size: 0.88rem; line-height: 1.5; color: #374151; border-bottom: 1px solid #F3F4F6; }
        .question-list li:last-child { border-bottom: none; }
        .question-list li::before { content: '?'; position: absolute; left: 10px; top: 9px; width: 18px; height: 18px; background: var(--secondary); color: var(--primary); border-radius: 50%; font-size: 0.65rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }

        /* ── CHECKLIST ── */
        .checklist { list-style: none; padding: 0; margin: 0; }
        .checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F3F4F6; font-size: 0.88rem; line-height: 1.4; color: #374151; }
        .checklist li:last-child { border-bottom: none; }
        .checklist input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
        .checklist label { cursor: pointer; flex: 1; }
        .checklist li:has(input:checked) label { color: #9CA3AF; text-decoration: line-through; }

        /* ── SHOT TYPE GRID ── */
        .shot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
        .shot-card { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 10px; padding: 14px; border-top: 3px solid var(--prod); }
        .shot-name { font-size: 0.82rem; font-weight: 800; color: var(--primary); margin-bottom: 5px; }
        .shot-card p { font-size: 0.82rem; margin: 0; color: #374151; line-height: 1.4; }
        @media (max-width: 700px) { .shot-grid { grid-template-columns: 1fr 1fr; } }

        /* ── FORM ── */
        .field-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-sub); margin-bottom: 5px; }
        .field-input { width: 100%; padding: 10px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.88rem; color: var(--text-main); background: white; transition: border-color 0.2s; outline: none; margin-bottom: 14px; }
        .field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(80,7,120,0.08); }
        textarea.field-input { resize: vertical; min-height: 72px; }
        select.field-input { cursor: pointer; }

        /* ── ARTIFACT ZONE ── */
        .artifact-zone { background: #F9FAFB; border: 2px dashed #D1D5DB; border-radius: 10px; padding: 18px 20px; margin-top: 24px; }
        .artifact-zone-title { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-sub); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .artifact-row { display: flex; gap: 8px; margin-bottom: 10px; }
        .artifact-link-input { flex: 1; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.82rem; outline: none; transition: border-color 0.2s; }
        .artifact-link-input:focus { border-color: var(--primary); }
        .artifact-note-input { width: 100%; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.82rem; resize: vertical; min-height: 56px; outline: none; transition: border-color 0.2s; margin-bottom: 10px; }
        .artifact-note-input:focus { border-color: var(--primary); }
        .btn-save-artifact { padding: 9px 16px; background: var(--accent); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
        .btn-save-artifact:hover { background: #333; }
        .btn-send-portfolio { padding: 9px 16px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }
        .btn-send-portfolio:hover { background: #3d0560; }
        .artifact-saved-msg { font-size: 0.78rem; color: var(--del); font-weight: 700; display: none; margin-top: 6px; }

        /* ── CHECKPOINT ── */
        .checkpoint-card { background: white; border: 2px solid #FDE68A; border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; }
        .checkpoint-mentor { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
        .mentor-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--secondary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
        .mentor-name { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
        .mentor-role { font-size: 0.82rem; color: var(--text-sub); margin-top: 1px; }
        .checkpoint-questions { background: #FFFBEB; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
        .checkpoint-questions h4 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #92400E; margin: 0 0 10px 0; }
        .checkpoint-q-list { list-style: none; padding: 0; margin: 0; }
        .checkpoint-q-list li { padding: 6px 0 6px 22px; position: relative; font-size: 0.88rem; color: #78350F; line-height: 1.4; border-bottom: 1px solid rgba(253,230,138,0.5); }
        .checkpoint-q-list li:last-child { border-bottom: none; }
        .checkpoint-q-list li::before { content: '→'; position: absolute; left: 0; color: #D97706; font-weight: 700; }

        /* ── CLIENT REVIEW ── */
        .client-review-card { background: white; border: 2px solid #BFDBFE; border-radius: 14px; padding: 26px 28px; margin-bottom: 20px; }
        .client-review-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
        .client-avatar { width: 52px; height: 52px; border-radius: 50%; background: #BFDBFE; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
        .client-title { font-size: 1.1rem; font-weight: 800; color: #1E3A5F; }
        .client-subtitle { font-size: 0.82rem; color: var(--text-sub); margin-top: 1px; }
        .client-guidance { background: #EFF6FF; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
        .client-guidance h4 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #1E3A5F; margin: 0 0 10px 0; }
        .client-q-list { list-style: none; padding: 0; margin: 0; }
        .client-q-list li { padding: 6px 0 6px 22px; position: relative; font-size: 0.88rem; color: #1E3A5F; line-height: 1.4; border-bottom: 1px solid rgba(191,219,254,0.5); }
        .client-q-list li:last-child { border-bottom: none; }
        .client-q-list li::before { content: '→'; position: absolute; left: 0; color: #3B82F6; font-weight: 700; }

        /* ── NAV BUTTONS ── */
        .step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid #E5E7EB; }
        .btn-prev { padding: 11px 22px; background: white; border: 2px solid #E5E7EB; border-radius: 8px; font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; color: var(--accent); transition: all 0.2s; }
        .btn-prev:hover { border-color: var(--primary); color: var(--primary); }
        .btn-next { padding: 12px 28px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; transition: background 0.2s; }
        .btn-next:hover { background: #3d0560; }

        /* ── TASK BOARD MODAL ── */
        .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; display: none; align-items: flex-start; justify-content: flex-end; padding: 80px 20px 20px; }
        .modal-overlay.open { display: flex; }
        .task-modal { background: white; border-radius: 16px; width: 680px; max-height: calc(100vh - 100px); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
        .task-modal-header { padding: 20px 24px 16px; border-bottom: 1px solid #E5E7EB; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: white; z-index: 1; }
        .task-modal-header h2 { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin: 0; }
        .modal-close { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--text-sub); padding: 4px; border-radius: 4px; transition: background 0.2s; }
        .modal-close:hover { background: #F3F4F6; }
        .task-add-row { padding: 14px 24px; display: flex; gap: 8px; border-bottom: 1px solid #E5E7EB; }
        .task-add-input { flex: 1; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 8px; font-family: inherit; font-size: 0.85rem; outline: none; }
        .task-add-input:focus { border-color: var(--primary); }
        .btn-add-task { padding: 9px 16px; background: var(--secondary); color: var(--primary); border: none; border-radius: 8px; font-family: inherit; font-weight: 800; font-size: 0.82rem; cursor: pointer; }
        .btn-add-task:hover { background: #b5c500; }
        .task-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 16px 24px; }
        .task-col { padding: 0 8px; }
        .task-col:first-child { padding-left: 0; }
        .task-col:last-child { padding-right: 0; }
        .task-col-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-sub); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid #E5E7EB; }
        .task-col-title.col-todo { border-color: #D1D5DB; }
        .task-col-title.col-prog { border-color: var(--prod); color: var(--prod); }
        .task-col-title.col-done { border-color: var(--del); color: var(--del); }
        .task-item { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 0.83rem; line-height: 1.4; color: #374151; }
        .task-item.status-done { opacity: 0.6; text-decoration: line-through; }
        .task-item-actions { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
        .task-move-btn { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; border: none; cursor: pointer; font-family: inherit; }
        .task-move-btn.to-todo { background: #E5E7EB; color: #374151; }
        .task-move-btn.to-prog { background: #EDE9FE; color: #5B21B6; }
        .task-move-btn.to-done { background: #DCFCE7; color: #166534; }
        .task-move-btn.del { background: #FEE2E2; color: #DC2626; margin-left: auto; }

        /* ── PORTFOLIO MODAL ── */
        .portfolio-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 3000; display: none; align-items: center; justify-content: center; }
        .portfolio-modal-overlay.open { display: flex; }
        .portfolio-modal { background: white; border-radius: 16px; width: 420px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .portfolio-modal h3 { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; }
        .portfolio-modal p { font-size: 0.85rem; color: var(--text-sub); margin: 0 0 20px 0; }
        .std-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid #E5E7EB; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.15s; font-size: 0.88rem; }
        .std-option:hover { border-color: var(--primary); background: #FBF5FF; }
        .std-option.selected { border-color: var(--primary); background: #F5F3FF; }
        .std-option input[type="radio"] { accent-color: var(--primary); }
        .pm-btns { display: flex; gap: 10px; margin-top: 20px; }
        .pm-cancel { flex: 1; padding: 10px; background: white; border: 2px solid #E5E7EB; border-radius: 8px; font-family: inherit; font-weight: 700; cursor: pointer; color: var(--accent); }
        .pm-confirm { flex: 2; padding: 10px; background: var(--primary); color: white; border: none; border-radius: 8px; font-family: inherit; font-weight: 700; cursor: pointer; }
        .pm-confirm:hover { background: #3d0560; }

        /* ── TOAST ── */
        .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--primary); color: white; padding: 12px 24px; border-radius: 30px; font-size: 0.85rem; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,0.2); z-index: 5000; transition: transform 0.3s ease; white-space: nowrap; }
        .toast.show { transform: translateX(-50%) translateY(0); }

        strong { color: var(--text-main); }
        .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
        .tag { background: #F3F4F6; border-radius: 6px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
        .tag.tip { background: #DCFCE7; color: #166534; }
        .tag.warning { background: #FEF3C7; color: #92400E; }
        .tag.gear { background: #EDE9FE; color: var(--prod); }
    </style>
</head>
<body>

<nav class="main-nav">
    <div class="nav-container">
        <a href="APEX_Professional_Dashboard.html" class="nav-logo-link">
            <img src="APEX Vertical.png" alt="Waukee APEX Logo" class="nav-logo-img">
        </a>
        <div class="nav-links">
            <span class="nav-playbook-label">📷 DCS Playbook</span>
            <a href="APEX_Professional_Dashboard.html">Dashboard</a>
            <a href="APEX_Professional_Portfolio.html">Portfolio</a>
            <a href="Photography Playbook.html" class="active">Photography</a>
        </div>
    </div>
</nav>

<div class="app-shell">

    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="sidebar-title">Photography</div>
            <div class="sidebar-project-name" id="sidebar-project-label">New Project</div>
            <div class="project-manager">
                <select id="project-select" onchange="switchProject(this.value)"></select>
                <div class="project-actions">
                    <button type="button" class="btn-small" onclick="newProject()">+ New</button>
                    <button type="button" class="btn-small" onclick="duplicateProject()">Duplicate</button>
                    <button type="button" class="btn-small" onclick="renameProject()">Rename</button>
                    <button type="button" class="btn-small btn-danger" onclick="deleteProject()">Delete</button>
                </div>
            </div>
            <div class="progress-bar-wrap">
                <div class="progress-bar-fill" id="progress-fill" style="width:0%"></div>
            </div>
            <div class="progress-label" id="progress-label">0 of 16 steps complete</div>
        </div>

        <div class="phase-group">
            <div class="phase-label pre">◆ Phase 0: Orientation</div>
            <button class="step-btn active" id="nav-orientation" onclick="goTo('orientation')">
                <div class="step-check" id="chk-orientation"></div>
                <span class="step-name">📷 Before You Start</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label pre">◆ Phase 1: Pre-Production</div>
            <button class="step-btn" id="nav-setup" onclick="goTo('setup')">
                <div class="step-check" id="chk-setup"></div>
                <span class="step-name">📌 Project Setup</span>
            </button>
            <button class="step-btn" id="nav-discovery" onclick="goTo('discovery')">
                <div class="step-check" id="chk-discovery"></div>
                <span class="step-name">🔎 Client Discovery</span>
            </button>
            <button class="step-btn" id="nav-brief" onclick="goTo('brief')">
                <div class="step-check" id="chk-brief"></div>
                <span class="step-name">📋 Shot List & Brief</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp1a" onclick="goTo('cp1a')">
                <div class="step-check" id="chk-cp1a"></div>
                <span class="step-name">✅ Checkpoint: Brief Approved</span>
            </button>
            <button class="step-btn" id="nav-location" onclick="goTo('location')">
                <div class="step-check" id="chk-location"></div>
                <span class="step-name">📍 Location & Logistics</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp1" onclick="goTo('cp1')">
                <div class="step-check" id="chk-cp1"></div>
                <span class="step-name">✅ Checkpoint: Pre-Shoot</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label prod">◆ Phase 2: The Shoot</div>
            <button class="step-btn" id="nav-fundamentals" onclick="goTo('fundamentals')">
                <div class="step-check" id="chk-fundamentals"></div>
                <span class="step-name">📸 Camera Fundamentals</span>
            </button>
            <button class="step-btn" id="nav-shoot" onclick="goTo('shoot')">
                <div class="step-check" id="chk-shoot"></div>
                <span class="step-name">⚡ The Shoot</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp2" onclick="goTo('cp2')">
                <div class="step-check" id="chk-cp2"></div>
                <span class="step-name">✅ Checkpoint: Post-Shoot</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label post">◆ Phase 3: Post-Production</div>
            <button class="step-btn" id="nav-cull" onclick="goTo('cull')">
                <div class="step-check" id="chk-cull"></div>
                <span class="step-name">🗂 Culling</span>
            </button>
            <button class="step-btn" id="nav-edit" onclick="goTo('edit')">
                <div class="step-check" id="chk-edit"></div>
                <span class="step-name">✂ Editing</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp3a" onclick="goTo('cp3a')">
                <div class="step-check" id="chk-cp3a"></div>
                <span class="step-name">✅ Client Preview</span>
            </button>
        </div>

        <div class="phase-group">
            <div class="phase-label del">◆ Phase 4: Delivery</div>
            <button class="step-btn" id="nav-export" onclick="goTo('export')">
                <div class="step-check" id="chk-export"></div>
                <span class="step-name">📦 Export & Delivery</span>
            </button>
            <button class="step-btn checkpoint" id="nav-cp3" onclick="goTo('cp3')">
                <div class="step-check" id="chk-cp3"></div>
                <span class="step-name">✅ Checkpoint: Reflection</span>
            </button>
        </div>

        <div class="sidebar-footer">
            <button class="task-board-btn" onclick="openTaskBoard()">📋 Project Task Board</button>
            <div class="task-board-note">Track shoot logistics, editing tasks, and client deliverables locally in this playbook.</div>
        </div>
    </aside>

    <main class="main-content">

        <!-- ══ ORIENTATION ══ -->
        <div class="step-section active" id="step-orientation">
            <div class="phase-badge pre">◆ Phase 0 · Orientation</div>
            <h1 class="step-title">Before You Start</h1>
            <p class="step-subtitle">Professional photography is a client service — not a personal creative practice. Read this before your first meeting so you understand the vocabulary, the gear, and what a finished project actually looks like.</p>

            <div class="callout callout-blue">
                <span class="callout-icon">📷</span>
                <div><strong>What professional photography actually means.</strong> You're not shooting for your portfolio. You're solving a visual communication problem for a client — capturing the images they need for a specific purpose, audience, and deadline. That means understanding their goals before you touch a camera, communicating clearly about what you'll deliver, and producing consistent, usable images — not just a few impressive ones surrounded by blurry throwaways.</div>
            </div>

            <div class="card">
                <div class="card-title">📖 Key Terms You Need to Know</div>
                <p><span class="glossary-term">Exposure Triangle</span> — The relationship between the three settings that control how much light reaches the sensor: aperture, shutter speed, and ISO. Every exposure decision is a trade-off between these three.</p>
                <p><span class="glossary-term">Aperture (f-stop)</span> — Controls how wide the lens opening is. Lower f-number (f/1.8) = wider opening, more light, blurrier background. Higher f-number (f/11) = narrower opening, less light, sharper background. For portraits: low f-stop. For group shots or environments: higher f-stop.</p>
                <p><span class="glossary-term">Shutter Speed</span> — How long the sensor is exposed to light. Fast shutter (1/500s) freezes motion. Slow shutter (1/30s) blurs motion and needs a tripod. For events with movement, stay at 1/200s or faster.</p>
                <p><span class="glossary-term">ISO</span> — The sensor's sensitivity to light. Low ISO (100–400) = clean image. High ISO (3200+) = brighter image but with visible grain/noise. Raise ISO only when you can't get enough light another way.</p>
                <p><span class="glossary-term">White Balance</span> — How the camera interprets color temperature. Incorrect white balance makes skin look orange, yellow, or blue. Set it manually indoors where lighting is consistent.</p>
                <p><span class="glossary-term">RAW vs. JPEG</span> — RAW captures all sensor data and gives you maximum editing flexibility in post. JPEG is compressed and baked-in — smaller files, less editing latitude. Always shoot RAW for client work if your camera supports it.</p>
                <p><span class="glossary-term">Depth of Field</span> — How much of the image is in focus front-to-back. Shallow depth of field (low f-stop) isolates a subject with a blurry background. Deep depth of field (high f-stop) keeps everything sharp.</p>
                <p><span class="glossary-term">Golden Hour</span> — The hour after sunrise and before sunset. Light is warm, soft, and directional — flattering for almost any subject. If the client has flexibility on timing, shoot outdoors during golden hour.</p>
                <p><span class="glossary-term">Culling</span> — The process of reviewing all raw images from a shoot and selecting the best ones to edit and deliver. Most photographers deliver 10–20% of total frames shot.</p>
                <p><span class="glossary-term">Color Grading</span> — Adjusting color, contrast, tone, and style in post-production to create a consistent look across a set of images. A consistent grade is what makes a photo series look professional.</p>
                <p><span class="glossary-term">Deliverable Formats</span> — JPEG for most client uses (web, print, social). PNG for images needing transparency. TIFF for high-resolution print. Confirm what the client needs before you export anything.</p>
            </div>

            <div class="card">
                <div class="card-title">🛠 Gear Overview</div>
                <p><span class="glossary-term">Camera Body</span> — DSLR or mirrorless. The body matters less than the lens in most situations. Know the controls before you show up to shoot — fumbling with menu settings during a client event is unprofessional.</p>
                <p><span class="glossary-term">Lenses</span> — Focal length determines field of view. Wide angle (16–35mm) captures environments and groups. Standard (35–85mm) is close to natural human vision — good for events and documentary. Telephoto (85–200mm) compresses depth and is flattering for portraits. A 50mm f/1.8 is the most versatile starting lens.</p>
                <p><span class="glossary-term">Memory Cards</span> — Use fast cards (UHS-II or V30+ rated) and always bring a backup. Losing photos because a card failed is unacceptable in a professional context. Format cards in the camera, not on a computer, before each shoot.</p>
                <p><span class="glossary-term">Batteries</span> — Always bring at least one fully charged spare. Long events drain batteries faster than expected.</p>
                <p><span class="glossary-term">Lighting (Speedlite / Flash)</span> — On-camera flash is harsh and unflattering. A bounce flash angled at a ceiling or wall diffuses light dramatically. For controlled environments, an off-camera flash with a softbox produces the best results.</p>
                <p><span class="glossary-term">Editing Software</span> — Adobe Lightroom is the industry standard for photo culling, editing, and export. Lightroom Classic (desktop) is best for batch editing large shoots. Capture One is a professional alternative with stronger color tools.</p>
            </div>

            <div class="card">
                <div class="card-title">📁 Two Types of Client Photography Projects</div>
                <p><strong>Event Coverage</strong> — You attend and document an event as it unfolds. Includes performances, career fairs, galas, sports, ceremonies. Requires fast adaptability, long lenses, and comfort shooting in challenging light. The shot list guides priorities, but you must also capture unscripted moments.</p>
                <p><strong>Custom Stock / Business Photography</strong> — A planned session producing specific images for a business's ongoing use: website photos, social media content, product images, headshots, or "day-in-the-life" brand photos. More controlled than events, but requires more pre-production — precise shot list, location scouting, styling coordination, and often multiple set changes.</p>
            </div>

            <div class="callout callout-green">
                <span class="callout-icon">✅</span>
                <div><strong>What a finished project looks like.</strong> A complete photography deliverable includes: a curated, edited set of images in the agreed formats, delivered via Google Drive or a gallery link, within the agreed timeline. The strongest portfolio entries also include the shot list, a brief note on the approach and any challenges, and the client's written confirmation of acceptance. Process documentation + final output is always stronger than final output alone.</div>
            </div>

            <div class="step-nav">
                <div></div>
                <button class="btn-next" onclick="markCompleteAndNext('orientation','setup')">I'm Ready — Start the Project →</button>
            </div>
        </div>

        <!-- ══ SETUP ══ -->
        <div class="step-section" id="step-setup">
            <div class="phase-badge pre">◆ Phase 1 · Pre-Production</div>
            <h1 class="step-title">Project Setup</h1>
            <p class="step-subtitle">Name the project and define the basics. Knowing the project type shapes every question you'll ask the client.</p>

            <div class="card">
                <div class="card-title">📋 Your Project Info</div>
                <div class="field-label">Project Name</div>
                <input class="field-input" id="proj-name" type="text" placeholder="e.g., Waukee Theatre Spring Gala Coverage 2026" oninput="saveState(); updateSidebarLabel();">
                <div class="field-label">Client / Organization</div>
                <input class="field-input" id="proj-client" type="text" placeholder="e.g., Waukee Community Theatre, Waukee APEX" oninput="saveState();">
                <div class="field-label">Project Type</div>
                <select class="field-input" id="proj-type" onchange="saveState();">
                    <option value="">— Select one —</option>
                    <option value="event">Event Coverage</option>
                    <option value="stock">Custom Stock / Brand Photography</option>
                    <option value="headshots">Headshots / Portraits</option>
                    <option value="product">Product Photography</option>
                    <option value="other">Other</option>
                </select>
                <div class="field-label">Shoot Date</div>
                <input class="field-input" id="proj-shoot-date" type="date" oninput="saveState();">
                <div class="field-label">Final Delivery Deadline</div>
                <input class="field-input" id="proj-deadline" type="date" oninput="saveState();">
                <div class="field-label">Your Role on This Project</div>
                <input class="field-input" id="proj-role" type="text" placeholder="e.g., Lead Photographer, Second Shooter, Photo Editor" oninput="saveState();">
            </div>

            <div class="callout callout-teal">
                <span class="callout-icon">💡</span>
                <div><strong>Add this to your Task Board.</strong> Open the Task Board (sidebar button) and start logging tasks now: "Schedule discovery meeting," "Scout location," "Format memory cards." Tracking before the shoot starts means nothing falls through on the day.</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('orientation')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('setup','discovery')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ DISCOVERY ══ -->
        <div class="step-section" id="step-discovery">
            <div class="phase-badge pre">◆ Phase 1 · Pre-Production</div>
            <h1 class="step-title">Client Discovery</h1>
            <p class="step-subtitle">The discovery meeting determines what you capture and how you deliver it. Get the wrong information here and you'll spend the shoot chasing the wrong shots.</p>

            <div class="callout callout-yellow">
                <span class="callout-icon">⚠</span>
                <div><strong>Don't skip the prep.</strong> Review these questions before your discovery meeting. A prepared photographer signals professionalism. An unprepared one signals that the client's project is just another gig to you.</div>
            </div>

            <div class="card">
                <div class="card-title">🔍 Questions to Ask Every Client</div>
                <ul class="question-list">
                    <li>What is the <strong>purpose</strong> of these photos — website, social media, print materials, internal use, event documentation, or all of the above?</li>
                    <li>Who is the <strong>audience</strong>? This shapes everything: formality of poses, variety of subjects, diversity of coverage.</li>
                    <li>Are there <strong>must-have shots</strong> that are non-negotiable? Get a specific list — not "general coverage."</li>
                    <li>Are there specific <strong>people or moments</strong> that must be captured? (Key speakers, award recipients, VIP guests, specific products.)</li>
                    <li>What is the <strong>desired style</strong> — photojournalistic and candid, posed and formal, editorial and artistic? Ask them to show you examples they love.</li>
                    <li>What are the exact <strong>deliverables</strong> — how many edited images, what formats, what resolution?</li>
                    <li>What is the <strong>turnaround time</strong> — when do they need a preview set, and when is final delivery?</li>
                    <li>Are there <strong>brand guidelines</strong> — colors, logo placement, specific framing or look that must match existing materials?</li>
                    <li>Are there <strong>restrictions</strong> — areas off-limits, people who shouldn't be photographed, logos or signage to avoid?</li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">📅 Additional Questions for Event Coverage</div>
                <ul class="question-list">
                    <li>What is the full schedule — when does setup begin, when do guests arrive, when are the key moments?</li>
                    <li>Is there a program or run-of-show document you can share in advance?</li>
                    <li>What is the venue? Is there a dark stage with spotlights, harsh overhead fluorescents, or natural light? (This dictates your gear choices.)</li>
                    <li>Will there be other photographers or videographers? What's the protocol for shared coverage?</li>
                    <li>Who is the point-of-contact during the event if something needs clarifying?</li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">🏢 Additional Questions for Custom Stock / Brand Photography</div>
                <ul class="question-list">
                    <li>What specific scenarios or locations need to be captured? (People at desks, exterior of building, product in use, team collaboration, etc.)</li>
                    <li>Are talent/subjects already identified, or do you need to coordinate that?</li>
                    <li>What wardrobe or styling is expected? Is business casual standard, or does the client want specific colors?</li>
                    <li>How many set changes or locations are planned?</li>
                    <li>What aspect ratios does the client need — horizontal for website headers, vertical for social posts, square for profile images?</li>
                </ul>
            </div>

            <div class="callout callout-green">
                <span class="callout-icon">📧</span>
                <div><strong>After every client meeting:</strong> Send a follow-up email within 24 hours summarizing decisions, must-have shots, and next steps. This protects you and demonstrates Standard 1 professionalism. Clients forget what they said in meetings — the email is the record.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1: Client Relationships</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-discovery-link" placeholder="Link to discovery notes or follow-up email..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-discovery-note" placeholder="What are the must-have shots? What surprised you about what the client wants?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('discovery')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('discovery','Client Discovery Notes','S1')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-discovery-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('setup')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('discovery','brief')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ BRIEF / SHOT LIST ══ -->
        <div class="step-section" id="step-brief">
            <div class="phase-badge pre">◆ Phase 1 · Pre-Production</div>
            <h1 class="step-title">Shot List & Brief</h1>
            <p class="step-subtitle">The shot list is your contract with the client and your guide during the shoot. A strong shot list means you never wonder what to capture next.</p>

            <div class="callout callout-blue">
                <span class="callout-icon">📋</span>
                <div><strong>Build the shot list in a Google Doc and share it with the client before the shoot.</strong> Ask for written confirmation that it's complete. This document is your authority on what was agreed. When a client later says "I thought we were getting photos of the loading dock" — you have the approved list to reference.</div>
            </div>

            <div class="card">
                <div class="card-title">📸 Shot List Structure</div>
                <p>A good shot list is specific, prioritized, and realistic for the time available. Organize it by priority:</p>
                <ul>
                    <li><strong>Priority 1 — Must Have:</strong> Non-negotiable. If you don't get these, the project fails. These come first in the shoot plan.</li>
                    <li><strong>Priority 2 — Should Have:</strong> Important but not critical. Capture these if time and conditions allow.</li>
                    <li><strong>Priority 3 — Nice to Have:</strong> Creative or supplemental shots. Only if everything above is covered.</li>
                </ul>
                <p style="margin-top:12px;">Each shot entry should include: subject, context/location, orientation (horizontal/vertical/both), and any specific notes (e.g., "must include logo visible," "natural light only," "candid not posed").</p>
            </div>

            <div class="card">
                <div class="card-title">📐 Shot Types Reference</div>
                <div class="shot-grid">
                    <div class="shot-card">
                        <div class="shot-name">Wide / Establishing</div>
                        <p>Shows the full scene or venue. Sets context. Every event needs at least 3–5 good establishing shots.</p>
                    </div>
                    <div class="shot-card">
                        <div class="shot-name">Medium</div>
                        <p>Waist-up or environment with subject. The most versatile shot for editorial and social use.</p>
                    </div>
                    <div class="shot-card">
                        <div class="shot-name">Close-Up / Detail</div>
                        <p>Hands, faces, objects, signage. Creates emotional connection and visual variety in a gallery.</p>
                    </div>
                    <div class="shot-card">
                        <div class="shot-name">Candid / Unposed</div>
                        <p>Natural moments — laughter, conversation, concentration. Often the most valuable shots for storytelling.</p>
                    </div>
                    <div class="shot-card">
                        <div class="shot-name">Portrait / Posed</div>
                        <p>Direct-to-camera, intentional framing. Used for headshots, speaker profiles, award recipients.</p>
                    </div>
                    <div class="shot-card">
                        <div class="shot-name">Action / In-Progress</div>
                        <p>Subject doing the work — presenting, building, performing. Shows capability and energy.</p>
                    </div>
                </div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1: Client Relationships</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-brief-link" placeholder="Link to shot list / project brief (Google Doc)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-brief-note" placeholder="How many must-have shots? Any unusual constraints or special requests?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('brief')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('brief','Shot List & Brief','S1')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-brief-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('discovery')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('brief','cp1a')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 1A ══ -->
        <div class="step-section" id="step-cp1a">
            <div class="phase-badge chk">✅ Phase 1 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Brief Approved</h1>
            <p class="step-subtitle">Before scouting the location or preparing gear, confirm the shot list and brief are approved by both the client and Russ.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Review before scouting or gear prep</h4>
                    <ul class="checkpoint-q-list">
                        <li>Is the shot list specific enough — subjects, contexts, orientations, priorities?</li>
                        <li>Is the number of must-have shots realistic for the time available?</li>
                        <li>Has the client confirmed the shot list and brief in writing?</li>
                        <li>Are the deliverable format, count, and turnaround time agreed and documented?</li>
                    </ul>
                </div>
                <div class="field-label">Your Checkpoint Notes</div>
                <textarea class="field-input" id="cp1a-notes" placeholder="What did Russ say? What did you refine in the shot list?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('brief')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1a','location')">Checkpoint Complete — Location Scout →</button>
            </div>
        </div>

        <!-- ══ LOCATION / LOGISTICS ══ -->
        <div class="step-section" id="step-location">
            <div class="phase-badge pre">◆ Phase 1 · Pre-Production</div>
            <h1 class="step-title">Location & Logistics</h1>
            <p class="step-subtitle">Scout the location and prepare your gear before shoot day. Showing up to an unfamiliar space with unchecked gear is how preventable mistakes happen.</p>

            <div class="card">
                <div class="card-title">📍 Location Scout Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-l1" onchange="saveState();"><label for="cl-l1">Visited (or reviewed photos of) the primary shooting locations</label></li>
                    <li><input type="checkbox" id="cl-l2" onchange="saveState();"><label for="cl-l2">Noted the lighting conditions — natural light direction and quality, artificial light type (LED, fluorescent, tungsten) and color temperature</label></li>
                    <li><input type="checkbox" id="cl-l3" onchange="saveState();"><label for="cl-l3">Identified the best angles and backgrounds for priority shots</label></li>
                    <li><input type="checkbox" id="cl-l4" onchange="saveState();"><label for="cl-l4">Noted any problem areas — harsh backlighting, cluttered backgrounds, tight spaces, noise</label></li>
                    <li><input type="checkbox" id="cl-l5" onchange="saveState();"><label for="cl-l5">Confirmed access — parking, entry points, restricted areas, load-in logistics</label></li>
                    <li><input type="checkbox" id="cl-l6" onchange="saveState();"><label for="cl-l6">Identified power outlets if flash or continuous lighting is needed</label></li>
                </ul>
            </div>

            <div class="card">
                <div class="card-title">🎒 Gear Prep Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-g1" onchange="saveState();"><label for="cl-g1">Camera body cleaned (sensor, lens glass) and controls reviewed</label></li>
                    <li><input type="checkbox" id="cl-g2" onchange="saveState();"><label for="cl-g2">All batteries fully charged, including spares</label></li>
                    <li><input type="checkbox" id="cl-g3" onchange="saveState();"><label for="cl-g3">Memory cards formatted in-camera and capacity confirmed for expected shoot volume</label></li>
                    <li><input type="checkbox" id="cl-g4" onchange="saveState();"><label for="cl-g4">Lenses selected based on location lighting and shot list requirements</label></li>
                    <li><input type="checkbox" id="cl-g5" onchange="saveState();"><label for="cl-g5">Flash charged and tested (if using); extra flash batteries packed</label></li>
                    <li><input type="checkbox" id="cl-g6" onchange="saveState();"><label for="cl-g6">Shot list printed or loaded on phone — accessible without unlocking constantly</label></li>
                    <li><input type="checkbox" id="cl-g7" onchange="saveState();"><label for="cl-g7">Client point-of-contact name and phone number saved</label></li>
                </ul>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp1a')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('location','cp1')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 1 ══ -->
        <div class="step-section" id="step-cp1">
            <div class="phase-badge chk">✅ Phase 1 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Pre-Shoot Review</h1>
            <p class="step-subtitle">Final check before shoot day. Everything should be confirmed, packed, and ready — no surprises on the day.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Confirm before shoot day</h4>
                    <ul class="checkpoint-q-list">
                        <li>Has the location been scouted and any lighting challenges identified?</li>
                        <li>Is all gear checked, charged, and packed?</li>
                        <li>Is the shot list accessible during the shoot — not just saved somewhere on a laptop?</li>
                        <li>Is the timeline and point-of-contact confirmed with the client?</li>
                        <li>Is the turnaround plan clear — when will images be delivered and in what format?</li>
                    </ul>
                </div>
                <div class="field-label">Your Checkpoint Notes</div>
                <textarea class="field-input" id="cp1-notes" placeholder="What did Russ confirm? Any last logistics to sort before the shoot?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('location')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp1','fundamentals')">Checkpoint Complete — The Shoot →</button>
            </div>
        </div>

        <!-- ══ FUNDAMENTALS ══ -->
        <div class="step-section" id="step-fundamentals">
            <div class="phase-badge prod">◆ Phase 2 · The Shoot</div>
            <h1 class="step-title">Camera Fundamentals</h1>
            <p class="step-subtitle">Review these before every shoot. The goal is to make exposure decisions quickly and instinctively so you never miss a moment fumbling with settings.</p>

            <div class="card">
                <div class="card-title">⚡ The Exposure Triangle in Practice</div>
                <p>Every lighting situation requires a different balance of aperture, shutter speed, and ISO. Here are the starting points for common client scenarios:</p>
                <ol class="how-to-list">
                    <li><strong>Outdoor in daylight.</strong> ISO 100–200, aperture f/4–f/8 (group shots f/8, single subject f/2.8–f/4), shutter 1/500–1/1000s. Plenty of light — keep ISO low and freeze motion with a fast shutter.</li>
                    <li><strong>Indoor with good artificial light.</strong> ISO 400–800, aperture f/2.8–f/4, shutter 1/200–1/320s. Watch for mixed light sources — different bulb types create different color casts. Set white balance manually.</li>
                    <li><strong>Indoor with dim/stage lighting.</strong> ISO 1600–6400, aperture f/1.8–f/2.8 (widest you have), shutter 1/160–1/250s. Accept some noise — a sharp, slightly grainy image is better than a blurry clean one. Never go below 1/160s with a moving subject.</li>
                    <li><strong>Outdoors at night / low light.</strong> ISO 3200–12800, wide aperture, tripod if subjects are still. For moving subjects, flash becomes necessary — learn bounce flash technique.</li>
                </ol>
            </div>

            <div class="card">
                <div class="card-title">🎨 Composition Principles</div>
                <p><strong>Rule of thirds:</strong> Place subjects off-center — at the intersections of an imaginary 3×3 grid. Center-framed subjects feel static. Off-center subjects feel dynamic and intentional.</p>
                <p><strong>Leading lines:</strong> Use natural lines (hallways, fences, table edges, roads) to draw the eye toward the subject.</p>
                <p><strong>Clean backgrounds:</strong> Before pressing the shutter, check what's behind the subject. A pole appearing to grow from someone's head, a cluttered wall, or a distracting exit sign ruins an otherwise good frame. Take two steps left or right if needed.</p>
                <p><strong>Fill the frame:</strong> Get closer. Most beginner photographers stay too far away. Move in until the subject fills the frame — or use your feet to zoom, not the lens.</p>
                <p><strong>Shoot multiples:</strong> Take 3–5 frames of every important shot. People blink, expressions change, and slight camera movement happens. Give yourself options in the cull.</p>
            </div>

            <div class="callout callout-yellow">
                <span class="callout-icon">⚠</span>
                <div><strong>Set your camera before you arrive.</strong> Showing up to a venue and taking your first test shots after guests are there is too late. Set your base exposure settings while traveling or in a quiet moment before the shoot begins. Your first frame should never be a throwaway.</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp1')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('fundamentals','shoot')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ THE SHOOT ══ -->
        <div class="step-section" id="step-shoot">
            <div class="phase-badge prod">◆ Phase 2 · The Shoot</div>
            <h1 class="step-title">The Shoot</h1>
            <p class="step-subtitle">Execute the shot list without losing the spontaneous moments. Work the priority order, communicate professionally, and end every shoot with the card secured.</p>

            <div class="card">
                <div class="card-title">⏺ Shoot Day Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-s1" onchange="saveState();"><label for="cl-s1">Arrived early — set up and tested exposure before the event began</label></li>
                    <li><input type="checkbox" id="cl-s2" onchange="saveState();"><label for="cl-s2">Introduced yourself to the client point-of-contact on arrival</label></li>
                    <li><input type="checkbox" id="cl-s3" onchange="saveState();"><label for="cl-s3">Shot list accessible and priority 1 shots addressed early in the session</label></li>
                    <li><input type="checkbox" id="cl-s4" onchange="saveState();"><label for="cl-s4">Captured establishing wide shots of the full venue/scene</label></li>
                    <li><input type="checkbox" id="cl-s5" onchange="saveState();"><label for="cl-s5">Shot a mix of wide, medium, and close-up throughout</label></li>
                    <li><input type="checkbox" id="cl-s6" onchange="saveState();"><label for="cl-s6">Captured candid and unposed moments alongside posed/priority shots</label></li>
                    <li><input type="checkbox" id="cl-s7" onchange="saveState();"><label for="cl-s7">Checked cards mid-shoot — storage not full, camera writing correctly</label></li>
                    <li><input type="checkbox" id="cl-s8" onchange="saveState();"><label for="cl-s8">Before leaving: reviewed cards are safely ejected, all gear packed</label></li>
                    <li><input type="checkbox" id="cl-s9" onchange="saveState();"><label for="cl-s9">Images backed up to a second drive or cloud within 2 hours of finishing</label></li>
                    <li><input type="checkbox" id="cl-s10" onchange="saveState();"><label for="cl-s10">Sent a brief follow-up message to the client confirming the shoot wrapped and when to expect delivery</label></li>
                </ul>
            </div>

            <div class="callout callout-purple">
                <span class="callout-icon">💡</span>
                <div><strong>Be invisible when you need to be, present when it helps.</strong> For candid event coverage, blend in — move quietly, anticipate moments rather than interrupting them. For posed shots and portraits, be confident and directive: "Look here, chin slightly down, good." Clients need someone to guide them — a photographer who stands silently waiting looks unprepared.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-shoot-link" placeholder="Link to raw image folder (Google Drive, Dropbox, etc.)..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-shoot-note" placeholder="How many total frames? Were all priority shots captured? Any challenges during the shoot?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('shoot')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('shoot','Shoot — Raw Images','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-shoot-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('fundamentals')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('shoot','cp2')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 2 ══ -->
        <div class="step-section" id="step-cp2">
            <div class="phase-badge chk">✅ Phase 2 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Post-Shoot Review</h1>
            <p class="step-subtitle">Before you open Lightroom, review what you captured. Know what you're working with before the edit begins.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Review before editing begins</h4>
                    <ul class="checkpoint-q-list">
                        <li>Were all priority 1 shots captured? If not, is there a plan to address any gaps?</li>
                        <li>Are the images backed up to at least two locations?</li>
                        <li>Is the overall image quality strong enough — exposure, focus, variety?</li>
                        <li>How many total frames, and is the expected final delivery count achievable?</li>
                    </ul>
                </div>
                <div class="field-label">Your Checkpoint Notes</div>
                <textarea class="field-input" id="cp2-notes" placeholder="What did Russ say? Any shots that need to be captured in a follow-up?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('shoot')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp2','cull')">Checkpoint Complete — Post-Production →</button>
            </div>
        </div>

        <!-- ══ CULLING ══ -->
        <div class="step-section" id="step-cull">
            <div class="phase-badge post">◆ Phase 3 · Post-Production</div>
            <h1 class="step-title">Culling</h1>
            <p class="step-subtitle">Culling is the most underestimated step in photography. The images you don't deliver are as important as the ones you do. One excellent image beats five mediocre ones every time.</p>

            <div class="callout callout-yellow">
                <span class="callout-icon">⚠</span>
                <div><strong>Never deliver unculled images.</strong> Sending a client a full card dump of 800 raw photos — even if "they can pick what they want" — is not professional delivery. It signals that you didn't do your job. Your editorial judgment is part of what the client is paying for.</div>
            </div>

            <div class="card">
                <div class="card-title">🗂 How to Cull Efficiently</div>
                <ol class="how-to-list">
                    <li><strong>First pass: eliminate technical failures.</strong> Delete anything blurry (due to camera shake or missed focus), badly exposed (blown highlights, crushed shadows), or where the subject blinked or made an unflattering expression. Be ruthless.</li>
                    <li><strong>Second pass: eliminate duplicates.</strong> From the multiples you shot of each scene, keep the best one or two. If five frames are nearly identical, one or two go to the client — not all five.</li>
                    <li><strong>Third pass: select your keepers.</strong> Flag or star images that are technically solid AND tell the story or serve the shot list. Aim for the best 15–25% of surviving frames.</li>
                    <li><strong>Check coverage.</strong> After culling, review whether the shot list is covered. Do you have wide, medium, and close-up images? Candid and posed? Are all priority subjects represented?</li>
                    <li><strong>Final count check.</strong> Confirm the number of keeper images matches or exceeds the agreed delivery count. If you're short on certain categories, identify them now before editing begins.</li>
                </ol>
            </div>

            <div class="tag-row">
                <span class="tag tip">Deliver quality, not quantity</span>
                <span class="tag warning">One blurry image in a gallery undermines all the good ones</span>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp2')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cull','edit')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ EDITING ══ -->
        <div class="step-section" id="step-edit">
            <div class="phase-badge post">◆ Phase 3 · Post-Production</div>
            <h1 class="step-title">Editing</h1>
            <p class="step-subtitle">Edit for consistency, not just correction. The goal is a cohesive set of images that feel like they belong together — not a collection of individually treated photos.</p>

            <div class="card">
                <div class="card-title">✂ The Editing Workflow</div>
                <ol class="how-to-list">
                    <li><strong>Set your base exposure on one representative image.</strong> Fix white balance, adjust exposure, correct highlights and shadows. This becomes your reference image for the whole set.</li>
                    <li><strong>Sync to similar images.</strong> In Lightroom, select all images shot in the same lighting conditions, then sync the settings from your reference image. This creates a consistent base across the set in seconds.</li>
                    <li><strong>Tweak individually where needed.</strong> Some images will need minor adjustments after the sync — a slightly darker frame here, a slightly warmer one there. Keep these adjustments subtle.</li>
                    <li><strong>Apply a consistent grade.</strong> Choose a color tone that suits the project — warm and golden, clean and neutral, cool and airy — and apply it consistently. Switching styles between images in the same gallery looks unprofessional.</li>
                    <li><strong>Crop for composition.</strong> Fix horizon lines that are slightly off. Crop out distracting edges. Tighten loose compositions. But don't over-crop — you lose resolution for print.</li>
                    <li><strong>Final check.</strong> View the full gallery in grid view and look for outliers — an image that's noticeably different in color, brightness, or style from the rest. Fix or remove it.</li>
                </ol>
            </div>

            <div class="callout callout-blue">
                <span class="callout-icon">🎨</span>
                <div><strong>Match the client's brand.</strong> If the client has warm, earthy brand colors, a cool blue-toned edit will feel off-brand even if it looks technically good. Reference the client's existing materials and brand palette when choosing your grade. This is why the discovery brief matters — you should know the brand before you edit.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Capture an Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-edit-link" placeholder="Link to edited images folder or gallery preview..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-edit-note" placeholder="How many edited images? What grade or style did you apply and why?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('edit')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('edit','Edited Photo Gallery','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-edit-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cull')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('edit','cp3a')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CLIENT PREVIEW ══ -->
        <div class="step-section" id="step-cp3a">
            <div class="phase-badge chk">✅ Phase 3 · Client Preview</div>
            <h1 class="step-title">Client Preview</h1>
            <p class="step-subtitle">Share a preview set with the client before final export. This is your chance to confirm selection and catch any feedback before you finalize everything.</p>

            <div class="client-review-card">
                <div class="client-review-header">
                    <div class="client-avatar">🤝</div>
                    <div>
                        <div class="client-title">Client Gallery Preview</div>
                        <div class="client-subtitle">Share a proofing gallery, not just a Google Drive folder.</div>
                    </div>
                </div>
                <div class="client-guidance">
                    <h4>How to run the preview</h4>
                    <ul class="client-q-list">
                        <li>Share images via a proofing gallery (Google Drive with view permissions, or a simple web gallery). A folder dump feels unfinished — a gallery feels professional.</li>
                        <li>Frame the review: "Here are X images from the set. I'm looking for confirmation that the coverage meets expectations before I finalize the export." Be specific about what you need from them.</li>
                        <li>Ask about specific shots if you had concerns: "I want to flag that the indoor stage lighting was challenging — the available photos from that segment have some noise, but all are sharp. Does this work for your use?"</li>
                        <li>If the client wants to swap specific images or needs more of a certain type, note it precisely and confirm if it's within scope.</li>
                        <li>Get written confirmation before exporting final files — a reply email approving the gallery is enough.</li>
                    </ul>
                </div>
                <div class="field-label">Client Feedback Notes</div>
                <textarea class="field-input" id="cp3a-notes" placeholder="What did the client confirm or request? Is the gallery approved for final export?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('edit')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('cp3a','export')">Preview Approved — Export →</button>
            </div>
        </div>

        <!-- ══ EXPORT / DELIVERY ══ -->
        <div class="step-section" id="step-export">
            <div class="phase-badge del">◆ Phase 4 · Delivery</div>
            <h1 class="step-title">Export & Delivery</h1>
            <p class="step-subtitle">Export at the right specs for the client's intended use and deliver cleanly. The last impression is the delivery experience.</p>

            <div class="card">
                <div class="card-title">📦 Export & Delivery Checklist</div>
                <ul class="checklist">
                    <li><input type="checkbox" id="cl-e1" onchange="saveState();"><label for="cl-e1">Exported in all agreed formats — JPEG for web/print, RAW originals if requested</label></li>
                    <li><input type="checkbox" id="cl-e2" onchange="saveState();"><label for="cl-e2">Resolution confirmed for intended use — web (1920px long edge), print (300 DPI minimum)</label></li>
                    <li><input type="checkbox" id="cl-e3" onchange="saveState();"><label for="cl-e3">Files named consistently: ClientName_Event_001.jpg (not IMG_3847.JPG)</label></li>
                    <li><input type="checkbox" id="cl-e4" onchange="saveState();"><label for="cl-e4">Delivery folder organized: /Web, /Print-HiRes, /RAW (if applicable)</label></li>
                    <li><input type="checkbox" id="cl-e5" onchange="saveState();"><label for="cl-e5">Shared via Google Drive with appropriate permissions — view only unless client needs to download</label></li>
                    <li><input type="checkbox" id="cl-e6" onchange="saveState();"><label for="cl-e6">Sent delivery email with context — total image count, how to download, and a note about the shoot</label></li>
                    <li><input type="checkbox" id="cl-e7" onchange="saveState();"><label for="cl-e7">Backup of all edited and raw files retained for 90 days minimum</label></li>
                </ul>
            </div>

            <div class="callout callout-green">
                <span class="callout-icon">📧</span>
                <div><strong>The delivery email matters.</strong> Don't just drop a Drive link. Write 3–4 sentences: what was captured, how many images, any notes about the shoot, and what to do if they have questions. It's the last touchpoint of the project — make it feel like the work it represents.</div>
            </div>

            <div class="artifact-zone">
                <div class="artifact-zone-title">📎 Final Artifact <span style="font-weight:400;color:#9CA3AF">· Maps to S1: Client Relationships · S4: Technical Skills</span></div>
                <div class="artifact-row">
                    <input type="text" class="artifact-link-input" id="art-export-link" placeholder="Link to final delivery folder or best portfolio images..." oninput="saveState();">
                </div>
                <textarea class="artifact-note-input" id="art-export-note" placeholder="How many final images delivered? Any standout shots? What would you do differently?" oninput="saveState();"></textarea>
                <div style="display:flex;gap:8px;">
                    <button class="btn-save-artifact" onclick="saveArtifact('export')">Save Artifact</button>
                    <button class="btn-send-portfolio" onclick="openPortfolioModal('export','Final Photo Delivery','S4')">Send to Portfolio →</button>
                </div>
                <div class="artifact-saved-msg" id="art-export-saved">✓ Artifact saved</div>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('cp3a')">← Back</button>
                <button class="btn-next" onclick="markCompleteAndNext('export','cp3')">Mark Complete & Continue →</button>
            </div>
        </div>

        <!-- ══ CHECKPOINT 3 / REFLECTION ══ -->
        <div class="step-section" id="step-cp3">
            <div class="phase-badge chk">✅ Phase 4 Checkpoint</div>
            <h1 class="step-title">Checkpoint: Reflection</h1>
            <p class="step-subtitle">Confirm delivery is complete. Reflect on what you learned — the best photographers improve their process on every project.</p>

            <div class="checkpoint-card">
                <div class="checkpoint-mentor">
                    <div class="mentor-avatar">👨🏫</div>
                    <div class="mentor-info">
                        <div class="mentor-name">Russ Goerend</div>
                        <div class="mentor-role">Instructor · Designing Communication Solutions & Business Startup</div>
                    </div>
                </div>
                <div class="checkpoint-questions">
                    <h4>Final review</h4>
                    <ul class="checkpoint-q-list">
                        <li>Did the client confirm receipt of the final delivery in writing?</li>
                        <li>Were all agreed deliverables in the brief fulfilled?</li>
                        <li>What was the most technically challenging moment of the shoot, and how did you handle it?</li>
                        <li>What would you do differently in pre-production, during the shoot, or in post?</li>
                        <li>What image from this project are you most proud of, and why?</li>
                    </ul>
                </div>
                <div class="field-label">Notes from your final review</div>
                <textarea class="field-input" id="cp3-notes" placeholder="What did Russ confirm? What are your main takeaways from this project?" oninput="saveState();"></textarea>
            </div>

            <div class="step-nav">
                <button class="btn-prev" onclick="goTo('export')">← Back</button>
            </div>
        </div>

    </main>
</div>

<!-- ── TASK BOARD MODAL ── -->
<div class="modal-overlay" id="task-modal-overlay" onclick="closeTaskBoard(event)">
    <div class="task-modal" onclick="event.stopPropagation()">
        <div class="task-modal-header">
            <h2>📋 Project Task Board</h2>
            <button class="modal-close" onclick="closeTaskBoard()">✕</button>
        </div>
        <div class="task-add-row">
            <input type="text" class="task-add-input" id="new-task-input" placeholder="Add a task..." onkeydown="if(event.key==='Enter')addTask();">
            <button class="btn-add-task" onclick="addTask()">+ Add</button>
        </div>
        <div class="task-columns">
            <div class="task-col"><div class="task-col-title col-todo">📋 To Do</div><div id="tasks-todo"></div></div>
            <div class="task-col"><div class="task-col-title col-prog">⚡ In Progress</div><div id="tasks-prog"></div></div>
            <div class="task-col"><div class="task-col-title col-done">✅ Done</div><div id="tasks-done"></div></div>
        </div>
    </div>
</div>

<!-- ── PORTFOLIO MODAL ── -->
<div class="portfolio-modal-overlay" id="portfolio-modal" onclick="closePortfolioModal(event)">
    <div class="portfolio-modal" onclick="event.stopPropagation()">
        <h3>Send to Portfolio</h3>
        <p>Which Standard does this artifact best support?</p>
        <label class="std-option" onclick="selectStd(this,'S1')"><input type="radio" name="std-pick" value="S1"> S1 — Servant Leadership & Client Relationships</label>
        <label class="std-option" onclick="selectStd(this,'S4')"><input type="radio" name="std-pick" value="S4"> S4 — Technical & Digital Skills</label>
        <label class="std-option" onclick="selectStd(this,'S5')"><input type="radio" name="std-pick" value="S5"> S5 — Professional Skills</label>
        <div class="pm-btns">
            <button class="pm-cancel" onclick="closePortfolioModal()">Cancel</button>
            <button class="pm-confirm" onclick="confirmSendToPortfolio()">Send to Portfolio →</button>
        </div>
    </div>
</div>

<div class="toast" id="toast"></div>

<script>
    const STORAGE_KEY = 'apex_dcs_photo_v1';
    const PROJECT_STORE_KEY = 'apex_dcs_photo_projects_v1';
    const STEPS = ['orientation','setup','discovery','brief','cp1a','location','cp1','fundamentals','shoot','cp2','cull','edit','cp3a','export','cp3'];
    const TOTAL = STEPS.length;
    const DEFAULT_PROJECT_ID = 'project-default';

    let projects = {};
    let currentProjectId = DEFAULT_PROJECT_ID;
    let state = createEmptyState();
    let currentStep = 'orientation';
    let pendingArtifactStep = null;
    let pendingArtifactTitle = null;
    let pendingArtifactDefaultStd = null;

    function createEmptyState() {
        return { project:{name:'',client:'',type:'',shootDate:'',deadline:'',role:''}, completed:[], checklistStates:{}, artifacts:{}, tasks:[], cpNotes:{} };
    }

    function loadProjectStore() {
        const raw = localStorage.getItem(PROJECT_STORE_KEY);
        if (raw) { try { projects = JSON.parse(raw) || {}; } catch(e) { projects = {}; } }
        if (!projects[currentProjectId]) {
            const keys = Object.keys(projects);
            if (keys.length) currentProjectId = keys[0];
            else projects[currentProjectId] = createEmptyState();
        }
    }

    function saveProjectStore() {
        projects[currentProjectId] = state;
        localStorage.setItem(PROJECT_STORE_KEY, JSON.stringify(projects));
        localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
    }

    function renderProjectOptions() {
        const sel = document.getElementById('project-select');
        if (!sel) return;
        sel.innerHTML = '';
        Object.keys(projects).forEach(key => {
            const o = document.createElement('option');
            o.value = key; o.textContent = projects[key].project.name || 'Untitled Project'; o.selected = key === currentProjectId;
            sel.appendChild(o);
        });
    }

    function switchProject(id) {
        if (!id || id === currentProjectId) return;
        saveState(); currentProjectId = id;
        state = JSON.parse(JSON.stringify(projects[id] || createEmptyState()));
        loadStateIntoUI(); renderProjectOptions(); updateSidebarLabel(); updateProgress(); renderTasks();
    }

    function newProject() {
        const name = prompt('Project name:', 'New Photography Project');
        if (name === null) return;
        saveState();
        const id = 'project-' + Date.now();
        const ns = createEmptyState(); ns.project.name = name.trim() || 'New Photography Project';
        projects[id] = ns; currentProjectId = id; state = JSON.parse(JSON.stringify(ns));
        saveProjectStore(); renderProjectOptions(); loadStateIntoUI(); updateSidebarLabel(); updateProgress(); renderTasks(); goTo('orientation');
    }

    function duplicateProject() {
        const cur = state.project.name || 'Project';
        const name = prompt('Name for the duplicate:', 'Copy of ' + cur);
        if (name === null) return;
        saveState();
        const id = 'project-' + Date.now();
        const copy = JSON.parse(JSON.stringify(state)); copy.project.name = name.trim() || 'Copy of ' + cur;
        projects[id] = copy; currentProjectId = id; state = JSON.parse(JSON.stringify(copy));
        saveProjectStore(); renderProjectOptions(); loadStateIntoUI(); updateSidebarLabel(); updateProgress(); renderTasks();
    }

    function renameProject() {
        const cur = state.project.name || 'Untitled Project';
        const name = prompt('Rename project:', cur);
        if (name === null || !name.trim()) return;
        state.project.name = name.trim();
        const el = document.getElementById('proj-name'); if (el) el.value = name.trim();
        saveState(); renderProjectOptions(); updateSidebarLabel(); showToast('Project renamed ✓');
    }

    function deleteProject() {
        if (Object.keys(projects).length <= 1) { showToast('Cannot delete the only project'); return; }
        const name = state.project.name || 'Untitled Project';
        if (!confirm('Delete "' + name + '"? This cannot be undone.')) return;
        delete projects[currentProjectId];
        currentProjectId = Object.keys(projects)[0];
        state = JSON.parse(JSON.stringify(projects[currentProjectId]));
        saveProjectStore(); renderProjectOptions(); loadStateIntoUI(); updateSidebarLabel(); updateProgress(); renderTasks(); showToast('Project deleted');
    }

    function loadState() { loadProjectStore(); state = JSON.parse(JSON.stringify(projects[currentProjectId] || createEmptyState())); renderProjectOptions(); loadStateIntoUI(); }

    function loadStateIntoUI() {
        document.querySelectorAll('.step-btn.done').forEach(b => b.classList.remove('done'));
        document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => el.checked = false);
        const p = state.project || {};
        setValue('proj-name', p.name); setValue('proj-client', p.client); setValue('proj-type', p.type);
        setValue('proj-shoot-date', p.shootDate); setValue('proj-deadline', p.deadline); setValue('proj-role', p.role);
        const n = state.cpNotes || {};
        ['cp1a','cp1','cp2','cp3a','cp3'].forEach(k => setValue(k + '-notes', n[k] || ''));
        const arts = state.artifacts || {};
        ['discovery','brief','shoot','edit','export'].forEach(k => {
            setValue('art-' + k + '-link', (arts[k] || {}).link || '');
            setValue('art-' + k + '-note', (arts[k] || {}).note || '');
        });
        const cls = state.checklistStates || {};
        Object.keys(cls).forEach(id => { const el = document.getElementById(id); if (el) el.checked = cls[id]; });
        (state.completed || []).forEach(id => markStepDone(id));
        updateProgress(); updateSidebarLabel(); renderTasks();
    }

    function saveState() {
        state.project = {
            name: getVal('proj-name'), client: getVal('proj-client'), type: getVal('proj-type'),
            shootDate: getVal('proj-shoot-date'), deadline: getVal('proj-deadline'), role: getVal('proj-role')
        };
        state.cpNotes = { cp1a: getVal('cp1a-notes'), cp1: getVal('cp1-notes'), cp2: getVal('cp2-notes'), cp3a: getVal('cp3a-notes'), cp3: getVal('cp3-notes') };
        ['discovery','brief','shoot','edit','export'].forEach(k => {
            if (!state.artifacts[k]) state.artifacts[k] = {};
            state.artifacts[k].link = getVal('art-' + k + '-link') || state.artifacts[k].link || '';
            state.artifacts[k].note = getVal('art-' + k + '-note') || state.artifacts[k].note || '';
        });
        document.querySelectorAll('.checklist input[type="checkbox"]').forEach(el => { state.checklistStates[el.id] = el.checked; });
        projects[currentProjectId] = state; saveProjectStore(); renderProjectOptions();
    }

    function getVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }
    function setValue(id, val) { const el = document.getElementById(id); if (el && val !== undefined) el.value = val; }

    function goTo(id) {
        document.querySelector('.step-section.active')?.classList.remove('active');
        document.getElementById('step-' + id)?.classList.add('active');
        document.querySelector('.step-btn.active')?.classList.remove('active');
        document.getElementById('nav-' + id)?.classList.add('active');
        currentStep = id; window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function markCompleteAndNext(doneId, nextId) {
        if (!state.completed.includes(doneId)) state.completed.push(doneId);
        markStepDone(doneId); updateProgress(); saveState(); goTo(nextId);
    }

    function markStepDone(id) { const btn = document.getElementById('nav-' + id); if (btn) btn.classList.add('done'); }

    function updateProgress() {
        const done = (state.completed || []).length;
        const pct = Math.round((done / TOTAL) * 100);
        const fill = document.getElementById('progress-fill'); const label = document.getElementById('progress-label');
        if (fill) fill.style.width = pct + '%';
        if (label) label.textContent = done + ' of ' + TOTAL + ' steps complete';
    }

    function updateSidebarLabel() { const label = document.getElementById('sidebar-project-label'); const name = getVal('proj-name'); if (label) label.textContent = name || 'New Project'; }

    function saveArtifact(stepId) {
        if (!state.artifacts[stepId]) state.artifacts[stepId] = {};
        state.artifacts[stepId].link = getVal('art-' + stepId + '-link');
        state.artifacts[stepId].note = getVal('art-' + stepId + '-note');
        state.artifacts[stepId].savedAt = new Date().toISOString();
        saveState();
        const msg = document.getElementById('art-' + stepId + '-saved');
        if (msg) { msg.style.display = 'block'; setTimeout(() => msg.style.display = 'none', 2500); }
        showToast('Artifact saved ✓');
    }

    function openPortfolioModal(stepId, title, defaultStd) {
        saveArtifact(stepId); pendingArtifactStep = stepId; pendingArtifactTitle = title; pendingArtifactDefaultStd = defaultStd;
        document.querySelectorAll('.std-option').forEach(o => o.classList.remove('selected'));
        document.querySelectorAll('.std-option input').forEach(r => r.checked = false);
        const target = document.querySelector(`.std-option input[value="${defaultStd}"]`);
        if (target) { target.checked = true; target.closest('.std-option').classList.add('selected'); }
        document.getElementById('portfolio-modal').classList.add('open');
    }

    function closePortfolioModal(e) { if (!e || e.target === document.getElementById('portfolio-modal')) document.getElementById('portfolio-modal').classList.remove('open'); }
    function selectStd(label) { document.querySelectorAll('.std-option').forEach(o => o.classList.remove('selected')); label.classList.add('selected'); }

    function confirmSendToPortfolio() {
        const selected = document.querySelector('.std-option input:checked');
        if (!selected) { showToast('Please select a Standard'); return; }
        const std = selected.value;
        const art = (state.artifacts[pendingArtifactStep] || {});
        const newCard = { id: 'dcs-photo-' + pendingArtifactStep + '-' + Date.now(), title: '📷 DCS Photo: ' + (pendingArtifactTitle || 'Photography Artifact'), brief: 'From Photography Playbook — ' + (state.project.name || 'Untitled Project') + '. ' + (art.note || ''), link: art.link || '', reflection: '', isCustom: true };
        if (std === 'S1') {
            let s = {}; try { s = JSON.parse(localStorage.getItem('apex_std1_state_v6') || '{}'); } catch(e) {}
            if (!s.client) s.client = []; s.client.unshift(newCard); localStorage.setItem('apex_std1_state_v6', JSON.stringify(s));
        }
        if (std === 'S4' || std === 'S5') {
            let inbox = []; try { inbox = JSON.parse(localStorage.getItem('apex_dcs_artifact_inbox') || '[]'); } catch(e) {}
            inbox.unshift({ ...newCard, standard: std, project: state.project.name, addedAt: new Date().toISOString() });
            localStorage.setItem('apex_dcs_artifact_inbox', JSON.stringify(inbox));
        }
        if (state.artifacts[pendingArtifactStep]) state.artifacts[pendingArtifactStep].sentTo = std;
        saveState(); closePortfolioModal(); showToast('✓ Sent to ' + std + ' Portfolio');
    }

    function openTaskBoard() { document.getElementById('task-modal-overlay').classList.add('open'); }
    function closeTaskBoard(e) { if (!e || e.target === document.getElementById('task-modal-overlay')) document.getElementById('task-modal-overlay').classList.remove('open'); }

    function addTask() {
        const input = document.getElementById('new-task-input'); const text = input.value.trim();
        if (!text) return;
        state.tasks.push({ id: 'task-' + Date.now(), text, status: 'todo' }); input.value = ''; saveState(); renderTasks();
    }

    function moveTask(id, newStatus) { const task = state.tasks.find(t => t.id === id); if (task) task.status = newStatus; saveState(); renderTasks(); }
    function deleteTask(id) { state.tasks = state.tasks.filter(t => t.id !== id); saveState(); renderTasks(); }

    function renderTasks() {
        ['todo','prog','done'].forEach(status => {
            const col = document.getElementById('tasks-' + status); if (!col) return; col.innerHTML = '';
            (state.tasks || []).filter(t => t.status === status).forEach(t => {
                const div = document.createElement('div');
                div.className = 'task-item' + (status === 'done' ? ' status-done' : '');
                div.innerHTML = `<div>${t.text}</div><div class="task-item-actions">
                    ${status !== 'todo' ? `<button class="task-move-btn to-todo" onclick="moveTask('${t.id}','todo')">To Do</button>` : ''}
                    ${status !== 'prog' ? `<button class="task-move-btn to-prog" onclick="moveTask('${t.id}','prog')">In Progress</button>` : ''}
                    ${status !== 'done' ? `<button class="task-move-btn to-done" onclick="moveTask('${t.id}','done')">Done</button>` : ''}
                    <button class="task-move-btn del" onclick="deleteTask('${t.id}')">✕</button>
                </div>`;
                col.appendChild(div);
            });
        });
    }

    function showToast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2500); }

    window.onload = loadState;
</script>
</body>
</html>


I goofed on these two:  Add artifact timestamp display to all playbooks  Add search and filter to Standard1 and Standard5 artifact cards  Don't do those. I didn't describe them well enough.