Make Dashboard explainer always accessible via help icon

Adds a HelpCircle toggle button in the Dashboard header so users can
re-open the platform explainer after dismissing it. The per-user
dismissed state is preserved as the initial-open default.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/pages/Dashboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { BookOpen, CheckSquare, Trophy, Sparkles, X } from 'lucide-react';
+import { BookOpen, CheckSquare, Trophy, Sparkles, X, HelpCircle } from 'lucide-react';
 import { useApp } from '../store/AppContext';
 import Card from '../components/ui/Card';
 import Button from '../components/ui/Button';
@@ -97,11 +97,19 @@ const Dashboard = () => {
     setExplainerOpen(storage.get(explainerKey, false) !== true);
   }, [explainerKey]);
 
-  const dismissExplainer = () => {
+  const closeExplainer = () => {
     setExplainerOpen(false);
     if (explainerKey) storage.set(explainerKey, true);
   };
 
+  const toggleExplainer = () => {
+    if (explainerOpen) {
+      closeExplainer();
+    } else {
+      setExplainerOpen(true);
+    }
+  };
+
   const explainerSteps = [
     { icon: BookOpen, title: 'Learn', text: 'Each week you get one topic from the knowledge base. Work through the learning session at your own pace.' },
     { icon: CheckSquare, title: 'Test', text: 'Once your learning session is done, take the 5-question test to lock in what you learned and earn points.' },
@@ -111,21 +119,33 @@ const Dashboard = () => {
 
   return (
     <div className="p-6 md:p-10 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-      <header>
+      <header className="flex items-start justify-between gap-4">
-        <h1 className="text-3xl md:text-5xl mb-2">Welcome, {currentUser?.name}</h1>
+        <div>
-        <p className="text-fg-muted text-lg">
+          <h1 className="text-3xl md:text-5xl mb-2">Welcome, {currentUser?.name}</h1>
-          {curriculumActive
+          <p className="text-fg-muted text-lg">
-            ? `Cycle ${currentCycle} · Week ${currWeek} of 26`
+            {curriculumActive
-            : `Here is your overview for week ${weekNumber}.`}
+              ? `Cycle ${currentCycle} · Week ${currWeek} of 26`
-        </p>
+              : `Here is your overview for week ${weekNumber}.`}
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={toggleExplainer}
+          aria-label={explainerOpen ? 'Hide platform explainer' : 'How Respellion works'}
+          aria-expanded={explainerOpen}
+          title="How Respellion works"
+          className="flex-shrink-0 w-10 h-10 rounded-full border border-bg-warm bg-paper text-fg-muted hover:text-fg hover:border-teal transition-colors flex items-center justify-center"
+        >
+          <HelpCircle size={20} />
+        </button>
       </header>
 
-      {/* Platform explainer — dismissible, per user */}
+      {/* Platform explainer — toggled via header help icon, per-user dismissed state */}
       {explainerOpen && (
         <Card className="relative border border-bg-warm bg-paper">
           <button
             type="button"
-            onClick={dismissExplainer}
+            onClick={closeExplainer}
             aria-label="Dismiss"
             className="absolute top-4 right-4 text-fg-muted hover:text-fg transition-colors"
           >