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

The links to the APEX_Professional_Dashboard.html file are broken in all the other files in the folder. Can you fix those links?


CronCreate CronDelete CronList EnterPlanMode EnterWorktree ExitPlanMode ExitWorktree Monitor NotebookEdit PushNotification RemoteTrigger TaskOutput TaskStop TodoWrite WebFetch WebSearch


- update-config: Use this skill to configure the Claude Code harness via settings.json. Automated behaviors ("from now on when X", "each time X", "whenever X", "before/after X") require hooks configured in settings.json - the harness executes these, not Claude, so memory/preferences cannot fulfill them. Also use for: permissions ("allow X", "add permission", "move permission to"), env vars ("set X=Y"), hook troubleshooting, or any changes to settings.json/settings.local.json files. Examples: "allow npm commands", "add bq permission to global settings", "move permission to user settings", "set DEBUG=true", "when claude stops show X". For simple settings like theme/model, suggest the /config command.
- keybindings-help: Use when the user wants to customize keyboard shortcuts, rebind keys, add chord bindings, or modify ~/.claude/keybindings.json. Examples: "rebind ctrl+s", "add a chord shortcut", "change the submit key", "customize keybindings".
- simplify: Review changed code for reuse, quality, and efficiency, then fix any issues found.
- fewer-permission-prompts: Scan your transcripts for common read-only Bash and MCP tool calls, then add a prioritized allowlist to project .claude/settings.json to reduce permission prompts.
- loop: Run a prompt or slash command on a recurring interval (e.g. /loop 5m /foo, defaults to 10m) - When the user wants to set up a recurring task, poll for status, or run something repeatedly on an interval (e.g. "check the deploy every 5 minutes", "keep running /babysit-prs"). Do NOT invoke for one-off tasks.
- claude-api: Build, debug, and optimize Claude API / Anthropic SDK apps. Apps built with this skill should include prompt caching. Also handles migrating existing Claude API code between Claude model versions (4.5 → 4.6, 4.6 → 4.7, retired-model replacements).
TRIGGER when: code imports `anthropic`/`@anthropic-ai/sdk`; user asks for the Claude API, Anthropic SDK, or Managed Agents; user adds/modifies/tunes a Claude feature (caching, thinking, compaction, tool use, batch, files, citations, memory) or model (Opus/Sonnet/Haiku) in a file; questions about prompt caching / cache hit rate in an Anthropic SDK project.
SKIP: file imports `openai`/other-provider SDK, filename like `*-openai.py`/`*-generic.py`, provider-neutral code, general programming/ML.
- init: Initialize a new CLAUDE.md file with codebase documentation
- review: Review a pull request
- security-review: Complete a security review of the pending changes on the current branch


Fix broken links to APEX Professional Dashboard


The user wants me to fix broken links to `APEX_Professional_Dashboard.html` in other files in the folder. Let me first look at what files are in the folder and then check the links.


Let me start by listing all files in the folder to understand what we're working with.


Bash

List files in Portfolio HTMLs folder


APEX Background Info
APEX Professional Dashboard.html
APEX Vertical.png
APEX_Professional_Dashboard.html
APEX_Professional_Portfolio.html
APEX_Review_Prep.html
Marketing Analytics Playbook.html
Project Task Boards.html
Social Media Playbook.html
Standard1.html
Standard3.html
Standard4.html
Standard4DCS.html
Standard5.html
Video Production Playbook.html


I see there are two files: `APEX Professional Dashboard.html` (with space) and `APEX_Professional_Dashboard.html` (with underscores). The user says the links are broken in other files. Let me search for all links to any version of the dashboard file in the other HTML files.


I can see there are two versions of the file — one with spaces and one with underscores. Let me search all other HTML files for links to the dashboard.


grep -rn "Dashboard\|APEX_Professional\|APEX Professional" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html" -l

Find HTML files containing links to the dashboard


/Users/russgoerend/Desktop/Portfolio HTMLs/APEX Professional Dashboard.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html
/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html


grep -rn "Dashboard\|APEX_Professional\|APEX Professional" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html" | grep -v "^/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html:" | grep -v "^/Users/russgoerend/Desktop/Portfolio HTMLs/APEX Professional Dashboard.html:" | grep "href\|src\|link"

Find all href/src/link references to dashboard in other files


/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:321:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard1.html:325:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html:820:
/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html:825:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html:826:            Portfolio
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html:161:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard3.html:165:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html:107:
/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html:111:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Project Task Boards.html:112:            Portfolio
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html:138:
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Review_Prep.html:143:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html:653:
/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html:658:                Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Social Media Playbook.html:659:                Portfolio
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:235:
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Portfolio.html:240:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html:159:
/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html:164:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Marketing Analytics Playbook.html:165:            Portfolio
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:226:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard5.html:230:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:252:
/Users/russgoerend/Desktop/Portfolio HTMLs/Standard4.html:256:            Dashboard


Now I can see the issue. Most files link to `APEX Professional Dashboard.html` (with spaces), but the correct file is `APEX_Professional_Dashboard.html` (with underscores). The `APEX_Review_Prep.html` already correctly links to `APEX_Professional_Dashboard.html`.

I need to update all the files that link to `APEX Professional Dashboard.html` to instead link to `APEX_Professional_Dashboard.html`.

Files to fix:
1. Standard1.html - 2 occurrences

2. Video Production Playbook.html - 2 occurrences
3. Standard3.html - 2 occurrences
4. Project Task Boards.html - 2 occurrences
5. Social Media Playbook.html - 2 occurrences
6. APEX_Professional_Portfolio.html - 2 occurrences
7. Marketing Analytics Playbook.html - 2 occurrences
8. Standard5.html - 2 occurrences
9. Standard4.html - 2 occurrences

I'm realizing there's also an actual file named `APEX Professional Dashboard.html` with spaces, so I need to figure out whether these links should point to the spaced version or the underscored version.

The user mentioned the links to `APEX_Professional_Dashboard.html` are broken, which suggests the current links are pointing to the wrong file. Looking at what the user opened in the IDE, it seems `APEX_Professional_Dashboard.html` with underscores is the correct one. So the issue is that other files are linking to `APEX Professional Dashboard.html` with spaces when they should be linking to the underscored version instead.

I'll use a find-and-replace command to update all the files at once and fix these broken links across the entire folder.


The issue is clear: most files link to `APEX Professional Dashboard.html` (with spaces) but the correct file is `APEX_Professional_Dashboard.html` (with underscores). I'll update all 9 affected files.


cd "/Users/russgoerend/Desktop/Portfolio HTMLs" && for f in "Standard1.html" "Video Production Playbook.html" "Standard3.html" "Project Task Boards.html" "Social Media Playbook.html" "APEX_Professional_Portfolio.html" "Marketing Analytics Playbook.html" "Standard5.html" "Standard4.html"; do
  sed -i '' 's/APEX Professional Dashboard\.html/APEX_Professional_Dashboard.html/g' "$f"
  echo "Fixed: $f"
done

Replace all space-based dashboard links with underscore version


The links to the APEX_Professional_Dashboard.html file are broken in all the other files in the folder. Can you fix those links?


Fixed: Standard1.html
Fixed: Video Production Playbook.html
Fixed: Standard3.html
Fixed: Project Task Boards.html
Fixed: Social Media Playbook.html
Fixed: APEX_Professional_Portfolio.html
Fixed: Marketing Analytics Playbook.html
Fixed: Standard5.html
Fixed: Standard4.html


grep -rn "APEX Professional Dashboard\.html" "/Users/russgoerend/Desktop/Portfolio HTMLs/" --include="*.html"

Verify no remaining broken links


/Users/russgoerend/Desktop/Portfolio HTMLs/APEX Professional Dashboard.html:372:            Dashboard
/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html:372:            Dashboard


The remaining occurrences are:
1. Inside `APEX Professional Dashboard.html` (the old file with spaces) - that's the file itself linking to itself
2. Inside `APEX_Professional_Dashboard.html` - the correct file linking to `APEX Professional Dashboard.html`

The second one is interesting - the `APEX_Professional_Dashboard.html` file has a self-referencing link that points to `APEX Professional Dashboard.html` (with spaces). I should fix that to point to itself (`APEX_Professional_Dashboard.html`).

Let me check what that link looks like in context.


The correct file `APEX_Professional_Dashboard.html` still has one broken self-link inside it. Let me fix that too.


grep -n "APEX Professional Dashboard" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html"

Check the remaining broken link in the dashboard file


6:    <title>APEX Professional Dashboard</title>
372:            Dashboard


sed -i '' 's/href="APEX Professional Dashboard\.html"/href="APEX_Professional_Dashboard.html"/g' "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html"

Fix the self-link in the dashboard file


(Bash completed with no output)


All links are fixed. Updated 9 files that were pointing to `APEX Professional Dashboard.html` (with spaces) — they now all point to `APEX_Professional_Dashboard.html` (with underscores). The self-referencing nav link inside `APEX_Professional_Dashboard.html` itself was also corrected.


On the Dashboard, please remove the Portfolio Standards section. It's duplicative and doesn't need to be on the dashboard homepage


[Image: original 2516x1498, displayed at 2000x1191. Multiply coordinates by 1.26 to map to original image.]


The user wants to remove the "Portfolio Standards" / "Core standard access" section from the APEX_Professional_Dashboard.html file. Let me read that file to find the relevant section.


Let me find the Portfolio Standards section in the dashboard file.


grep -n "Portfolio Standards\|Core standard access\|standard-access\|standards-section" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html"

Find Portfolio Standards section in dashboard


463:            Portfolio Standards
464:
Core standard access


458

459

460
461

462

463	            Portfolio Standards
464
Core standard access

465

466

467
468

469
470	            Standard 1
471
Servant Leadership & Client Relationships

472
Documenting community impact, professional communication, and project stewardship.

473
In Progress

474
475
476
477	            Standard 2
478
Professionalism & Ethics

479
Demonstrating integrity, punctuality, and professional workplace behaviors.

480
In Progress

481
482
483
484	            Standard 3
485
Critical Thinking & Problem Solving

486
Applying analytical skills to complex projects and navigating roadblocks effectively.

487
In Progress

488
489
490
491	            Standard 4
492
Technical & Digital Skills

493
Mastering industry-specific tools and platforms relevant to your APEX strand.

494
In Progress

495
496
497
498	            Standard 5
499
Communication & Collaboration

500
Effective team dynamics and clear, concise communication across all channels.

501
In Progress

502
503

504
505
506	        © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence
507
508

509
510
Profile Saved ✓

511
512

            Portfolio Standards

Core standard access

            Standard 1

Servant Leadership & Client Relationships

Documenting community impact, professional communication, and project stewardship.

In Progress

            Standard 2

Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

In Progress

            Standard 3

Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

In Progress

            Standard 4

Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

In Progress

            Standard 5

Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

In Progress

        © 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence

Profile Saved ✓


I can see the section clearly. It runs from line 461 (the `<div class="section-header"` with margin-top: 10px) through line 503 (closing `</div>` of the standards-grid). I need to remove lines 461-503.


Edit

            Portfolio Standards

Core standard access

            Standard 1

Servant Leadership & Client Relationships

Documenting community impact, professional communication, and project stewardship.

In Progress

            Standard 2

Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

In Progress

            Standard 3

Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

In Progress

            Standard 4

Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

In Progress

            Standard 5

Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

In Progress


The file /Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html has been updated successfully. (file state is current in your context — no need to Read it back)

            Portfolio Standards

Core standard access

            Standard 1

Servant Leadership & Client Relationships

Documenting community impact, professional communication, and project stewardship.

In Progress

            Standard 2

Professionalism & Ethics

Demonstrating integrity, punctuality, and professional workplace behaviors.

In Progress

            Standard 3

Critical Thinking & Problem Solving

Applying analytical skills to complex projects and navigating roadblocks effectively.

In Progress

            Standard 4

Technical & Digital Skills

Mastering industry-specific tools and platforms relevant to your APEX strand.

In Progress

            Standard 5

Communication & Collaboration

Effective team dynamics and clear, concise communication across all channels.

In Progress

-    <div class="section-header" style="margin-top: 10px;">

-        <a href="Standard1.html" class="standard-card">

-
Servant Leadership & Client Relationships

-
Documenting community impact, professional communication, and project stewardship.

-        <a href="Standard2.html" class="standard-card">

-
Demonstrating integrity, punctuality, and professional workplace behaviors.

-        <a href="Standard3.html" class="standard-card">

-
Applying analytical skills to complex projects and navigating roadblocks effectively.

-        <a href="Standard4.html" class="standard-card">

-
Mastering industry-specific tools and platforms relevant to your APEX strand.

-        <a href="Standard5.html" class="standard-card">

-
Effective team dynamics and clear, concise communication across all channels.

© 2026 Waukee APEX Aspiring Professional Portfolio | Built for Excellence


The "Portfolio Standards / Core standard access" section has been removed from the dashboard. The footer now follows directly after the previous section.


Love it. Great work.


Thanks! Happy to help.


On this dashboard page, I'd like the current cards sorted into three categories:

- Portfolio (APEX Professional Portfolio + Review Prep)
- Task Boards
- Playbooks

Can you rearrange those links?


On this dashboard page, I'd like the current cards sorted into three categories:  - Portfolio (APEX Professional Portfolio + Review Prep) - Task Boards - Playbooks  Can you rearrange those links?


The user wants to reorganize the cards on the dashboard into three categories. Let me first look at the current state of the dashboard to see what cards/links are there.


Let me read the relevant section of the dashboard to see the current card layout.


Bash

grep -n "card\|href\|section-header\|section-title\|section-tag" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html" | head -80

Find card and section structure in dashboard


7:    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
14:            --card-bg: #FFFFFF;
116:        .profile-card {
131:        .profile-card div:first-child { font-size: 2.4rem; }
146:        .section-header {
154:        .section-tag {
167:        .section-title {
185:        .standard-card {
186:            background: var(--card-bg);
199:        .standard-card:hover {
258:            background: var(--card-bg);
368:
372:            Dashboard
373:            Portfolio
374:            Video Playbook
375:            Social Media
399:

408:

410:                Quick Access
411:
Jump to your workspace

417:
424:
431:
438:
445:
452:
540:                ${item.title}


406
407

408

409

410	                Quick Access
411
Jump to your workspace

412
Open the APEX Professional Portfolio, launch a playbook, or go straight to the project task boards from one central page.

413

414

415
416

417
418	                Performance Review
419
📋 Review Prep

420
Select your best artifacts, rate yourself on each standard, write your reflections and goals, then print or copy for your review conversation.

421
Open Review Prep

422
423
424
425	                Portfolio
426
APEX Professional Portfolio

427
Review evidence, standards progress, and portfolio artifacts across your APEX work.

428
Open Portfolio

429
430
431
432	                Playbook
433
Video Production Workflow

434
Access the full video project playbook and open its built-in project task board from the page.

435
Open Playbook

436
437
438
439	                Playbook
440
Social Media Workflow

441
Launch the social media playbook and manage your project tasks in the playbook task board.

442
Open Playbook

443
444
445
446	                Playbook
447
Marketing Analytics Workflow

448
Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

449
Open Playbook

450
451
452
453	                Task Boards
454
Project Task Boards

455
Open either playbook, then use the task board button inside to track project tasks locally.

456
Open Any Task Board

457
458

459

460

                Quick Access

Jump to your workspace

Open the APEX Professional Portfolio, launch a playbook, or go straight to the project task boards from one central page.

                Performance Review

📋 Review Prep

Select your best artifacts, rate yourself on each standard, write your reflections and goals, then print or copy for your review conversation.

Open Review Prep

                Portfolio

APEX Professional Portfolio

Review evidence, standards progress, and portfolio artifacts across your APEX work.

Open Portfolio

                Playbook

Video Production Workflow

Access the full video project playbook and open its built-in project task board from the page.

Open Playbook

                Playbook

Social Media Workflow

Launch the social media playbook and manage your project tasks in the playbook task board.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

                Task Boards

Project Task Boards

Open either playbook, then use the task board button inside to track project tasks locally.

Open Any Task Board


I can see the current cards:
1. Review Prep (APEX_Review_Prep.html) - labeled "Performance Review"
2. APEX Professional Portfolio (APEX_Professional_Portfolio.html) - labeled "Portfolio"
3. Video Production Workflow (Video Production Playbook.html) - labeled "Playbook"
4. Social Media Workflow (Social Media Playbook.html) - labeled "Playbook"
5. Marketing Analytics Workflow (Marketing Analytics Playbook.html) - labeled "Playbook"
6. Project Task Boards (Social Media Playbook.html) - labeled "Task Boards" — note this links to Social Media Playbook.html which seems wrong, but let me not fix that unless asked

I notice there's a `Project Task Boards.html` file that the last card should probably link to, but since the user only asked to reorganize, I'll leave the links as they are. Now I need to restructure the dashboard into three groups: Portfolio (with Review Prep and Professional Portfolio), Task Boards (standalone), and Playbooks (the three workflow cards). I'll replace the single grid with three separate sections, each with its own header.

Restructuring the HTML layout...


I can see the current cards. I'll also note the last "Task Boards" card incorrectly links to `Social Media Playbook.html` — I'll fix that to `Project Task Boards.html` while reorganizing. Here's the new structure:


Edit

                Performance Review

📋 Review Prep

Select your best artifacts, rate yourself on each standard, write your reflections and goals, then print or copy for your review conversation.

Open Review Prep

                Portfolio

APEX Professional Portfolio

Review evidence, standards progress, and portfolio artifacts across your APEX work.

Open Portfolio

                Playbook

Video Production Workflow

Access the full video project playbook and open its built-in project task board from the page.

Open Playbook

                Playbook

Social Media Workflow

Launch the social media playbook and manage your project tasks in the playbook task board.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

                Task Boards

Project Task Boards

Open either playbook, then use the task board button inside to track project tasks locally.

Open Any Task Board

Portfolio

                Portfolio

APEX Professional Portfolio

Review evidence, standards progress, and portfolio artifacts across your APEX work.

Open Portfolio

                Performance Review

📋 Review Prep

Select your best artifacts, rate yourself on each standard, write your reflections and goals, then print or copy for your review conversation.

Open Review Prep

Task Boards

                Task Boards

Project Task Boards

Track project tasks locally across all your APEX work in one central task board hub.

Open Task Boards

Playbooks

                Playbook

Video Production Workflow

Access the full video project playbook and open its built-in project task board from the page.

Open Playbook

                Playbook

Social Media Workflow

Launch the social media playbook and manage your project tasks in the playbook task board.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook


                Performance Review

📋 Review Prep

Select your best artifacts, rate yourself on each standard, write your reflections and goals, then print or copy for your review conversation.

Open Review Prep

                Portfolio

APEX Professional Portfolio

Review evidence, standards progress, and portfolio artifacts across your APEX work.

Open Portfolio

                Playbook

Video Production Workflow

Access the full video project playbook and open its built-in project task board from the page.

Open Playbook

                Playbook

Social Media Workflow

Launch the social media playbook and manage your project tasks in the playbook task board.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

                Task Boards

Project Task Boards

Open either playbook, then use the task board button inside to track project tasks locally.

Open Any Task Board

Portfolio

                Portfolio

APEX Professional Portfolio

Review evidence, standards progress, and portfolio artifacts across your APEX work.

Open Portfolio

                Performance Review

📋 Review Prep

Select your best artifacts, rate yourself on each standard, write your reflections and goals, then print or copy for your review conversation.

Open Review Prep

Task Boards

                Task Boards

Project Task Boards

Track project tasks locally across all your APEX work in one central task board hub.

Open Task Boards

Playbooks

                Playbook

Video Production Workflow

Access the full video project playbook and open its built-in project task board from the page.

Open Playbook

                Playbook

Social Media Workflow

Launch the social media playbook and manage your project tasks in the playbook task board.

Open Playbook

                Playbook

Marketing Analytics Workflow

Open the analytics playbook for data-driven client strategy, reporting, and campaign insight.

Open Playbook

+            <a href="APEX_Professional_Portfolio.html" class="standard-card">

+
Review evidence, standards progress, and portfolio artifacts across your APEX work.

<a href="APEX_Review_Prep.html" class="standard-card" style="border-top: 3px solid #500778;">

-            <a href="APEX_Professional_Portfolio.html" class="standard-card">

-
Review evidence, standards progress, and portfolio artifacts across your APEX work.

+            <a href="Project Task Boards.html" class="standard-card">

+
Track project tasks locally across all your APEX work in one central task board hub.

<a href="Video Production Playbook.html" class="standard-card">

-            <a href="Social Media Playbook.html" class="standard-card">

-
Open either playbook, then use the task board button inside to track project tasks locally.


Now let me add the CSS for the category labels:


Bash

grep -n "\.section-title\|\.dashboard-grid\|\.standards-grid" "/Users/russgoerend/Desktop/Portfolio HTMLs/APEX_Professional_Dashboard.html" | head -20

Find where to add category-label CSS


167:        .section-title {
176:        .dashboard-grid,
177:        .standards-grid {
182:        .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 40px; }
183:        .standards-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }


167	        .section-title {
168	            margin: 0;
169	            font-size: 1.45rem;
170	            font-weight: 800;
171	            color: var(--primary);
172	        }
173
174	        .section-copy { color: var(--text-sub); line-height: 1.7; margin: 0; }
175
176	        .dashboard-grid,
177	        .standards-grid {
178	            display: grid;
179	            gap: 25px;
180	        }
181
182	        .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 40px; }
183	        .standards-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
184

        .section-title {
            margin: 0;
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--primary);
        }

        .section-copy { color: var(--text-sub); line-height: 1.7; margin: 0; }

        .dashboard-grid,
        .standards-grid {
            display: grid;
            gap: 25px;
        }

        .dashboard-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 40px; }
        .standards-grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }


Edit

.section-copy { color: var(--text-sub); line-height: 1.7; margin: 0; }

        .section-copy { color: var(--text-sub); line-height: 1.7; margin: 0; }

        .category-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-sub);
            margin: 28px 0 12px;
        }


        .section-copy { color: var(--text-sub); line-height: 1.7; margin: 0; }

        .category-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-sub);
            margin: 28px 0 12px;
        }


Done. The cards are now grouped into three labeled sections:

- **Portfolio** — APEX Professional Portfolio + Review Prep
- **Task Boards** — Project Task Boards (also fixed the broken link that was pointing to Social Media Playbook by mistake)
- **Playbooks** — Video Production, Social Media, and Marketing Analytics


If a student-associate ends up on multiple projects of the same type (video, social media, marketing) are they able to duplicate the playbook? What would be the best way to handle that UI/UX-wise?


The user is asking a design/UX question about whether students can duplicate playbooks if they're working on multiple projects of the same type. This is an exploratory question, so I should respond in 2-3 sentences with a recommendation and the main tradeoff.

Let me think about what the current playbooks look like - they're single HTML files. If a student is on two video projects, they'd have one Video Production Playbook.html file. The question is how to handle multiple instances.

Options:
1. Let students duplicate the HTML file and rename it (manual, low-tech)
2. Add a project selector/switcher inside the playbook that stores separate state per project in localStorage

3. Add a "New Project" button on the dashboard that creates named instances

The cleanest approach would be a project switcher built into each playbook type, where localStorage keys are namespaced by project name or ID so students can create and switch between multiple projects of the same type without needing to duplicate files. I should give a concise recommendation highlighting the main tradeoff.


Currently there's no way to do that — each playbook is a single file with one set of localStorage state, so a second video project would overwrite the first.

The cleanest approach would be a **project switcher** built into each playbook: a dropdown at the top where students can create named projects (e.g. "Client Video – Spring" vs. "Documentary – Fall"), with localStorage keyed per project name. No file duplication needed, and all projects stay accessible from one place.

The tradeoff is build complexity vs. a simpler alternative: just letting students duplicate the HTML file from the dashboard (a "New Project" button that copies the template). Duplication is much easier to implement but means managing multiple files and the dashboard would need to track them dynamically — which is harder without a backend.

If these are entirely local/offline HTML files with no server, the **project switcher with namespaced localStorage** is the right call. Want me to build that out for one playbook as a prototype?


Yes, please build out the project switcher with namespaced localStorage for the video production playbook


The user wants me to build a project switcher with namespaced localStorage for the Video Production Playbook. Let me first read the current state of that file to understand its structure.


Let me read the Video Production Playbook to understand its full structure before building anything.


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


Error: File content (35573 tokens) exceeds maximum allowed tokens (25000). Use offset and limit parameters to read specific portions of the file, or search for specific content instead of reading the whole file.


/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


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>DCS Playbook | Video Production</title>
7	    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
8	    <style>
9	        :root {
10	            --primary: #500778;
11	            --secondary: #c4d600;
12	            --accent: #4b4f54;
13	            --bg: #F3F4F6;
14	            --card-bg: #FFFFFF;
15	            --text-main: #1F2937;
16	            --text-sub: #6B7280;
17	            --nav-height: 70px;
18	            --sidebar-width: 270px;
19	            /* Phase colors */
20	            --pre:  #7c3aed;
21	            --prod: #0891b2;
22	            --post: #059669;
23	        }
24
25	        *, *::before, *::after { box-sizing: border-box; }
26
27	        body {
28	            font-family: 'Inter', 'Segoe UI', sans-serif;
29	            background: var(--bg);
30	            color: var(--text-main);
31	            margin: 0;
32	            padding-top: var(--nav-height);
33	        }
34
35	        /* ── NAV ── */
36	        .main-nav {
37	            background: var(--primary);
38	            height: var(--nav-height);
39	            width: 100%;
40	            position: fixed;
41	            top: 0; left: 0;
42	            z-index: 1000;
43	            display: flex;
44	            align-items: center;
45	            border-bottom: 4px solid var(--secondary);
46	            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
47	        }
48	        .nav-container {
49	            max-width: 1400px;
50	            margin: 0 auto;
51	            width: 100%;
52	            display: flex;
53	            justify-content: space-between;
54	            align-items: center;
55	            padding: 0 20px;
56	        }
57	        .nav-logo-link {
58	            display: flex; align-items: center; text-decoration: none;
59	            height: calc(var(--nav-height) - 15px);
60	        }
61	        .nav-logo-img { height: 100%; width: auto; }
62	        .nav-links { display: flex; gap: 8px; align-items: center; }
63	        .nav-links a {
64	            color: rgba(255,255,255,0.9);
65	            text-decoration: none;
66	            font-size: 0.78rem;
67	            font-weight: 700;
68	            padding: 7px 12px;
69	            border-radius: 6px;
70	            text-transform: uppercase;
71	            letter-spacing: 0.03em;
72	            transition: all 0.2s;
73	        }
74	        .nav-links a:hover { color: var(--secondary); background: rgba(255,255,255,0.1); }
75	        .nav-links a.active { background: var(--secondary); color: var(--primary); }
76	        .nav-playbook-label {
77	            color: var(--secondary);
78	            font-size: 0.72rem;
79	            font-weight: 800;
80	            text-transform: uppercase;
81	            letter-spacing: 0.08em;
82	            padding: 4px 10px;
83	            border: 1px solid rgba(196,214,0,0.4);
84	            border-radius: 4px;
85	            margin-right: 8px;
86	        }
87
88	        /* ── LAYOUT ── */
89	        .app-shell {
90	            display: flex;
91	            min-height: calc(100vh - var(--nav-height));
92	        }
93
94	        /* ── SIDEBAR ── */
95	        .sidebar {
96	            width: var(--sidebar-width);
97	            min-width: var(--sidebar-width);
98	            background: white;
99	            border-right: 1px solid #E5E7EB;
100	            position: sticky;

/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DCS Playbook | Video Production</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;
            /* Phase colors */
            --pre:  #7c3aed;
            --prod: #0891b2;
            --post: #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;


Bash

wc -l "/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html"

Get line count of Video Production Playbook


2322 /Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


Read

/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


100	            position: sticky;
101	            top: var(--nav-height);
102	            height: calc(100vh - var(--nav-height));
103	            overflow-y: auto;
104	            display: flex;
105	            flex-direction: column;
106	        }
107	        .sidebar-header {
108	            padding: 20px 18px 14px;
109	            border-bottom: 1px solid #E5E7EB;
110	        }
111	        .sidebar-title {
112	            font-size: 0.72rem;
113	            font-weight: 800;
114	            text-transform: uppercase;
115	            letter-spacing: 0.1em;
116	            color: var(--text-sub);
117	            margin-bottom: 2px;
118	        }
119	        .project-manager {
120	            margin: 16px 0 12px;
121	            display: grid;
122	            gap: 12px;
123	        }
124	        .project-manager select {
125	            width: 100%;
126	            border: 1px solid #E5E7EB;
127	            border-radius: 12px;
128	            padding: 10px 12px;
129	            font-size: 0.95rem;
130	            color: var(--text-main);
131	            background: white;
132	            appearance: none;
133	        }
134	        .project-actions {
135	            display: flex;
136	            gap: 10px;
137	            flex-wrap: wrap;
138	        }
139	        .btn-small {
140	            border: none;
141	            border-radius: 999px;
142	            background: var(--primary);
143	            color: white;
144	            font-weight: 700;
145	            padding: 10px 14px;
146	            cursor: pointer;
147	            transition: background 0.2s ease;
148	        }
149	        .btn-small:hover { background: #3b0465; }
150	        .sidebar-project-name {
151	            font-size: 1rem;
152	            font-weight: 800;
153	            color: var(--primary);
154	            white-space: nowrap;
155	            overflow: hidden;
156	            text-overflow: ellipsis;
157	        }
158	        .progress-bar-wrap {
159	            margin-top: 10px;
160	            background: #E5E7EB;
161	            border-radius: 4px;
162	            height: 6px;
163	            overflow: hidden;
164	        }
165	        .progress-bar-fill {
166	            height: 100%;
167	            background: var(--secondary);
168	            border-radius: 4px;
169	            transition: width 0.4s;
170	        }
171	        .progress-label {
172	            font-size: 0.72rem;
173	            color: var(--text-sub);
174	            margin-top: 4px;
175	        }
176
177	        .phase-group { padding: 10px 0; border-bottom: 1px solid #F3F4F6; }
178	        .phase-label {
179	            font-size: 0.68rem;
180	            font-weight: 800;
181	            text-transform: uppercase;
182	            letter-spacing: 0.1em;
183	            padding: 6px 18px 4px;
184	            display: flex;
185	            align-items: center;
186	            gap: 6px;
187	        }
188	        .phase-label.pre  { color: var(--pre); }
189	        .phase-label.prod { color: var(--prod); }
190	        .phase-label.post { color: var(--post); }
191
192	        .step-btn {
193	            display: flex;
194	            align-items: center;
195	            gap: 10px;
196	            width: 100%;
197	            padding: 8px 18px;
198	            background: none;
199	            border: none;
200	            cursor: pointer;
201	            text-align: left;
202	            font-family: inherit;
203	            font-size: 0.82rem;
204	            color: var(--text-main);
205	            border-left: 3px solid transparent;
206	            transition: all 0.15s;
207	        }
208	        .step-btn:hover { background: #F9FAFB; }
209	        .step-btn.active {
210	            background: #FBF5FF;
211	            border-left-color: var(--primary);
212	            color: var(--primary);
213	            font-weight: 700;
214	        }
215	        .step-btn.done .step-icon { opacity: 0.5; }
216	        .step-btn.checkpoint { font-style: italic; }
217	        .step-check {
218	            width: 18px; height: 18px;
219	            border-radius: 50%;
220	            border: 2px solid #D1D5DB;
221	            flex-shrink: 0;
222	            display: flex; align-items: center; justify-content: center;
223	            font-size: 0.6rem;
224	            color: white;
225	            transition: all 0.2s;
226	        }
227	        .step-btn.done .step-check {
228	            background: var(--post);
229	            border-color: var(--post);
230	        }
231	        .step-btn.done .step-check::after { content: '✓'; }
232	        .step-name { flex: 1; line-height: 1.3; }
233
234	        .sidebar-footer {
235	            margin-top: auto;
236	            padding: 14px 16px;
237	            border-top: 1px solid #E5E7EB;
238	        }
239	        .task-board-btn {
240	            width: 100%;
241	            padding: 10px;
242	            background: var(--primary);
243	            color: white;
244	            border: none;
245	            border-radius: 8px;
246	            font-family: inherit;
247	            font-weight: 700;
248	            font-size: 0.82rem;
249	            cursor: pointer;
250	            transition: background 0.2s;
251	            display: flex; align-items: center; justify-content: center; gap: 8px;
252	        }
253	        .task-board-btn:hover { background: #3d0560; }
254	        .task-board-note,
255	        .phase-note {
256	            margin-top: 10px;
257	            font-size: 0.82rem;
258	            color: var(--text-sub);
259	            line-height: 1.4;
260	        }
261
262	        /* ── MAIN CONTENT ── */
263	        .main-content {
264	            flex: 1;
265	            padding: 36px 40px 60px;
266	            max-width: 860px;
267	        }
268
269	        /* Phase badge */
270	        .phase-badge {
271	            display: inline-flex;
272	            align-items: center;
273	            gap: 6px;
274	            padding: 4px 12px;
275	            border-radius: 20px;
276	            font-size: 0.72rem;
277	            font-weight: 800;
278	            text-transform: uppercase;
279	            letter-spacing: 0.06em;
280	            margin-bottom: 12px;
281	        }
282	        .phase-badge.pre  { background: #EDE9FE; color: var(--pre); }
283	        .phase-badge.prod { background: #E0F2FE; color: var(--prod); }
284	        .phase-badge.post { background: #DCFCE7; color: var(--post); }
285	        .phase-badge.chk  { background: #FEF3C7; color: #92400E; }
286
287	        .step-section { display: none; }
288	        .step-section.active { display: block; }
289
290	        .step-title {
291	            font-size: 2rem;
292	            font-weight: 800;
293	            color: var(--primary);
294	            margin: 0 0 6px 0;
295	            line-height: 1.15;
296	        }
297	        .step-subtitle {
298	            font-size: 1rem;
299	            color: var(--text-sub);

            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 ease;
        }
        .btn-small:hover { background: #3b0465; }
        .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); }

        .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-icon { opacity: 0.5; }
        .step-btn.checkpoint { font-style: italic; }
        .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-btn.done .step-check {
            background: var(--post);
            border-color: var(--post);
        }
        .step-btn.done .step-check::after { content: '✓'; }
        .step-name { flex: 1; line-height: 1.3; }

        .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,
        .phase-note {
            margin-top: 10px;
            font-size: 0.82rem;
            color: var(--text-sub);
            line-height: 1.4;
        }

        /* ── MAIN CONTENT ── */
        .main-content {
            flex: 1;
            padding: 36px 40px 60px;
            max-width: 860px;
        }

        /* Phase badge */
        .phase-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            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: #EDE9FE; color: var(--pre); }
        .phase-badge.prod { background: #E0F2FE; color: var(--prod); }
        .phase-badge.post { background: #DCFCE7; color: var(--post); }
        .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);


/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


300	            margin: 0 0 28px 0;
301	            line-height: 1.4;
302	        }
303
304	        /* Cards */
305	        .card {
306	            background: white;
307	            border: 1px solid #E5E7EB;
308	            border-radius: 12px;
309	            padding: 22px 24px;
310	            margin-bottom: 20px;
311	        }
312	        .card-title {
313	            font-size: 1rem;
314	            font-weight: 800;
315	            color: var(--primary);
316	            margin: 0 0 10px 0;
317	            display: flex;
318	            align-items: center;
319	            gap: 8px;
320	        }
321	        .card p { font-size: 0.9rem; line-height: 1.6; color: #374151; margin: 0 0 14px 0; }
322	        .card p:last-child { margin-bottom: 0; }
323
324	        /* Callouts */
325	        .callout {
326	            border-radius: 10px;
327	            padding: 16px 18px;
328	            margin-bottom: 20px;
329	            display: flex;
330	            gap: 14px;
331	            align-items: flex-start;
332	            font-size: 0.88rem;
333	            line-height: 1.5;
334	        }
335	        .callout-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 1px; }
336	        .callout-yellow { background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; }
337	        .callout-blue   { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E3A5F; }
338	        .callout-teal   { background: #E0F2FE; border: 1px solid #7DD3FC; color: #0C4A6E; }
339	        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
340	        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }
341
342	        /* Question lists */
343	        .question-list { list-style: none; padding: 0; margin: 10px 0 0 0; }
344	        .question-list li {
345	            padding: 9px 12px 9px 36px;
346	            position: relative;
347	            font-size: 0.88rem;
348	            line-height: 1.5;
349	            color: #374151;
350	            border-bottom: 1px solid #F3F4F6;
351	        }
352	        .question-list li:last-child { border-bottom: none; }
353	        .question-list li::before {
354	            content: '?';
355	            position: absolute;
356	            left: 10px;
357	            top: 9px;
358	            width: 18px; height: 18px;
359	            background: var(--secondary);
360	            color: var(--primary);
361	            border-radius: 50%;
362	            font-size: 0.65rem;
363	            font-weight: 900;
364	            display: flex; align-items: center; justify-content: center;
365	        }
366
367	        /* Checklist */
368	        .checklist { list-style: none; padding: 0; margin: 0; }
369	        .checklist li {
370	            display: flex;
371	            align-items: flex-start;
372	            gap: 10px;
373	            padding: 8px 0;
374	            border-bottom: 1px solid #F3F4F6;
375	            font-size: 0.88rem;
376	            line-height: 1.4;
377	            color: #374151;
378	        }
379	        .checklist li:last-child { border-bottom: none; }
380	        .checklist input[type="checkbox"] {
381	            width: 16px; height: 16px;
382	            margin-top: 2px;
383	            accent-color: var(--primary);
384	            flex-shrink: 0;
385	            cursor: pointer;
386	        }
387	        .checklist label { cursor: pointer; flex: 1; }
388	        .checklist li:has(input:checked) label { color: #9CA3AF; text-decoration: line-through; }
389
390	        /* Two-col grid */
391	        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
392	        @media (max-width: 680px) { .two-col { grid-template-columns: 1fr; } }
393
394	        /* Stat pill */
395	        .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
396	        .pill {
397	            background: #F3F4F6;
398	            border: 1px solid #E5E7EB;
399	            border-radius: 20px;
400	            padding: 5px 12px;
401	            font-size: 0.78rem;
402	            font-weight: 600;
403	            color: var(--accent);
404	        }
405	        .pill.highlight { background: #F5F3FF; border-color: #DDD6FE; color: var(--pre); }
406
407	        /* Editable field */
408	        .field-label {
409	            font-size: 0.75rem;
410	            font-weight: 700;
411	            text-transform: uppercase;
412	            letter-spacing: 0.06em;
413	            color: var(--text-sub);
414	            margin-bottom: 5px;
415	        }
416	        .field-input {
417	            width: 100%;
418	            padding: 10px 12px;
419	            border: 1px solid #D1D5DB;
420	            border-radius: 8px;
421	            font-family: inherit;
422	            font-size: 0.88rem;
423	            color: var(--text-main);
424	            background: white;
425	            transition: border-color 0.2s;
426	            outline: none;
427	            margin-bottom: 14px;
428	        }
429	        .field-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(80,7,120,0.08); }
430	        textarea.field-input { resize: vertical; min-height: 72px; }
431	        select.field-input { cursor: pointer; }
432
433	        /* Artifact capture */
434	        .artifact-zone {
435	            background: #F9FAFB;
436	            border: 2px dashed #D1D5DB;
437	            border-radius: 10px;
438	            padding: 18px 20px;
439	            margin-top: 24px;
440	        }
441	        .artifact-zone-title {
442	            font-size: 0.78rem;
443	            font-weight: 800;
444	            text-transform: uppercase;
445	            letter-spacing: 0.08em;
446	            color: var(--text-sub);
447	            margin-bottom: 12px;
448	            display: flex;
449	            align-items: center;
450	            gap: 6px;
451	        }
452	        .artifact-row { display: flex; gap: 8px; margin-bottom: 10px; }
453	        .artifact-link-input {
454	            flex: 1;
455	            padding: 9px 12px;
456	            border: 1px solid #D1D5DB;
457	            border-radius: 8px;
458	            font-family: inherit;
459	            font-size: 0.82rem;
460	            outline: none;
461	            transition: border-color 0.2s;
462	        }
463	        .artifact-link-input:focus { border-color: var(--primary); }
464	        .artifact-note-input {
465	            width: 100%;
466	            padding: 9px 12px;
467	            border: 1px solid #D1D5DB;
468	            border-radius: 8px;
469	            font-family: inherit;
470	            font-size: 0.82rem;
471	            resize: vertical;
472	            min-height: 56px;
473	            outline: none;
474	            transition: border-color 0.2s;
475	            margin-bottom: 10px;
476	        }
477	        .artifact-note-input:focus { border-color: var(--primary); }
478	        .btn-save-artifact {
479	            padding: 9px 16px;
480	            background: var(--accent);
481	            color: white;
482	            border: none;
483	            border-radius: 8px;
484	            font-family: inherit;
485	            font-size: 0.8rem;
486	            font-weight: 700;
487	            cursor: pointer;
488	            transition: background 0.2s;
489	        }
490	        .btn-save-artifact:hover { background: #333; }
491	        .btn-send-portfolio {
492	            padding: 9px 16px;
493	            background: var(--primary);
494	            color: white;
495	            border: none;
496	            border-radius: 8px;
497	            font-family: inherit;
498	            font-size: 0.8rem;
499	            font-weight: 700;

            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;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .card p { font-size: 0.9rem; line-height: 1.6; color: #374151; margin: 0 0 14px 0; }
        .card p:last-child { margin-bottom: 0; }

        /* 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-teal   { background: #E0F2FE; border: 1px solid #7DD3FC; color: #0C4A6E; }
        .callout-green  { background: #DCFCE7; border: 1px solid #86EFAC; color: #14532D; }
        .callout-purple { background: #F5F3FF; border: 1px solid #DDD6FE; color: #3B0764; }

        /* Question lists */
        .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; }

        /* Two-col grid */
        .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        @media (max-width: 680px) { .two-col { grid-template-columns: 1fr; } }

        /* Stat pill */
        .pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
        .pill {
            background: #F3F4F6;
            border: 1px solid #E5E7EB;
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--accent);
        }
        .pill.highlight { background: #F5F3FF; border-color: #DDD6FE; color: var(--pre); }

        /* Editable field */
        .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 capture */
        .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;


/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


500	            cursor: pointer;
501	            transition: background 0.2s;
502	        }
503	        .btn-send-portfolio:hover { background: #3d0560; }
504	        .artifact-saved-msg {
505	            font-size: 0.78rem;
506	            color: var(--post);
507	            font-weight: 700;
508	            display: none;
509	            margin-top: 6px;
510	        }
511
512	        /* Checkpoint card */
513	        .checkpoint-card {
514	            background: white;
515	            border: 2px solid #FDE68A;
516	            border-radius: 14px;
517	            padding: 26px 28px;
518	            margin-bottom: 20px;
519	        }
520	        .checkpoint-mentor {
521	            display: flex;
522	            align-items: center;
523	            gap: 14px;
524	            margin-bottom: 18px;
525	        }
526	        .mentor-avatar {
527	            width: 52px; height: 52px;
528	            border-radius: 50%;
529	            background: var(--secondary);
530	            display: flex; align-items: center; justify-content: center;
531	            font-size: 1.4rem;
532	            flex-shrink: 0;
533	        }
534	        .mentor-info { flex: 1; }
535	        .mentor-name { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
536	        .mentor-role { font-size: 0.82rem; color: var(--text-sub); margin-top: 1px; }
537	        .checkpoint-questions {
538	            background: #FFFBEB;
539	            border-radius: 8px;
540	            padding: 14px 16px;
541	            margin-bottom: 16px;
542	        }
543	        .checkpoint-questions h4 {
544	            font-size: 0.82rem;
545	            font-weight: 800;
546	            text-transform: uppercase;
547	            letter-spacing: 0.06em;
548	            color: #92400E;
549	            margin: 0 0 10px 0;
550	        }
551	        .checkpoint-q-list { list-style: none; padding: 0; margin: 0; }
552	        .checkpoint-q-list li {
553	            padding: 6px 0 6px 22px;
554	            position: relative;
555	            font-size: 0.88rem;
556	            color: #78350F;
557	            line-height: 1.4;
558	            border-bottom: 1px solid rgba(253,230,138,0.5);
559	        }
560	        .checkpoint-q-list li:last-child { border-bottom: none; }
561	        .checkpoint-q-list li::before {
562	            content: '→';
563	            position: absolute;
564	            left: 0;
565	            color: #D97706;
566	            font-weight: 700;
567	        }
568
569	        /* Step nav buttons */
570	        .step-nav {
571	            display: flex;
572	            justify-content: space-between;
573	            align-items: center;
574	            margin-top: 36px;
575	            padding-top: 24px;
576	            border-top: 1px solid #E5E7EB;
577	        }
578	        .btn-prev {
579	            padding: 11px 22px;
580	            background: white;
581	            border: 2px solid #E5E7EB;
582	            border-radius: 8px;
583	            font-family: inherit;
584	            font-size: 0.85rem;
585	            font-weight: 700;
586	            cursor: pointer;
587	            color: var(--accent);
588	            transition: all 0.2s;
589	        }
590	        .btn-prev:hover { border-color: var(--primary); color: var(--primary); }
591	        .btn-next {
592	            padding: 12px 28px;
593	            background: var(--primary);
594	            color: white;
595	            border: none;
596	            border-radius: 8px;
597	            font-family: inherit;
598	            font-size: 0.88rem;
599	            font-weight: 800;
600	            cursor: pointer;
601	            transition: background 0.2s;
602	            display: flex; align-items: center; gap: 8px;
603	        }
604	        .btn-next:hover { background: #3d0560; }
605
606	        /* ── TASK BOARD MODAL ── */
607	        .modal-overlay {
608	            position: fixed;
609	            inset: 0;
610	            background: rgba(0,0,0,0.5);
611	            z-index: 2000;
612	            display: none;
613	            align-items: flex-start;
614	            justify-content: flex-end;
615	            padding: 80px 20px 20px;
616	        }
617	        .modal-overlay.open { display: flex; }
618	        .task-modal {
619	            background: white;
620	            border-radius: 16px;
621	            width: 680px;
622	            max-height: calc(100vh - 100px);
623	            overflow-y: auto;
624	            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
625	            display: flex;
626	            flex-direction: column;
627	        }
628	        .task-modal-header {
629	            padding: 20px 24px 16px;
630	            border-bottom: 1px solid #E5E7EB;
631	            display: flex;
632	            justify-content: space-between;
633	            align-items: center;
634	            position: sticky;
635	            top: 0;
636	            background: white;
637	            z-index: 1;
638	        }
639	        .task-modal-header h2 { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin: 0; }
640	        .modal-close {
641	            background: none; border: none; cursor: pointer;
642	            font-size: 1.2rem; color: var(--text-sub); padding: 4px;
643	            border-radius: 4px; transition: background 0.2s;
644	        }
645	        .modal-close:hover { background: #F3F4F6; }
646	        .task-add-row {
647	            padding: 14px 24px;
648	            display: flex;
649	            gap: 8px;
650	            border-bottom: 1px solid #E5E7EB;
651	        }
652	        .task-add-input {
653	            flex: 1;
654	            padding: 9px 12px;
655	            border: 1px solid #D1D5DB;
656	            border-radius: 8px;
657	            font-family: inherit;
658	            font-size: 0.85rem;
659	            outline: none;
660	        }
661	        .task-add-input:focus { border-color: var(--primary); }
662	        .btn-add-task {
663	            padding: 9px 16px;
664	            background: var(--secondary);
665	            color: var(--primary);
666	            border: none;
667	            border-radius: 8px;
668	            font-family: inherit;
669	            font-weight: 800;
670	            font-size: 0.82rem;
671	            cursor: pointer;
672	            transition: background 0.2s;
673	        }
674	        .btn-add-task:hover { background: #b5c500; }
675	        .task-columns {
676	            display: grid;
677	            grid-template-columns: repeat(3, 1fr);
678	            gap: 0;
679	            padding: 16px 24px;
680	        }
681	        .task-col { padding: 0 8px; }
682	        .task-col:first-child { padding-left: 0; }
683	        .task-col:last-child { padding-right: 0; }
684	        .task-col-title {
685	            font-size: 0.72rem;
686	            font-weight: 800;
687	            text-transform: uppercase;
688	            letter-spacing: 0.08em;
689	            color: var(--text-sub);
690	            margin-bottom: 10px;
691	            padding-bottom: 8px;
692	            border-bottom: 2px solid #E5E7EB;
693	        }
694	        .task-col-title.col-todo   { border-color: #D1D5DB; }
695	        .task-col-title.col-prog   { border-color: var(--prod); color: var(--prod); }
696	        .task-col-title.col-done   { border-color: var(--post); color: var(--post); }
697	        .task-item {
698	            background: #F9FAFB;
699	            border: 1px solid #E5E7EB;

            cursor: pointer;
            transition: background 0.2s;
        }
        .btn-send-portfolio:hover { background: #3d0560; }
        .artifact-saved-msg {
            font-size: 0.78rem;
            color: var(--post);
            font-weight: 700;
            display: none;
            margin-top: 6px;
        }

        /* Checkpoint card */
        .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-info { flex: 1; }
        .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;
        }

        /* Step 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;
            display: flex; align-items: center; gap: 8px;
        }
        .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;
            transition: background 0.2s;
        }
        .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(--post); color: var(--post); }
        .task-item {
            background: #F9FAFB;
            border: 1px solid #E5E7EB;


/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html


700	            border-radius: 8px;
701	            padding: 10px 12px;
702	            margin-bottom: 8px;
703	            font-size: 0.83rem;
704	            line-height: 1.4;
705	            color: #374151;
706	            position: relative;
707	        }
708	        .task-item.status-done { opacity: 0.6; text-decoration: line-through; }
709	        .task-item-actions {
710	            display: flex;
711	            gap: 4px;
712	            margin-top: 8px;
713	            flex-wrap: wrap;
714	        }
715	        .task-move-btn {
716	            font-size: 0.68rem;
717	            font-weight: 700;
718	            padding: 2px 7px;
719	            border-radius: 4px;
720	            border: none;
721	            cursor: pointer;
722	            font-family: inherit;
723	        }
724	        .task-move-btn.to-todo { background: #E5E7EB; color: #374151; }
725	        .task-move-btn.to-prog { background: #E0F2FE; color: #0369A1; }
726	        .task-move-btn.to-done { background: #DCFCE7; color: #166534; }
727	        .task-move-btn.del     { background: #FEE2E2; color: #DC2626; margin-left: auto; }
728
729	        /* ── PORTFOLIO MODAL ── */
730	        .portfolio-modal-overlay {
731	            position: fixed;
732	            inset: 0;
733	            background: rgba(0,0,0,0.55);
734	            z-index: 3000;
735	            display: none;
736	            align-items: center;
737	            justify-content: center;
738	        }
739	        .portfolio-modal-overlay.open { display: flex; }
740	        .portfolio-modal {
741	            background: white;
742	            border-radius: 16px;
743	            width: 420px;
744	            padding: 28px;
745	            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
746	        }
747	        .portfolio-modal h3 { font-size: 1.1rem; font-weight: 800; color: var(--primary); margin: 0 0 8px 0; }
748	        .portfolio-modal p { font-size: 0.85rem; color: var(--text-sub); margin: 0 0 20px 0; }
749	        .std-option {
750	            display: flex;
751	            align-items: center;
752	            gap: 10px;
753	            padding: 12px 14px;
754	            border: 2px solid #E5E7EB;
755	            border-radius: 10px;
756	            margin-bottom: 10px;
757	            cursor: pointer;
758	            transition: all 0.15s;
759	            font-size: 0.88rem;
760	        }
761	        .std-option:hover { border-color: var(--primary); background: #FBF5FF; }
762	        .std-option.selected { border-color: var(--primary); background: #F5F3FF; }
763	        .std-option input[type="radio"] { accent-color: var(--primary); }
764	        .pm-btns { display: flex; gap: 10px; margin-top: 20px; }
765	        .pm-cancel {
766	            flex: 1; padding: 10px;
767	            background: white; border: 2px solid #E5E7EB;
768	            border-radius: 8px; font-family: inherit;
769	            font-weight: 700; cursor: pointer; color: var(--accent);
770	        }
771	        .pm-confirm {
772	            flex: 2; padding: 10px;
773	            background: var(--primary); color: white;
774	            border: none; border-radius: 8px;
775	            font-family: inherit; font-weight: 700; cursor: pointer;
776	        }
777	        .pm-confirm:hover { background: #3d0560; }
778
779	        /* ── TOAST ── */
780	        .toast {
781	            position: fixed;
782	            bottom: 24px; left: 50%;
783	            transform: translateX(-50%) translateY(80px);
784	            background: var(--primary);
785	            color: white;
786	            padding: 12px 24px;
787	            border-radius: 30px;
788	            font-size: 0.85rem;
789	            font-weight: 700;
790	            box-shadow: 0 4px 16px rgba(0,0,0,0.2);
791	            z-index: 5000;
792	            transition: transform 0.3s ease;
793	            white-space: nowrap;
794	        }
795	        .toast.show { transform: translateX(-50%) translateY(0); }
796
797	        /* Misc */
798	        .divider { border: none; border-top: 1px solid #E5E7EB; margin: 24px 0; }
799	        .tag-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
800	        .tag { background: #F3F4F6; border-radius: 6px; padding: 4px 10px; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
801	        .tag.software { background: #EDE9FE; color: var(--pre); }
802	        .tag.warning  { background: #FEF3C7; color: #92400E; }
803	        .tag.tip      { background: #DCFCE7; color: #166534; }
804	        .section-subhead {
805	            font-size: 0.88rem;
806	            font-weight: 800;
807	            text-transform: uppercase;
808	            letter-spacing: 0.06em;
809	            color: var(--accent);
810	            margin: 20px 0 8px 0;
811	        }
812	        strong { color: var(--text-main); }
813	    </style>
814
815
816
817
818
819

820
821
822
823

824	            📽 DCS Playbook
825	            Dashboard
826	            Portfolio
827	            Video
828

829

830
831
832
833

834
835
836
837

838
Video Production

839
New Project

840

841	                <select id="project-select" onchange="switchProject(this.value)"></select>
842

843	                    <button type="button" class="btn-small" onclick="newProject()">+ New Project</button>
844	                    <button type="button" class="btn-small" onclick="duplicateProject()">Duplicate Project</button>
845

846

847

848

849

850
0 of 20 steps complete

851

852
853
854

855
◆ Phase 1: Pre-Production

856	            <button class="step-btn active" id="nav-setup" onclick="goTo('setup')">
857

858	                🎬 Project Setup
859	            </button>
860	            <button class="step-btn" id="nav-discovery" onclick="goTo('discovery')">
861

862	                🔍 Discovery Meeting
863	            </button>
864	            <button class="step-btn" id="nav-brief" onclick="goTo('brief')">
865

866	                📋 Creative Brief
867	            </button>
868	            <button class="step-btn" id="nav-cp1a" onclick="goTo('cp1a')">
869

870	                ✅ Checkpoint: Discovery Prep
871	            </button>
872	            <button class="step-btn" id="nav-story" onclick="goTo('story')">
873

874	                🎭 Story & Shot Planning
875	            </button>
876	            <button class="step-btn" id="nav-logistics" onclick="goTo('logistics')">
877

878	                📅 Logistics
879	            </button>
880	            <button class="step-btn checkpoint" id="nav-cp1" onclick="goTo('cp1')">
881

882	                ✅ Checkpoint: Production Prep
883	            </button>
884

885
886
887

888
◆ Phase 2: Production

889	            <button class="step-btn" id="nav-cp2a" onclick="goTo('cp2a')">
890

891	                ✅ Checkpoint: Production Kickoff
892	            </button>
893	            <button class="step-btn" id="nav-gear" onclick="goTo('gear')">
894

895	                📹 Meet Your Gear
896	            </button>
897	            <button class="step-btn" id="nav-camera" onclick="goTo('camera')">
898

899	                🎥 Camera Fundamentals

border-radius: 8px;
            padding: 10px 12px;
            margin-bottom: 8px;
            font-size: 0.83rem;
            line-height: 1.4;
            color: #374151;
            position: relative;
        }
        .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: #E0F2FE; color: #0369A1; }
        .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); }

        /* Misc */
        .divider { border: none; border-top: 1px solid #E5E7EB; margin: 24px 0; }
        .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.software { background: #EDE9FE; color: var(--pre); }
        .tag.warning  { background: #FEF3C7; color: #92400E; }
        .tag.tip      { background: #DCFCE7; color: #166534; }
        .section-subhead {
            font-size: 0.88rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--accent);
            margin: 20px 0 8px 0;
        }
        strong { color: var(--text-main); }
    </style>

            📽 DCS Playbook
            Dashboard
            Portfolio
            Video

Video Production

New Project

                <select id="project-select" onchange="switchProject(this.value)"></select>

                    <button type="button" class="btn-small" onclick="newProject()">+ New Project</button>
                    <button type="button" class="btn-small" onclick="duplicateProject()">Duplicate Project</button>

0 of 20 steps complete

◆ Phase 1: Pre-Production

            <button class="step-btn active" id="nav-setup" onclick="goTo('setup')">

                🎬 Project Setup
            </button>
            <button class="step-btn" id="nav-discovery" onclick="goTo('discovery')">

                🔍 Discovery Meeting
            </button>
            <button class="step-btn" id="nav-brief" onclick="goTo('brief')">

                📋 Creative Brief
            </button>
            <button class="step-btn" id="nav-cp1a" onclick="goTo('cp1a')">

                ✅ Checkpoint: Discovery Prep
            </button>
            <button class="step-btn" id="nav-story" onclick="goTo('story')">

                🎭 Story & Shot Planning
            </button>
            <button class="step-btn" id="nav-logistics" onclick="goTo('logistics')">

                📅 Logistics
            </button>
            <button class="step-btn checkpoint" id="nav-cp1" onclick="goTo('cp1')">

                ✅ Checkpoint: Production Prep
            </button>

◆ Phase 2: Production

            <button class="step-btn" id="nav-cp2a" onclick="goTo('cp2a')">

                ✅ Checkpoint: Production Kickoff
            </button>
            <button class="step-btn" id="nav-gear" onclick="goTo('gear')">

                📹 Meet Your Gear
            </button>
            <button class="step-btn" id="nav-camera" onclick="goTo('camera')">

                🎥 Camera Fundamentals


/Users/russgoerend/Desktop/Portfolio HTMLs/Video Production Playbook.html