1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	    <meta charset="UTF-8">
5	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6	    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
7	    <style>
8	        :root {
9	            --primary: #500778;    /* APEX Purple */
10	            --secondary: #c4d600;  /* APEX Lime Gold */
11	            --accent: #4b4f54;     /* APEX Dark Gray */
12	            --bg: #F3F4F6;
13	            --card-bg: #FFFFFF;
14	            --text-main: #1F2937;
15	            --text-sub: #6B7280;
16	            --exceeds: #059669;
17	            --secure: #2563EB;
18	            --developing: #D97706;
19	            --beginning: #DC2626;
20	            --success: #10B981;
21	            --info-bg: #E0F2FE;
22	            --info-border: #7DD3FC;
23	            --nav-height: 70px;
24	            --sidebar-width: 300px;
25	        }
26	        body { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); padding-bottom: 40px; padding-left: 20px; padding-right: 20px; transition: padding-left 0.3s; }
27	        .body-sidebar-open { padding-left: calc(var(--sidebar-width) + 20px); }
28
29	        /* --- GLOBAL NAVIGATION --- */
30	        .main-nav {
31	            background: var(--primary);
32	            height: var(--nav-height);
33	            width: 100%;
34	            position: fixed;
35	            top: 0;
36	            left: 0;
37	            z-index: 1000;
38	            display: flex;
39	            align-items: center;
40	            border-bottom: 4px solid var(--secondary);
41	            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
42	        }
43	        .nav-container {
44	            max-width: 1200px;
45	            margin: 0 auto;
46	            width: 100%;
47	            display: flex;
48	            justify-content: space-between;
49	            align-items: center;
50	            padding: 0 20px;
51	        }
52	        .nav-logo-link {
53	            display: flex;
54	            align-items: center;
55	            text-decoration: none;
56	            height: calc(var(--nav-height) - 15px);
57	        }
58	        .nav-logo-img {
59	            height: 100%;
60	            width: auto;
61	        }
62	        .nav-links {
63	            display: flex;
64	            gap: 10px;
65	        }
66	        .nav-links a {
67	            color: rgba(255,255,255,0.9);
68	            text-decoration: none;
69	            font-size: 0.8rem;
70	            font-weight: 700;
71	            padding: 8px 14px;
72	            border-radius: 6px;
73	            text-transform: uppercase;
74	            letter-spacing: 0.03em;
75	            transition: all 0.2s;
76	        }
77	        .nav-links a:hover {
78	            color: var(--secondary);
79	            background: rgba(255,255,255,0.1);
80	        }
81	        .nav-links a.active {
82	            background: var(--secondary);
83	            color: var(--primary);
84	        }
85	        /* --- NAV DROPDOWNS --- */
86	        .nav-dropdown { position: relative; }
87	        .nav-drop-btn { color: rgba(255,255,255,0.9); background: none; border: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; cursor: pointer; font-family: inherit; }
88	        .nav-dropdown:hover .nav-drop-btn { color: var(--secondary); background: rgba(255,255,255,0.1); }
89	        .nav-drop-btn.active { background: var(--secondary); color: var(--primary); }
90	        .nav-dropdown:hover .nav-drop-btn.active { background: var(--secondary); color: var(--primary); opacity: 0.85; }
91	        .nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px; z-index: 1001; padding: 6px 0; border: 1px solid #E5E7EB; }
92	        .nav-dropdown:hover .nav-drop-menu { display: block; }
93	        .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
94	        .nav-drop-menu a { display: block; padding: 9px 16px; color: #1F2937; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; }
95	        .nav-drop-menu a:hover { background: #F3F4F6; color: var(--primary); }
96	        .nav-drop-menu a.active { color: var(--primary); font-weight: 800; background: #F5F3FF; }
97	        .container { max-width: 1400px; margin: 0 auto; }
98
99	        header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }
100	        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; font-weight: 800; }
101	        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }
102
103	        /* Proficiency Indicators Styling */
104	        .indicators-box { background: white; border: 2px solid var(--secondary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
105	        .indicators-box summary { padding: 15px 20px; background: #FFFBEB; cursor: pointer; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; }
106	        .indicators-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; font-size: 0.85rem; line-height: 1.5; }
107
108	        .indicator-item { padding: 15px; border-radius: 8px; background: #F9FAFB; border-top: 4px solid #DDD; }
109	        .indicator-item strong { display: block; font-size: 1rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }
110
111	        .lvl-exceeds { border-top-color: var(--exceeds); }
112	        .lvl-exceeds strong { color: var(--exceeds); }
113	        .lvl-secure { border-top-color: var(--secure); }
114	        .lvl-secure strong { color: var(--secure); }
115	        .lvl-developing { border-top-color: var(--developing); }
116	        .lvl-developing strong { color: var(--developing); }
117	        .lvl-beginning { border-top-color: var(--beginning); }
118	        .lvl-beginning strong { color: var(--beginning); }
119
120	        /* Strand Info Box */
121	        .strand-info {
122	            background: var(--info-bg);
123	            border: 1px solid var(--info-border);
124	            border-radius: 12px;
125	            padding: 20px;
126	            margin-bottom: 40px;
127	            display: flex;
128	            flex-wrap: wrap;
129	            gap: 30px;
130	            align-items: center;
131	        }
132	        .strand-info-text { flex: 2; min-width: 300px; }
133	        .strand-info-text h2 { margin: 0 0 10px 0; font-size: 1.2rem; color: #0369A1; }
134	        .strand-info-text p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #0C4A6E; }
135	        .strand-steps { flex: 3; min-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
136	        .step { background: rgba(255,255,255,0.5); padding: 12px; border-radius: 8px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.8); }
137	        .step strong { color: var(--accent); display: block; margin-bottom: 4px; }
138
139	        /* Grid & Columns */
140	        .vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; align-items: start; }
141	        .vibe-column { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 8px solid var(--accent); position: relative; padding-bottom: 80px; min-height: 400px; }
142
143	        .col-1 { border-top-color: #10B981; }
144	        .col-2 { border-top-color: #3B82F6; }
145	        .col-3 { border-top-color: #8B5CF6; }
146	        .col-4 { border-top-color: #F59E0B; }
147
148	        .vibe-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: var(--primary); display: flex; align-items: center; gap: 10px; }
149
150	        /* Card Styling */
151	        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }
152	        .sprint-card:hover { border-color: var(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
153
154	        .editable-title {
155	            font-weight: 800;
156	            font-size: 1.05rem;
157	            color: var(--primary);
158	            width: 75%;
159	            background: transparent;
160	            margin-bottom: 10px;
161	            line-height: 1.3;
162	            display: block;
163	            outline: none;
164	        }
165	        .editable-title[contenteditable="true"]:focus { background: #FFFBEB; border-radius: 4px; }
166
167	        details.brief-container, details.reflection-box { font-size: 0.85rem; color: #4B5563; background: #F9FAFB; padding: 10px; border-radius: 6px; margin-top: 10px; }
168	        details.brief-container { border-left: 4px solid var(--secondary); }
169	        details.reflection-box { border-left: 4px solid var(--accent); }
170
171	        summary { cursor: pointer; font-weight: 700; color: var(--primary); outline: none; list-style: none; display: flex; align-items: center; gap: 5px; }
172	        summary::-webkit-details-marker { display: none; }
173	        summary::before { content: '▶'; font-size: 0.7rem; transition: 0.2s; }
174	        details[open] summary::before { transform: rotate(90deg); }
175
176	        .brief-text { padding-top: 8px; min-height: 20px; outline: none; line-height: 1.4; }
177	        .brief-text[contenteditable="true"]:focus { background: white; padding: 5px; border-radius: 4px; }
178
179	        /* Reflection Input */
180	        .reflection-textarea { width: 100%; min-height: 80px; border: 1px solid #D1D5DB; border-radius: 6px; margin-top: 8px; padding: 10px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; }
181	        .reflection-textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
182
183	        /* Action Area */
184	        .action-area { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
185	        .link-row { display: flex; gap: 8px; }
186	        input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 0.8rem; box-sizing: border-box; }
187
188	        /* Buttons */
189	        .save-btn { padding: 0 15px; background: var(--primary); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.8rem; }
190	        .save-btn:hover { background: var(--accent); }
191	        .save-btn.saved { background: var(--success); }
192
193	        .add-btn { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 12px; background: #F3F4F6; border: 2px dashed #D1D5DB; border-radius: 8px; color: var(--text-sub); cursor: pointer; font-weight: 600; text-align: center; transition: 0.2s; }
194	        .add-btn:hover { background: #E5E7EB; color: var(--primary); border-color: var(--primary); }
195
196	        .card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 10; opacity: 0; transition: 0.2s; }
197	        .sprint-card:hover .card-actions { opacity: 1; }
198
199	        .delete-btn, .duplicate-btn {
200	            cursor: pointer;
201	            font-size: 0.7rem;
202	            padding: 2px 6px;
203	            border-radius: 4px;
204	            font-weight: 600;
205	            border: 1px solid transparent;
206	            transition: 0.2s;
207	        }
208
209	        .duplicate-btn {
210	            background: #E0F2FE;
211	            color: #0369A1;
212	            border-color: #BAE6FD;
213	        }
214	        .duplicate-btn:hover { background: #0369A1; color: white; }
215
216	        .delete-btn {
217	            color: #EF4444;
218	            border-color: #FEE2E2;
219	            background: #FEF2F2;
220	        }
221	        .delete-btn:hover { background: #EF4444; color: white; }
222
223	        .bookmark-btn {
224	            background: #FEF3C7;
225	            color: #92400E;
226	            border-color: #FDE68A;
227	            font-size: 0.7rem;
228	            padding: 2px 6px;
229	        }
230	        .bookmark-btn:hover { background: #92400E; color: white; }
231
232	        /* --- COLLAPSIBLE CARDS --- */
233	        .card-header {
234	            display: flex;
235	            align-items: flex-start;
236	            gap: 8px;
237	            cursor: pointer;
238	            user-select: none;
239	            padding: 2px 0;
240	        }
241	        .card-header:hover .title-text { color: #3d0560; }
242
243	        .card-chevron {
244	            font-size: 0.6rem;
245	            color: var(--text-sub);
246	            margin-top: 5px;
247	            flex-shrink: 0;
248	            transition: transform 0.2s ease;
249	            display: inline-block;
250	        }
251	        .card-header.open .card-chevron { transform: rotate(90deg); }
252
253	        .card-body { display: none; margin-top: 10px; }
254	        .card-body.open { display: block; }
255
256	        .editable-title { margin-bottom: 0; }
257
258	        /* --- PROGRESS TRACK --- */
259	        .progress-track {
260	            display: flex;
261	            gap: 5px;
262	            margin: -8px 0 18px 0;
263	        }
264	        .progress-pip {
265	            flex: 1;
266	            height: 5px;
267	            border-radius: 3px;
268	            background: #E5E7EB;
269	            transition: background 0.4s ease, transform 0.2s ease;
270	        }
271	        .col-1 .progress-pip.lit { background: #10B981; }
272	        .col-2 .progress-pip.lit { background: #3B82F6; }
273	        .col-3 .progress-pip.lit { background: #8B5CF6; }
274	        .col-4 .progress-pip.lit { background: #F59E0B; }
275	        .save-btn.saved-done { background: #10B981; }
276	        .save-btn.saved-done:hover { background: #059669; }
277
278	        /* --- BOOKMARK QUEUE SIDEBAR --- */
279	        .sidebar {
280	            position: fixed;
281	            left: 0;
282	            top: var(--nav-height);
283	            bottom: 0;
284	            width: var(--sidebar-width);
285	            background: var(--card-bg);
286	            border-right: 1px solid #E5E7EB;
287	            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
288	            transform: translateX(-100%);
289	            transition: transform 0.3s ease;
290	            z-index: 998;
291	            overflow-y: auto;
292	        }
293	        .sidebar.open { transform: translateX(0); }
294	        .sidebar-header {
295	            display: flex;
296	            justify-content: space-between;
297	            align-items: center;
298	            padding: 20px;
299	            border-bottom: 1px solid #E5E7EB;
300	            background: var(--primary);
301	            color: white;
302	            position: sticky;
303	            top: 0;
304	            z-index: 1;
305	        }
306	        .sidebar-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
307	        #closeSidebar { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; }
308	        #closeSidebar:hover { background: rgba(255,255,255,0.1); }
309	        .queue-list { padding: 16px; }
310	        .queue-item { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-bottom: 10px; background: #F9FAFB; position: relative; }
311	        .queue-item a { text-decoration: none; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 0.95rem; }
312	        .queue-item a:hover { color: var(--accent); }
313	        .queue-item p { margin: 0; font-size: 0.82rem; color: var(--text-sub); line-height: 1.4; padding-right: 20px; }
314	        .queue-item .remove-btn { position: absolute; top: 10px; right: 10px; background: #EF4444; color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
315	        .queue-item .remove-btn:hover { background: #DC2626; }
316	        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }
317
318	        /* --- FILTER BAR --- */
319	        .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
320	        .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
321	        .chip { padding: 6px 14px; border-radius: 20px; border: 2px solid #E5E7EB; background: white; color: var(--text-sub); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit; }
322	        .chip:hover { border-color: var(--primary); color: var(--primary); }
323	        .chip.active { background: var(--primary); border-color: var(--primary); color: white; }
324	        .chip[data-filter="done"].active { background: #059669; border-color: #059669; }
325	        .chip[data-filter="in-progress"].active { background: #2563EB; border-color: #2563EB; }
326	        .chip[data-filter="not-started"].active { background: var(--text-sub); border-color: var(--text-sub); }
327	        #filterSearch { flex-grow: 0; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }
328	        #filterSearch:focus { border-color: var(--primary); }
329	        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }
330	            .nav-checkin-btn {
331	            background: var(--secondary);
332	            color: var(--primary) !important;
333	            border-radius: 6px;
334	            font-weight: 800 !important;
335	            padding: 8px 14px;
336	            text-decoration: none;
337	            font-size: 0.8rem;
338	            letter-spacing: 0.03em;
339	            text-transform: uppercase;
340	            transition: all 0.2s;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
    <style>
        :root {
            --primary: #500778;    /* APEX Purple */
            --secondary: #c4d600;  /* APEX Lime Gold */
            --accent: #4b4f54;     /* APEX Dark Gray */
            --bg: #F3F4F6;
            --card-bg: #FFFFFF;
            --text-main: #1F2937;
            --text-sub: #6B7280;
            --exceeds: #059669;
            --secure: #2563EB;
            --developing: #D97706;
            --beginning: #DC2626;
            --success: #10B981;
            --info-bg: #E0F2FE;
            --info-border: #7DD3FC;
            --nav-height: 70px;
            --sidebar-width: 300px;
        }
        body { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: var(--bg); color: var(--text-main); margin: 0; padding-top: var(--nav-height); padding-bottom: 40px; padding-left: 20px; padding-right: 20px; transition: padding-left 0.3s; }
        .body-sidebar-open { padding-left: calc(var(--sidebar-width) + 20px); }

        /* --- GLOBAL NAVIGATION --- */
        .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: 1200px;
            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: 10px;
        }
        .nav-links a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 8px 14px;
            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 DROPDOWNS --- */
        .nav-dropdown { position: relative; }
        .nav-drop-btn { color: rgba(255,255,255,0.9); background: none; border: none; font-size: 0.8rem; font-weight: 700; padding: 8px 14px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.03em; transition: all 0.2s; cursor: pointer; font-family: inherit; }
        .nav-dropdown:hover .nav-drop-btn { color: var(--secondary); background: rgba(255,255,255,0.1); }
        .nav-drop-btn.active { background: var(--secondary); color: var(--primary); }
        .nav-dropdown:hover .nav-drop-btn.active { background: var(--secondary); color: var(--primary); opacity: 0.85; }
        .nav-drop-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: white; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); min-width: 210px; z-index: 1001; padding: 6px 0; border: 1px solid #E5E7EB; }
        .nav-dropdown:hover .nav-drop-menu { display: block; }
        .nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 8px; }
        .nav-drop-menu a { display: block; padding: 9px 16px; color: #1F2937; text-decoration: none; font-size: 0.82rem; font-weight: 600; transition: background 0.15s; white-space: nowrap; }
        .nav-drop-menu a:hover { background: #F3F4F6; color: var(--primary); }
        .nav-drop-menu a.active { color: var(--primary); font-weight: 800; background: #F5F3FF; }
        .container { max-width: 1400px; margin: 0 auto; }

        header { text-align: center; margin-bottom: 30px; border-bottom: 1px solid #D1D5DB; padding-bottom: 20px; }
        h1 { font-size: 2.2rem; color: var(--primary); margin-bottom: 5px; font-weight: 800; }
        .subtitle { font-size: 1rem; color: var(--text-sub); max-width: 600px; margin: 0 auto; }

        /* Proficiency Indicators Styling */
        .indicators-box { background: white; border: 2px solid var(--secondary); border-radius: 12px; margin-bottom: 25px; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
        .indicators-box summary { padding: 15px 20px; background: #FFFBEB; cursor: pointer; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 10px; }
        .indicators-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; font-size: 0.85rem; line-height: 1.5; }

        .indicator-item { padding: 15px; border-radius: 8px; background: #F9FAFB; border-top: 4px solid #DDD; }
        .indicator-item strong { display: block; font-size: 1rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.05em; }

        .lvl-exceeds { border-top-color: var(--exceeds); }
        .lvl-exceeds strong { color: var(--exceeds); }
        .lvl-secure { border-top-color: var(--secure); }
        .lvl-secure strong { color: var(--secure); }
        .lvl-developing { border-top-color: var(--developing); }
        .lvl-developing strong { color: var(--developing); }
        .lvl-beginning { border-top-color: var(--beginning); }
        .lvl-beginning strong { color: var(--beginning); }

        /* Strand Info Box */
        .strand-info {
            background: var(--info-bg);
            border: 1px solid var(--info-border);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 40px;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: center;
        }
        .strand-info-text { flex: 2; min-width: 300px; }
        .strand-info-text h2 { margin: 0 0 10px 0; font-size: 1.2rem; color: #0369A1; }
        .strand-info-text p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: #0C4A6E; }
        .strand-steps { flex: 3; min-width: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
        .step { background: rgba(255,255,255,0.5); padding: 12px; border-radius: 8px; font-size: 0.85rem; border: 1px solid rgba(255,255,255,0.8); }
        .step strong { color: var(--accent); display: block; margin-bottom: 4px; }

        /* Grid & Columns */
        .vibe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 25px; align-items: start; }
        .vibe-column { background: var(--card-bg); border-radius: 12px; padding: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-top: 8px solid var(--accent); position: relative; padding-bottom: 80px; min-height: 400px; }

        .col-1 { border-top-color: #10B981; }
        .col-2 { border-top-color: #3B82F6; }
        .col-3 { border-top-color: #8B5CF6; }
        .col-4 { border-top-color: #F59E0B; }

        .vibe-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: var(--primary); display: flex; align-items: center; gap: 10px; }

        /* Card Styling */
        .sprint-card { background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 10px; padding: 18px; margin-bottom: 15px; transition: 0.2s; position: relative; }
        .sprint-card:hover { border-color: var(--secondary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

        .editable-title {
            font-weight: 800;
            font-size: 1.05rem;
            color: var(--primary);
            width: 75%;
            background: transparent;
            margin-bottom: 10px;
            line-height: 1.3;
            display: block;
            outline: none;
        }
        .editable-title[contenteditable="true"]:focus { background: #FFFBEB; border-radius: 4px; }

        details.brief-container, details.reflection-box { font-size: 0.85rem; color: #4B5563; background: #F9FAFB; padding: 10px; border-radius: 6px; margin-top: 10px; }
        details.brief-container { border-left: 4px solid var(--secondary); }
        details.reflection-box { border-left: 4px solid var(--accent); }

        summary { cursor: pointer; font-weight: 700; color: var(--primary); outline: none; list-style: none; display: flex; align-items: center; gap: 5px; }
        summary::-webkit-details-marker { display: none; }
        summary::before { content: '▶'; font-size: 0.7rem; transition: 0.2s; }
        details[open] summary::before { transform: rotate(90deg); }

        .brief-text { padding-top: 8px; min-height: 20px; outline: none; line-height: 1.4; }
        .brief-text[contenteditable="true"]:focus { background: white; padding: 5px; border-radius: 4px; }

        /* Reflection Input */
        .reflection-textarea { width: 100%; min-height: 80px; border: 1px solid #D1D5DB; border-radius: 6px; margin-top: 8px; padding: 10px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; }
        .reflection-textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }

        /* Action Area */
        .action-area { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }
        .link-row { display: flex; gap: 8px; }
        input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #D1D5DB; border-radius: 6px; font-size: 0.8rem; box-sizing: border-box; }

        /* Buttons */
        .save-btn { padding: 0 15px; background: var(--primary); color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.8rem; }
        .save-btn:hover { background: var(--accent); }
        .save-btn.saved { background: var(--success); }

        .add-btn { position: absolute; bottom: 20px; left: 20px; right: 20px; padding: 12px; background: #F3F4F6; border: 2px dashed #D1D5DB; border-radius: 8px; color: var(--text-sub); cursor: pointer; font-weight: 600; text-align: center; transition: 0.2s; }
        .add-btn:hover { background: #E5E7EB; color: var(--primary); border-color: var(--primary); }

        .card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 10; opacity: 0; transition: 0.2s; }
        .sprint-card:hover .card-actions { opacity: 1; }

        .delete-btn, .duplicate-btn {
            cursor: pointer;
            font-size: 0.7rem;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
            border: 1px solid transparent;
            transition: 0.2s;
        }

        .duplicate-btn {
            background: #E0F2FE;
            color: #0369A1;
            border-color: #BAE6FD;
        }
        .duplicate-btn:hover { background: #0369A1; color: white; }

        .delete-btn {
            color: #EF4444;
            border-color: #FEE2E2;
            background: #FEF2F2;
        }
        .delete-btn:hover { background: #EF4444; color: white; }

        .bookmark-btn {
            background: #FEF3C7;
            color: #92400E;
            border-color: #FDE68A;
            font-size: 0.7rem;
            padding: 2px 6px;
        }
        .bookmark-btn:hover { background: #92400E; color: white; }

        /* --- COLLAPSIBLE CARDS --- */
        .card-header {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            padding: 2px 0;
        }
        .card-header:hover .title-text { color: #3d0560; }

        .card-chevron {
            font-size: 0.6rem;
            color: var(--text-sub);
            margin-top: 5px;
            flex-shrink: 0;
            transition: transform 0.2s ease;
            display: inline-block;
        }
        .card-header.open .card-chevron { transform: rotate(90deg); }

        .card-body { display: none; margin-top: 10px; }
        .card-body.open { display: block; }

        .editable-title { margin-bottom: 0; }

        /* --- PROGRESS TRACK --- */
        .progress-track {
            display: flex;
            gap: 5px;
            margin: -8px 0 18px 0;
        }
        .progress-pip {
            flex: 1;
            height: 5px;
            border-radius: 3px;
            background: #E5E7EB;
            transition: background 0.4s ease, transform 0.2s ease;
        }
        .col-1 .progress-pip.lit { background: #10B981; }
        .col-2 .progress-pip.lit { background: #3B82F6; }
        .col-3 .progress-pip.lit { background: #8B5CF6; }
        .col-4 .progress-pip.lit { background: #F59E0B; }
        .save-btn.saved-done { background: #10B981; }
        .save-btn.saved-done:hover { background: #059669; }

        /* --- BOOKMARK QUEUE SIDEBAR --- */
        .sidebar {
            position: fixed;
            left: 0;
            top: var(--nav-height);
            bottom: 0;
            width: var(--sidebar-width);
            background: var(--card-bg);
            border-right: 1px solid #E5E7EB;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            z-index: 998;
            overflow-y: auto;
        }
        .sidebar.open { transform: translateX(0); }
        .sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #E5E7EB;
            background: var(--primary);
            color: white;
            position: sticky;
            top: 0;
            z-index: 1;
        }
        .sidebar-header h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
        #closeSidebar { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 5px; border-radius: 4px; transition: background 0.2s; }
        #closeSidebar:hover { background: rgba(255,255,255,0.1); }
        .queue-list { padding: 16px; }
        .queue-item { border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; margin-bottom: 10px; background: #F9FAFB; position: relative; }
        .queue-item a { text-decoration: none; color: var(--primary); font-weight: 600; display: block; margin-bottom: 4px; font-size: 0.95rem; }
        .queue-item a:hover { color: var(--accent); }
        .queue-item p { margin: 0; font-size: 0.82rem; color: var(--text-sub); line-height: 1.4; padding-right: 20px; }
        .queue-item .remove-btn { position: absolute; top: 10px; right: 10px; background: #EF4444; color: white; border: none; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; }
        .queue-item .remove-btn:hover { background: #DC2626; }
        .empty-queue { text-align: center; color: var(--text-sub); font-style: italic; padding: 40px 20px; font-size: 0.9rem; }

        /* --- FILTER BAR --- */
        .filter-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
        .chip { padding: 6px 14px; border-radius: 20px; border: 2px solid #E5E7EB; background: white; color: var(--text-sub); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit; }
        .chip:hover { border-color: var(--primary); color: var(--primary); }
        .chip.active { background: var(--primary); border-color: var(--primary); color: white; }
        .chip[data-filter="done"].active { background: #059669; border-color: #059669; }
        .chip[data-filter="in-progress"].active { background: #2563EB; border-color: #2563EB; }
        .chip[data-filter="not-started"].active { background: var(--text-sub); border-color: var(--text-sub); }
        #filterSearch { flex-grow: 0; min-width: 200px; max-width: 280px; padding: 8px 14px; border: 2px solid #E5E7EB; border-radius: 20px; font-size: 0.85rem; font-family: inherit; transition: border-color 0.2s; outline: none; box-sizing: border-box; }
        #filterSearch:focus { border-color: var(--primary); }
        .no-match-msg { text-align: center; color: var(--text-sub); font-style: italic; padding: 20px 0; font-size: 0.85rem; display: none; }
            .nav-checkin-btn {
            background: var(--secondary);
            color: var(--primary) !important;
            border-radius: 6px;
            font-weight: 800 !important;
            padding: 8px 14px;
            text-decoration: none;
            font-size: 0.8rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            transition: all 0.2s;


Done. I even updated config.js on my own thank you very much.


Check memory persistence after extension restart


I have everything I need. Now building the v2 Standard1:


Write

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

📌 Work Queue

        <button id="closeSidebar">×</button>

No items yet. Bookmark an artifact card to add it here.

            Dashboard

                <button class="nav-drop-btn active">Portfolio ▾</button>

                    S1 · Servant Leadership
                    S2 · Beyond GPA
                    S3 · Career Exploration
                    S4 · Technical Skills
                    S5 · Professional Skills

            📋 Check-In

            <button id="sidebarToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>

Standard 1: Servant Leadership & Client Relationships

Documenting professional growth, client communication, and community impact.

        📊 S1 Servant Leadership Proficiency Indicators

                Exceeds
                Associate has displayed immense involvement throughout the semester, far beyond the expectations that have been laid out by the instructor.

                Secure
                Takes roles and responsibilities in project work seriously and is actively engaged. Clearly models AGILE methodologies.

                Developing
                Occasionally takes initiative on projects but is not always actively engaged. Doesn't always seek feedback.

                Beginning
                Does not participate in project work except for meetings. Cannot communicate project goals.

🏗 Portfolio Strands

The columns below represent the specific areas of focus for this standard. Collect evidence for each strand to build your overall proficiency rating.

1. Choose Select a card that matches a recent task or experience.

2. Link & Reflect Add your artifact link and write a brief growth reflection.

3. Add Custom Use the "+ Add" button to document unique experiences.

            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>
            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>
            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>
            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>

        <input type="text" id="filterSearch" placeholder="Search artifacts...">

🤲🌟 Servant Leadership

            <button class="add-btn" onclick="addNewCard('servant')">+ Add Artifact Card</button>

🤝💼 Client Relationships

            <button class="add-btn" onclick="addNewCard('client')">+ Add Artifact Card</button>

👥🏗 Team Building

            <button class="add-btn" onclick="addNewCard('team')">+ Add Artifact Card</button>

📣🎯 Brand Ambassador

            <button class="add-btn" onclick="addNewCard('brand')">+ Add Artifact Card</button>


File created successfully at: /Users/russgoerend/Desktop/Portfolio HTMLs/v2/Standard1.html (file state is current in your context — no need to Read it back)

<!DOCTYPE html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APEX Portfolio | Standard 1: Servant Leadership</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">

📌 Work Queue

        <button id="closeSidebar">×</button>

No items yet. Bookmark an artifact card to add it here.

            Dashboard

                <button class="nav-drop-btn active">Portfolio ▾</button>

                    S1 · Servant Leadership
                    S2 · Beyond GPA
                    S3 · Career Exploration
                    S4 · Technical Skills
                    S5 · Professional Skills

            📋 Check-In

            <button id="sidebarToggle" style="color:rgba(255,255,255,0.9);font-size:0.8rem;font-weight:700;padding:8px 14px;border-radius:6px;text-transform:uppercase;letter-spacing:0.03em;transition:all 0.2s;background:none;border:none;cursor:pointer;">📌 Queue</button>

Standard 1: Servant Leadership & Client Relationships

Documenting professional growth, client communication, and community impact.

        📊 S1 Servant Leadership Proficiency Indicators

                Exceeds
                Associate has displayed immense involvement throughout the semester, far beyond the expectations that have been laid out by the instructor.

                Secure
                Takes roles and responsibilities in project work seriously and is actively engaged. Clearly models AGILE methodologies.

                Developing
                Occasionally takes initiative on projects but is not always actively engaged. Doesn't always seek feedback.

                Beginning
                Does not participate in project work except for meetings. Cannot communicate project goals.

🏗 Portfolio Strands

The columns below represent the specific areas of focus for this standard. Collect evidence for each strand to build your overall proficiency rating.

1. Choose Select a card that matches a recent task or experience.

2. Link & Reflect Add your artifact link and write a brief growth reflection.

3. Add Custom Use the "+ Add" button to document unique experiences.

            <button class="chip active" data-filter="all" onclick="setFilter('all', this)">All</button>
            <button class="chip" data-filter="not-started" onclick="setFilter('not-started', this)">Not Started</button>
            <button class="chip" data-filter="in-progress" onclick="setFilter('in-progress', this)">In Progress</button>
            <button class="chip" data-filter="done" onclick="setFilter('done', this)">Done</button>

        <input type="text" id="filterSearch" placeholder="Search artifacts...">

🤲🌟 Servant Leadership

            <button class="add-btn" onclick="addNewCard('servant')">+ Add Artifact Card</button>

🤝💼 Client Relationships

            <button class="add-btn" onclick="addNewCard('client')">+ Add Artifact Card</button>

👥🏗 Team Building

            <button class="add-btn" onclick="addNewCard('team')">+ Add Artifact Card</button>

📣🎯 Brand Ambassador

            <button class="add-btn" onclick="addNewCard('brand')">+ Add Artifact Card</button>


Create v2/ folder structure and core shared JS files (auth.js, api.js, config.js)

Write Apps Script and give deploy instructions

Build Standard1.html as the Phase 1 reference implementation

Building Standard1.html reference implementation


TodoWrite

Create v2/ folder structure and core shared JS files (auth.js, api.js, config.js)

Write Apps Script and give deploy instructions

Build Standard1.html as the Phase 1 reference implementation

Building Standard1.html reference implementation


Todos have been modified successfully. Ensure that you continue to use the todo list to track your progress. Please proceed with the current tasks if applicable


Phase 1 reference implementation is done. Here's the v2 folder so far:

```
v2/
├── js/
│   ├── config.js          — SCRIPT_URL + constants (already has your URL)
│   ├── auth.js            — getCurrentUser() stub
│   ├── api.js             — all backend calls
│   └── apex-kanban-v2.js  — kanban engine with sync
├── Standard1.html         — reference implementation
└── APPS_SCRIPT.js         — the script you deployed
```

**How Standard 1 v2 behaves differently from v1:**
- Page loads instantly from localStorage as always
- ~500ms later, quietly checks the backend — if you filled in artifacts on a different device, it re-renders with that fresher data
- Every save writes to localStorage immediately, then syncs to the Sheet 3 seconds after the last keystroke
- Your name appears in the nav (pulled from `getCurrentUser()`)

Open [v2/Standard1.html](v2/Standard1.html) in your browser and try it — fill in a card, check the Sheet to see the row appear. Once you confirm it's working, we move on to Standard 2–5, then the Portfolio home, Check-In Log, and the rest of Phase 1.


<ide_opened_file>The user opened the file /Users/russgoerend/Desktop/Portfolio HTMLs/v2/Standard1.html in the IDE. This may or may not be related to the current task.</ide_opened_file>

I'm going to pick this up tomorrow at work. Same setup in VS Code, same extensions etc. Does this chat sync over there as well? If not, how do I make it do that? Thanks


The user is asking whether the Claude Code chat history syncs between their home setup and their work setup. This is a question about how Claude Code works - specifically about conversation history syncing.

Let me think about this carefully. Claude Code is a CLI tool / VS Code extension. The conversation history in Claude Code does NOT automatically sync between devices. Each new conversation starts fresh.

However, what DOES persist is:
1. The memory files we've been building in `~/.claude/projects/...` - these are local files that would need to be on both machines
2. The project files themselves (the HTML files on the Desktop)

For the conversation itself - no, it doesn't sync.

Each session is independent, but the memory system we've built means the important context will carry forward to the next conversation. The memory files live in a local directory under `~/.claude/`, and the project files themselves are stored on the Desktop, so for this to work across both computers, they'd need to either be on a shared drive or manually copied over.

The real question is whether the Portfolio HTML files are accessible from work and whether Claude Code is installed there with the same account. The memory files won't automatically sync between machines since they're stored locally as files, not in the cloud, so I need to understand their setup better to figure out what actually needs to happen for continuity. I need to clarify what syncs and what doesn't so they can set up their work machine properly. The conversation history won't carry over to a new session, but the memory files I build will persist if they're accessible on the work machine—so I'll have context about the project. The real question is whether their Portfolio folder and the Claude memory directory are synced across machines or if they need to manually copy them, plus whether they're using the same Anthropic account on both machines.


The chat itself doesn't sync — Claude Code conversations are local to each session. When you open a new one at work tomorrow, it starts fresh.

**What does carry over:** the memory files we've been building. Those are stored at `~/.claude/` on your machine and give me project context at the start of every new conversation — what we're building, your preferences, the architecture decisions, everything. As long as those files are on your work machine, I'll be oriented from the first message.

**What you need to do before you leave today:**

1. **Project files** — make sure the `Portfolio HTMLs` folder (including the new `v2/` subfolder) is accessible at work. If it's on iCloud Drive or Google Drive, you're probably already fine. If not, copy it over.

2. **Memory files** — copy `~/.claude/` from this machine to your work machine. That's the whole folder at that path. The memory lives there.

3. **Same Anthropic account** — log into the Claude Code extension at work with the same account you use here.

Tomorrow, open VS Code at work, start a new Claude Code conversation, and just say something like "picking up where we left off on the APEX Portfolio v2 build." I'll read the memory, know exactly where we are, and we can jump straight back in.


Where is ~/.claude/ on the computer? How do I navigate to it?


The user wants to know how to find the `~/.claude/` directory on their Mac. This is a hidden folder (starts with `.`) so it won't be visible in Finder by default. Let me give them clear instructions.

On a Mac:
- `~` means the home folder (e.g., `/Users/russgoerend/`)
- `.claude` is a hidden folder (dot files are hidden in Finder by default)

Ways to access it:
1. In Finder: Go menu → Go to Folder → type `~/.claude`
2. In Finder: Press Cmd+Shift+. to show hidden files, then navigate to home folder

3. They can also open it directly from Terminal or VS Code if they prefer, though the Finder approach is probably easiest for someone not comfortable with the command line.


It's a hidden folder on your Mac. Easiest ways to get there:

**Option 1 — Finder (simplest)**
1. Open Finder
2. In the menu bar: **Go → Go to Folder…** (or `Cmd+Shift+G`)
3. Type `~/.claude` and hit Enter

That opens the folder directly. Then copy it to a USB drive, AirDrop it to your work machine, or drag it to Google Drive.

**Option 2 — Terminal (one command)**
```
open ~/.claude
```
That opens it in Finder instantly.

**At work**, once you have the folder, put it in the same place: your home folder with the same `.claude` name. If `.claude` already exists there (because you've used Claude Code at work before), merge the `projects/` subfolder inside rather than replacing the whole thing — you don't want to overwrite any work-machine settings.