Upload 20 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,118 @@
+
+import React, { useState, useCallback } from 'react';
+import { CaseIntakeForm } from './components/CaseIntakeForm';
+import { ActionPlanComponent } from './components/ActionPlan';
+import { generateActionPlan } from './services/geminiService';
+import type { ActionPlan, CaseData, ActionItemStatus } from './types';
+import { Spinner } from './components/icons/Spinner';
+
+const App: React.FC = () => {
+    const [view, setView] = useState<'form' | 'plan'>('form');
+    const [actionPlan, setActionPlan] = useState<ActionPlan | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleFormSubmit = useCallback(async (data: CaseData) => {
+        setIsLoading(true);
+        setError(null);
+        try {
+            const plan = await generateActionPlan(data);
+            setActionPlan(plan);
+            setView('plan');
+        } catch (err) {
+            console.error(err);
+            setError('Failed to generate an action plan. Please check your API key and try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    }, []);
+
+    const handleToggleItem = useCallback((categoryIndex: number, itemIndex: number) => {
+        setActionPlan(prevPlan => {
+            if (!prevPlan) return null;
+
+            const newPlan = JSON.parse(JSON.stringify(prevPlan));
+            const currentStatus = newPlan.categories[categoryIndex].items[itemIndex].status;
+            
+            const newStatus: ActionItemStatus = currentStatus === 'Completed' ? 'Not Started' : 'Completed';
+            newPlan.categories[categoryIndex].items[itemIndex].status = newStatus;
+            
+            return newPlan;
+        });
+    }, []);
+
+    const handleReset = useCallback(() => {
+        setView('form');
+        setActionPlan(null);
+        setError(null);
+    }, []);
+
+    return (
+        <div className="min-h-screen bg-gray-950">
+            <div className="relative isolate overflow-hidden">
+                <svg
+                    className="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
+                    aria-hidden="true"
+                >
+                    <defs>
+                        <pattern
+                            id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
+                            width={200}
+                            height={200}
+                            x="50%"
+                            y={-1}
+                            patternUnits="userSpaceOnUse"
+                        >
+                            <path d="M.5 200V.5H200" fill="none" />
+                        </pattern>
+                    </defs>
+                    <svg x="50%" y={-1} className="overflow-visible fill-gray-800/20">
+                        <path
+                            d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                            strokeWidth={0}
+                        />
+                    </svg>
+                    <rect width="100%" height="100%" strokeWidth={0} fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)" />
+                </svg>
+            </div>
+            <main className="container mx-auto px-4 py-8 md:py-16">
+                <header className="text-center mb-12">
+                    <h1 className="font-display text-4xl md:text-6xl font-bold tracking-tight text-white">
+                        SSDI Case Prep <span className="text-brand-secondary">Assistant</span>
+                    </h1>
+                    <p className="mt-4 text-lg text-gray-400 max-w-2xl mx-auto">
+                        Your AI-powered guide to organizing and strengthening your Social Security Disability claim.
+                    </p>
+                </header>
+
+                {isLoading && (
+                    <div className="fixed inset-0 bg-gray-950 bg-opacity-80 flex flex-col items-center justify-center z-50">
+                        <Spinner />
+                        <p className="mt-4 text-white text-lg font-medium">Generating your personalized action plan...</p>
+                        <p className="mt-2 text-gray-400">This may take a moment. The AI is analyzing your case details.</p>
+                    </div>
+                )}
+
+                {error && (
+                    <div className="bg-red-900/50 border border-red-700 text-red-300 px-4 py-3 rounded-lg relative max-w-2xl mx-auto" role="alert">
+                        <strong className="font-bold">Error: </strong>
+                        <span className="block sm:inline">{error}</span>
+                    </div>
+                )}
+
+                <div className="max-w-4xl mx-auto">
+                    {view === 'form' && !actionPlan ? (
+                        <CaseIntakeForm onSubmit={handleFormSubmit} />
+                    ) : (
+                        actionPlan && <ActionPlanComponent plan={actionPlan} onToggleItem={handleToggleItem} onReset={handleReset} />
+                    )}
+                </div>
+            </main>
+             <footer className="text-center py-8 text-gray-500">
+                <p>&copy; {new Date().getFullYear()} SSDI Case Prep Assistant. All Rights Reserved.</p>
+            </footer>
+        </div>
+    );
+};
+
+export default App;

README.md

@@ -1,10 +1,20 @@
----
-title: Interactive
-emoji: ⚡
-colorFrom: red
-colorTo: indigo
-sdk: static
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1RqZOrEPQPLYTN6qzHOb6ATOkpypvFChz
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/ActionPlan.tsx

@@ -0,0 +1,101 @@
+
+import React, { useState, useMemo } from 'react';
+import type { ActionPlan, PlanCategory } from '../types';
+import { DocumentIcon } from './icons/DocumentIcon';
+import { MedicalIcon } from './icons/MedicalIcon';
+import { WorkIcon } from './icons/WorkIcon';
+import { CheckIcon } from './icons/CheckIcon';
+
+interface ActionPlanProps {
+    plan: ActionPlan;
+    onToggleItem: (categoryIndex: number, itemIndex: number) => void;
+    onReset: () => void;
+}
+
+const getCategoryIcon = (categoryName: string): React.ReactNode => {
+    const lowerCaseName = categoryName.toLowerCase();
+    if (lowerCaseName.includes('medical')) return <MedicalIcon className="w-6 h-6" />;
+    if (lowerCaseName.includes('work')) return <WorkIcon className="w-6 h-6" />;
+    return <DocumentIcon className="w-6 h-6" />;
+};
+
+const CategoryCard: React.FC<{ category: PlanCategory, categoryIndex: number, onToggleItem: (catIdx: number, itemIdx: number) => void }> = ({ category, categoryIndex, onToggleItem }) => {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const completedItems = useMemo(() => category.items.filter(item => item.status === 'Completed').length, [category.items]);
+    const totalItems = category.items.length;
+    const progress = totalItems > 0 ? (completedItems / totalItems) * 100 : 0;
+
+    return (
+        <div className="bg-gray-900 border border-white/10 rounded-xl overflow-hidden">
+            <button
+                className="w-full flex justify-between items-center p-4 md:p-6 text-left hover:bg-gray-800 transition-colors"
+                onClick={() => setIsExpanded(!isExpanded)}
+            >
+                <div className="flex items-center space-x-4">
+                    <span className="text-brand-secondary">{getCategoryIcon(category.category)}</span>
+                    <div>
+                        <h3 className="text-lg font-bold text-white">{category.category}</h3>
+                        <p className="text-sm text-gray-400">{category.description}</p>
+                    </div>
+                </div>
+                 <div className="flex items-center space-x-4">
+                    <span className="text-sm font-mono text-gray-400">{completedItems}/{totalItems}</span>
+                    <svg className={`w-5 h-5 text-gray-400 transform transition-transform ${isExpanded ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                    </svg>
+                </div>
+            </button>
+            
+            {isExpanded && (
+                <div className="px-4 md:px-6 pb-4">
+                    <div className="w-full bg-gray-700 rounded-full h-1.5 mb-4">
+                        <div className="bg-brand-secondary h-1.5 rounded-full" style={{ width: `${progress}%`, transition: 'width 0.5s ease-in-out' }}></div>
+                    </div>
+                    <ul className="space-y-3">
+                        {category.items.map((item, itemIndex) => (
+                            <li key={itemIndex} className="flex items-start space-x-3 p-3 rounded-lg bg-gray-800/50">
+                                <button onClick={() => onToggleItem(categoryIndex, itemIndex)} className="flex-shrink-0 mt-1">
+                                    <div className={`w-6 h-6 rounded-md flex items-center justify-center border-2 transition-all ${item.status === 'Completed' ? 'bg-brand-secondary border-brand-secondary' : 'bg-gray-700 border-gray-600 hover:border-brand-secondary'}`}>
+                                        {item.status === 'Completed' && <CheckIcon />}
+                                    </div>
+                                </button>
+                                <div>
+                                    <p className={`font-semibold text-white ${item.status === 'Completed' ? 'line-through text-gray-500' : ''}`}>{item.item}</p>
+                                    <p className="text-sm text-gray-400">{item.description}</p>
+                                </div>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+        </div>
+    );
+};
+
+
+export const ActionPlanComponent: React.FC<ActionPlanProps> = ({ plan, onToggleItem, onReset }) => {
+    return (
+        <div className="space-y-8 animate-fade-in">
+            <div className="text-center p-6 bg-gray-900 border border-white/10 rounded-xl">
+                 <h2 className="text-3xl font-bold text-white">{plan.title}</h2>
+                 <p className="mt-2 text-gray-300 max-w-3xl mx-auto">{plan.summary}</p>
+            </div>
+           
+            <div className="space-y-4">
+                {plan.categories.map((category, index) => (
+                    <CategoryCard key={index} category={category} categoryIndex={index} onToggleItem={onToggleItem} />
+                ))}
+            </div>
+            
+            <div className="text-center pt-8">
+                 <button
+                    onClick={onReset}
+                    className="inline-flex items-center px-8 py-3 border border-gray-600 text-base font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-950 transition-colors"
+                >
+                    Start a New Plan
+                </button>
+            </div>
+        </div>
+    );
+};

components/CaseIntakeForm.tsx

@@ -0,0 +1,165 @@
+
+import React, { useState } from 'react';
+import type { CaseData } from '../types';
+import { StepIndicator } from './StepIndicator';
+
+interface CaseIntakeFormProps {
+    onSubmit: (data: CaseData) => void;
+}
+
+const steps = ["About You", "Medical", "Work History", "Limitations"];
+
+export const CaseIntakeForm: React.FC<CaseIntakeFormProps> = ({ onSubmit }) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const [formData, setFormData] = useState<CaseData>({
+        age: '',
+        medicalConditions: '',
+        workHistory: '',
+        limitations: '',
+    });
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const nextStep = () => {
+        if (currentStep < steps.length - 1) {
+            setCurrentStep(currentStep + 1);
+        }
+    };
+
+    const prevStep = () => {
+        if (currentStep > 0) {
+            setCurrentStep(currentStep - 1);
+        }
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        onSubmit(formData);
+    };
+    
+    const isNextDisabled = () => {
+        switch(currentStep) {
+            case 0: return !formData.age;
+            case 1: return !formData.medicalConditions;
+            case 2: return !formData.workHistory;
+            case 3: return !formData.limitations;
+            default: return true;
+        }
+    };
+
+    return (
+        <div className="bg-gray-900/50 backdrop-blur-sm border border-white/10 rounded-2xl p-6 md:p-8 shadow-2xl">
+            <StepIndicator steps={steps} currentStep={currentStep} />
+            <form onSubmit={handleSubmit} className="mt-8 space-y-8">
+                {currentStep === 0 && (
+                    <div className="animate-fade-in">
+                        <h2 className="text-2xl font-bold text-white">About You</h2>
+                        <p className="text-gray-400 mt-1">This information helps the AI tailor recommendations.</p>
+                        <div className="mt-6">
+                            <label htmlFor="age" className="block text-sm font-medium text-gray-300">Your Age</label>
+                            <input
+                                type="number"
+                                name="age"
+                                id="age"
+                                value={formData.age}
+                                onChange={handleChange}
+                                placeholder="e.g., 54"
+                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
+                                required
+                            />
+                        </div>
+                    </div>
+                )}
+                {currentStep === 1 && (
+                     <div className="animate-fade-in">
+                        <h2 className="text-2xl font-bold text-white">Your Medical Conditions</h2>
+                        <p className="text-gray-400 mt-1">List all diagnosed conditions that affect your ability to work.</p>
+                        <div className="mt-6">
+                            <label htmlFor="medicalConditions" className="block text-sm font-medium text-gray-300">Medical Conditions</label>
+                            <textarea
+                                name="medicalConditions"
+                                id="medicalConditions"
+                                value={formData.medicalConditions}
+                                onChange={handleChange}
+                                rows={5}
+                                placeholder="e.g., Degenerative disc disease, severe anxiety, diabetic neuropathy"
+                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
+                                required
+                            />
+                        </div>
+                    </div>
+                )}
+                {currentStep === 2 && (
+                     <div className="animate-fade-in">
+                        <h2 className="text-2xl font-bold text-white">Work History</h2>
+                        <p className="text-gray-400 mt-1">Briefly describe your jobs over the last 15 years.</p>
+                        <div className="mt-6">
+                            <label htmlFor="workHistory" className="block text-sm font-medium text-gray-300">Work History</label>
+                            <textarea
+                                name="workHistory"
+                                id="workHistory"
+                                value={formData.workHistory}
+                                onChange={handleChange}
+                                rows={5}
+                                placeholder="e.g., Construction worker (10 years), Warehouse manager (5 years). Both jobs required heavy lifting and long periods of standing."
+                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
+                                required
+                            />
+                        </div>
+                    </div>
+                )}
+                {currentStep === 3 && (
+                     <div className="animate-fade-in">
+                        <h2 className="text-2xl font-bold text-white">Daily Limitations</h2>
+                        <p className="text-gray-400 mt-1">Describe how your conditions limit your daily activities and ability to work.</p>
+                        <div className="mt-6">
+                            <label htmlFor="limitations" className="block text-sm font-medium text-gray-300">Daily Limitations</label>
+                            <textarea
+                                name="limitations"
+                                id="limitations"
+                                value={formData.limitations}
+                                onChange={handleChange}
+                                rows={5}
+                                placeholder="e.g., Cannot sit for more than 20 minutes due to back pain. Trouble concentrating due to anxiety. Difficulty lifting anything over 10 pounds."
+                                className="mt-2 block w-full bg-gray-800 border border-gray-700 rounded-md shadow-sm py-3 px-4 text-white focus:outline-none focus:ring-brand-secondary focus:border-brand-secondary sm:text-sm"
+                                required
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex justify-between pt-6 border-t border-white/10">
+                    <button
+                        type="button"
+                        onClick={prevStep}
+                        className={`inline-flex items-center px-6 py-3 border border-gray-600 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-900 transition-colors ${currentStep === 0 ? 'opacity-50 cursor-not-allowed' : ''}`}
+                        disabled={currentStep === 0}
+                    >
+                        Back
+                    </button>
+                    {currentStep < steps.length - 1 ? (
+                        <button
+                            type="button"
+                            onClick={nextStep}
+                            className={`inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-primary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-primary focus:ring-offset-gray-900 transition-colors ${isNextDisabled() ? 'opacity-50 cursor-not-allowed' : ''}`}
+                             disabled={isNextDisabled()}
+                        >
+                            Next
+                        </button>
+                    ) : (
+                        <button
+                            type="submit"
+                            className={`inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-brand-secondary hover:bg-opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-secondary focus:ring-offset-gray-900 transition-colors ${isNextDisabled() ? 'opacity-50 cursor-not-allowed' : ''}`}
+                            disabled={isNextDisabled()}
+                        >
+                            Generate Plan
+                        </button>
+                    )}
+                </div>
+            </form>
+        </div>
+    );
+};

components/StepIndicator.tsx

@@ -0,0 +1,51 @@
+
+import React from 'react';
+import { CheckIcon } from './icons/CheckIcon';
+
+interface StepIndicatorProps {
+    steps: string[];
+    currentStep: number;
+}
+
+export const StepIndicator: React.FC<StepIndicatorProps> = ({ steps, currentStep }) => {
+    return (
+        <nav aria-label="Progress">
+            <ol role="list" className="flex items-center">
+                {steps.map((step, stepIdx) => (
+                    <li key={step} className={`relative ${stepIdx !== steps.length - 1 ? 'pr-8 sm:pr-20' : ''}`}>
+                        {stepIdx < currentStep ? (
+                            <>
+                                <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                                    <div className="h-0.5 w-full bg-brand-secondary" />
+                                </div>
+                                <div className="relative flex h-8 w-8 items-center justify-center rounded-full bg-brand-secondary">
+                                   <CheckIcon className="h-5 w-5 text-white" />
+                                </div>
+                                <span className="absolute top-10 -left-2 w-max text-xs text-gray-300">{step}</span>
+                            </>
+                        ) : stepIdx === currentStep ? (
+                            <>
+                                <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                                    <div className="h-0.5 w-full bg-gray-700" />
+                                </div>
+                                <div className="relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-brand-secondary bg-gray-800">
+                                    <span className="h-2.5 w-2.5 rounded-full bg-brand-secondary" />
+                                </div>
+                                <span className="absolute top-10 -left-2 w-max text-xs text-brand-secondary font-semibold">{step}</span>
+                            </>
+                        ) : (
+                            <>
+                                <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                                    <div className="h-0.5 w-full bg-gray-700" />
+                                </div>
+                                <div className="relative flex h-8 w-8 items-center justify-center rounded-full border-2 border-gray-600 bg-gray-800">
+                                </div>
+                                 <span className="absolute top-10 -left-2 w-max text-xs text-gray-500">{step}</span>
+                            </>
+                        )}
+                    </li>
+                ))}
+            </ol>
+        </nav>
+    );
+};

components/icons/CheckIcon.tsx

@@ -0,0 +1,8 @@
+
+import React from 'react';
+
+export const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={3} stroke="currentColor" className="w-4 h-4 text-white" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+    </svg>
+);

components/icons/DocumentIcon.tsx

@@ -0,0 +1,8 @@
+
+import React from 'react';
+
+export const DocumentIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+    </svg>
+);

components/icons/MedicalIcon.tsx

@@ -0,0 +1,9 @@
+
+import React from 'react';
+
+export const MedicalIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 7.5h.008v.008H12V7.5z" />
+    </svg>
+);

components/icons/Spinner.tsx

@@ -0,0 +1,9 @@
+
+import React from 'react';
+
+export const Spinner: React.FC = () => (
+    <svg className="animate-spin h-10 w-10 text-brand-secondary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+);

components/icons/WorkIcon.tsx

@@ -0,0 +1,8 @@
+
+import React from 'react';
+
+export const WorkIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 14.15v4.075c0 1.313-.964 2.45-2.25 2.654-.513.076-1.036.146-1.57.196-1.037.05-2.092.08-3.15.08-1.058 0-2.113-.03-3.15-.08-.534-.05-1.057-.12-1.57-.196-1.286-.204-2.25-1.341-2.25-2.654V14.15M15.75 7.5l-3.75 3.75-3.75-3.75M15.75 7.5V4.5c0-1.5-1.5-3-3.75-3S8.25 3 8.25 4.5v3" />
+    </svg>
+);

index.html

@@ -1,1211 +1,58 @@
+
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SSDI Document Strengthening Portal | Caustino Legal Services</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SSDI Case Prep Assistant</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        .document-section {
-            transition: all 0.3s ease;
-        }
-        .document-section:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-        }
-        .tab-content {
-            display: none;
-        }
-        .tab-content.active {
-            display: block;
-            animation: fadeIn 0.5s ease;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .exhibit-table tr:nth-child(even) {
-            background-color: #f8fafc;
-        }
-        .progress-bar {
-            transition: width 0.5s ease;
-        }
-        .tooltip {
-            visibility: hidden;
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-        .has-tooltip:hover .tooltip {
-            visibility: visible;
-            opacity: 1;
-        }
-    </style>
-</head>
-<body class="bg-gray-50 font-sans antialiased">
-    <header class="bg-blue-800 text-white shadow-lg">
-        <div class="container mx-auto px-4 py-6">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-4">
-                    <i class="fas fa-balance-scale fa-2x text-blue-300"></i>
-                    <div>
-                        <h1 class="text-2xl font-bold">SSDI Document Strengthening Portal</h1>
-                        <p class="text-blue-200">Caustino Legal Services</p>
-                    </div>
-                </div>
-                <div class="hidden md:block">
-                    <nav class="flex space-x-6">
-                        <a href="#" class="hover:text-blue-300 font-medium">Dashboard</a>
-                        <a href="#" class="hover:text-blue-300 font-medium">Resources</a>
-                        <a href="#" class="hover:text-blue-300 font-medium">Contact</a>
-                        <a href="#" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg font-medium">My Account</a>
-                    </nav>
-                </div>
-                <button class="md:hidden text-2xl">
-                    <i class="fas fa-bars"></i>
-                </button>
-            </div>
-        </div>
-    </header>
-
-    <main class="container mx-auto px-4 py-8">
-        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
-            <div class="p-6">
-                <h2 class="text-2xl font-bold text-gray-800 mb-2">Document Strengthening and Exhibit Completion Plan</h2>
-                <p class="text-gray-600 mb-6">You're carrying a lot with this filing. Let's make every page work for you and lock down the record so the court can't look away.</p>
-                
-                <div class="flex flex-wrap gap-4 mb-6">
-                    <div class="flex items-center bg-blue-100 text-blue-800 px-4 py-2 rounded-full">
-                        <i class="fas fa-file-alt mr-2"></i>
-                        <span>Case: McLaughlin v. SSA</span>
-                    </div>
-                    <div class="flex items-center bg-green-100 text-green-800 px-4 py-2 rounded-full">
-                        <i class="fas fa-clock mr-2"></i>
-                        <span>Deadline: June 15, 2024</span>
-                    </div>
-                    <div class="flex items-center bg-purple-100 text-purple-800 px-4 py-2 rounded-full">
-                        <i class="fas fa-gavel mr-2"></i>
-                        <span>Court: U.S. Court of Federal Claims</span>
-                    </div>
-                </div>
-                
-                <div class="w-full bg-gray-200 rounded-full h-4 mb-6">
-                    <div class="progress-bar bg-blue-600 h-4 rounded-full" style="width: 65%"></div>
-                </div>
-                
-                <div class="flex mb-6 overflow-x-auto">
-                    <button class="tab-btn active px-6 py-3 font-medium border-b-2 border-blue-600 text-blue-600" data-tab="requirements">Requirements</button>
-                    <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-blue-600" data-tab="recommendations">Recommendations</button>
-                    <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-blue-600" data-tab="exhibits">Exhibits</button>
-                    <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-blue-600" data-tab="templates">Templates</button>
-                    <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-blue-600" data-tab="checklist">Checklist</button>
-                </div>
-            </div>
-            
-            <div class="tab-content active" id="requirements">
-                <div class="p-6 border-t border-gray-200">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">What I need from you to proceed</h3>
-                    
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-file-text text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Document text</h4>
-                                    <p class="text-gray-600 text-sm">The full brief/motion (paste the text or share in smaller sections).</p>
-                                </div>
-                            </div>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <textarea class="w-full h-32 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Paste your document text here..."></textarea>
-                                <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">Upload File</button>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-gavel text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Court and posture</h4>
-                                    <p class="text-gray-600 text-sm">Which court(s), division, and posture (e.g., complaint, consolidated amended complaint, PI/summary judgment, appellate brief).</p>
-                                </div>
-                            </div>
-                            <div class="space-y-3">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Court</label>
-                                    <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" value="U.S. Court of Federal Claims" readonly>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Posture</label>
-                                    <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" value="Consolidated Petition for Systemic, Monetary, and Declaratory Relief" readonly>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-clock text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Deadlines and limits</h4>
-                                    <p class="text-gray-600 text-sm">Filing deadline, page/word limits, font/format rules, and any local rule quirks.</p>
-                                </div>
-                            </div>
-                            <div class="space-y-3">
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Deadline</label>
-                                    <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" value="June 15, 2024" readonly>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Page Limit</label>
-                                    <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" value="50 pages" readonly>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-bullseye text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Target relief</h4>
-                                    <p class="text-gray-600 text-sm">Exact remedies sought (e.g., injunctive relief, structural relief, appointment of monitor, remand with instructions, vacatur).</p>
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Structural Injunction</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Monetary Relief ($43,200)</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Declaratory Relief</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Legislative Mandate</span>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-folder-open text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Exhibit list</h4>
-                                    <p class="text-gray-600 text-sm">A rough list of exhibits you intend to include, even if incomplete.</p>
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <div class="flex items-center">
-                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
-                                    <span>Appendix A: fMRI Evidence</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
-                                    <span>Appendix B: Bibliography</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
-                                    <span>Appendix C: SNP Data</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
-                                    <span>Appendix D: Neurogenetic Crosswalk</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-file-pdf text-red-500 mr-2"></i>
-                                    <span>Appendix E: Case Dockets</span>
-                                </div>
-                                <button class="mt-3 text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
-                                    <i class="fas fa-plus-circle mr-1"></i> Add Exhibit
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-archive text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Record status</h4>
-                                    <p class="text-gray-600 text-sm">Whether there's an administrative record, its pagination, and what's properly before the court.</p>
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Administrative Record exists</span>
-                                </div>
-                                <div>
-                                    <label class="block text-sm font-medium text-gray-700 mb-1">Pagination</label>
-                                    <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Enter pagination details">
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-lock text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Confidentiality</h4>
-                                    <p class="text-gray-600 text-sm">Materials needing redaction/seal (PHI, PII, proprietary content).</p>
-                                </div>
-                            </div>
-                            <div class="space-y-3">
-                                <div class="flex items-center">
-                                    <input type="checkbox" id="phi" class="mr-2">
-                                    <label for="phi">Protected Health Information (PHI)</label>
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" id="pii" class="mr-2" checked>
-                                    <label for="pii">Personally Identifiable Information (PII)</label>
-                                </div>
-                                <div class="flex items-center">
-                                    <input type="checkbox" id="proprietary" class="mr-2">
-                                    <label for="proprietary">Proprietary Content</label>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="document-section bg-white p-6 rounded-lg border border-gray-200 hover:border-blue-300">
-                            <div class="flex items-start mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-shield-alt text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Opposition posture</h4>
-                                    <p class="text-gray-600 text-sm">Any anticipated defenses or jurisdictional/standing challenges you want to neutralize up front.</p>
-                                </div>
-                            </div>
-                            <div class="space-y-2">
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Jurisdictional challenges</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Standing challenges</span>
-                                </div>
-                                <div class="flex items-center">
-                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                                    <span>Scientific evidence validity</span>
-                                </div>
-                                <textarea class="w-full mt-2 p-2 border border-gray-300 rounded-lg h-20" placeholder="Add additional anticipated defenses..."></textarea>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-8 flex justify-end">
-                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center">
-                            <i class="fas fa-save mr-2"></i> Save All Requirements
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="tab-content" id="recommendations">
-                <div class="p-6 border-t border-gray-200">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Strengthening Recommendations</h3>
-                    
-                    <div class="space-y-6">
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <h4 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
-                                <i class="fas fa-sitemap text-blue-500 mr-2"></i> Argument Structure and Clarity
-                            </h4>
-                            <ul class="space-y-3 pl-5">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Lead with the thesis:</span> One crisp paragraph stating what the court should do and why it has the power to do it.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Standards of review:</span> Frame each issue under its standard (de novo, arbitrary/capricious, Chevron/Skidmore, harmless error) and argue to that lens.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Issue architecture:</span> Questions Presented → Summary of Argument → Jurisdiction/Standing → Standard of Review → Merits → Remedy/Scope.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Pinpoint citations:</span> Tight pincites to both authority and the record; eliminate string cites unless each adds a distinct proposition.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <h4 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
-                                <i class="fas fa-landmark text-blue-500 mr-2"></i> Jurisdiction, Standing, and Channeling
-                            </h4>
-                            <ul class="space-y-3 pl-5">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Jurisdictional hooks:</span> Cleanly state subject-matter jurisdiction, waiver of sovereign immunity, and any channeling/exhaustion exceptions.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Injury and traceability:</span> Concrete harms, not abstractions; where systemic, tie individual harm to systemic defect.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Relief tailoring:</span> Nexus between harm and remedy; show relief is no broader than necessary.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <h4 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
-                                <i class="fas fa-file-alt text-blue-500 mr-2"></i> Record and Factual Showing
-                            </h4>
-                            <ul class="space-y-3 pl-5">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Undisputed facts:</span> A short statement of material facts with precise record cites.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Systemic proof:</span> Pair individual narratives with aggregate evidence (audits, OIG/Government reports, agency dashboards) to show pattern and practice.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Procedural regularity:</span> Identify where the agency deviated from its own rules and why that matters under the APA and due process.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <h4 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
-                                <i class="fas fa-flask text-blue-500 mr-2"></i> Science and Accessibility Integration
-                            </h4>
-                            <ul class="space-y-3 pl-5">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Methodological reliability:</span> For scientific exhibits, include method, limitations, and clinical relevance in plain English to pass judicial common sense.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Accessibility standards:</span> Where relevant, anchor to WCAG conformance levels, testing results, and user-impact affidavits to translate standards into harms.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Neurogenetic evidence:</span> Tie diagnostic criteria and functional limitations directly to regulatory factors the adjudicator must consider.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <h4 class="font-bold text-lg text-gray-800 mb-3 flex items-center">
-                                <i class="fas fa-gavel text-blue-500 mr-2"></i> Remedies and Implementation
-                            </h4>
-                            <ul class="space-y-3 pl-5">
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Operable remedy plan:</span> Offer the court a workable injunction with timelines, milestones, data reporting, and a compliance mechanism (monitor/special master if warranted).
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Feasibility and costs:</span> Briefly address feasibility and burden to preempt overbreadth/undue-burden arguments.
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Fee posture:</span> Preserve EAJA and costs; if seeking structural relief, clarify enforcement and oversight within the court's equitable powers.
-                                    </div>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    
-                    <div class="mt-8 bg-blue-50 p-6 rounded-lg border border-blue-200">
-                        <h4 class="font-bold text-lg text-blue-800 mb-3 flex items-center">
-                            <i class="fas fa-lightbulb text-blue-500 mr-2"></i> Specific Recommendations for Your Case
-                        </h4>
-                        <div class="space-y-4">
-                            <div>
-                                <p class="font-medium text-gray-800">1. Neurogenetic Evidence Integration:</p>
-                                <p class="text-gray-700">Your Appendix D provides excellent cross-referencing of SNPs to SSA listings. We recommend expanding this with:</p>
-                                <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700">
-                                    <li>Brief explanations of each SNP's functional impact in lay terms</li>
-                                    <li>Citations to peer-reviewed studies supporting these associations</li>
-                                    <li>Comparison to current SSA evidentiary standards showing the gap</li>
-                                </ul>
-                            </div>
-                            <div>
-                                <p class="font-medium text-gray-800">2. Structural Injunction Specificity:</p>
-                                <p class="text-gray-700">The proposed legislative text is strong. Add:</p>
-                                <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700">
-                                    <li>Implementation timeline with milestones</li>
-                                    <li>Cost estimates for agency compliance</li>
-                                    <li>Oversight mechanism details</li>
-                                </ul>
-                            </div>
-                            <div>
-                                <p class="font-medium text-gray-800">3. Tucker Act Claim Enhancement:</p>
-                                <p class="text-gray-700">Strengthen the monetary relief argument by:</p>
-                                <ul class="list-disc pl-5 mt-2 space-y-1 text-gray-700">
-                                    <li>Including SSA payment calculation worksheets</li>
-                                    <li>Documenting all application and appeal dates</li>
-                                    <li>Showing direct causation between SSA errors and withheld benefits</li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="tab-content" id="exhibits">
-                <div class="p-6 border-t border-gray-200">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Exhibit Plan and Documentation</h3>
-                    
-                    <div class="mb-8">
-                        <h4 class="font-bold text-lg text-gray-800 mb-3">Exhibit Categories and Foundation</h4>
-                        
-                        <div class="grid md:grid-cols-2 gap-6">
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-file-archive text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Administrative Record Excerpts</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Cite to official pagination; include cover page identifying AR range.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Avoid duplicating AR materials unless necessary for readability; use record pincites.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-user-tie text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Declarations/Affidavits</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>28 U.S.C. § 1746 unsworn declaration language.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Include exhibit-specific authentication within declarations.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-building text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Official Agency Materials</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Include date/version and URL or identifier.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Request judicial notice where appropriate.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-microscope text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Scientific/Technical Literature</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Attached in full with bibliographic details.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Use short explanatory parentheticals in the brief.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-file-contract text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Audits, OIG/GAO Reports</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Authenticate with declaration if needed.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Ask for judicial notice for indisputable facts.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-envelope text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Correspondence, Notices</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Declarant with personal knowledge.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Include date, sender, recipient, and transmission method.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                            
-                            <div class="bg-white p-5 rounded-lg border border-gray-200">
-                                <div class="flex items-center mb-3">
-                                    <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                        <i class="fas fa-desktop text-blue-600"></i>
-                                    </div>
-                                    <h5 class="font-bold text-gray-800">Digital Accessibility Evidence</h5>
-                                </div>
-                                <ul class="space-y-2 text-sm text-gray-700 pl-2">
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Tester/engineer declaration detailing tools, environment, steps.</span>
-                                    </li>
-                                    <li class="flex items-start">
-                                        <i class="fas fa-check text-green-500 mt-1 mr-2 text-xs"></i>
-                                        <span>Include timestamps and pair with user impact declarations.</span>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div class="mb-8">
-                        <h4 class="font-bold text-lg text-gray-800 mb-3">Labeling, Indexing, and Redaction</h4>
-                        
-                        <div class="bg-white p-5 rounded-lg border border-gray-200">
-                            <div class="overflow-x-auto">
-                                <table class="min-w-full divide-y divide-gray-200 exhibit-table">
-                                    <thead class="bg-gray-50">
-                                        <tr>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Element</th>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Standard</th>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody class="bg-white divide-y divide-gray-200">
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Exhibit labels</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Ex. 1, Ex. 2...; sub-exhibits as Ex. 5-A</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Complete</span>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Bates numbering</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Prefix-000001 across all exhibits</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Master Exhibit Index</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Title, date, description, foundation source, confidentiality, page ranges</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Progress</span>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Redactions</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Comply with FRCP 5.2; create sealed and public versions</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Bookmarks</td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Bookmark each exhibit and major headings in the PDF</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Progress</span>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <div>
-                        <h4 class="font-bold text-lg text-gray-800 mb-3">Your Current Exhibits</h4>
-                        
-                        <div class="bg-white p-5 rounded-lg border border-gray-200">
-                            <div class="overflow-x-auto">
-                                <table class="min-w-full divide-y divide-gray-200 exhibit-table">
-                                    <thead class="bg-gray-50">
-                                        <tr>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exhibit</th>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
-                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody class="bg-white divide-y divide-gray-200">
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Appendix A</td>
-                                            <td class="px-6 py-4 text-sm text-gray-500">Functional MRI (fMRI) Evidence</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Uploaded</span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                                <a href="#" class="text-blue-600 hover:text-blue-900">Edit</a>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Appendix B</td>
-                                            <td class="px-6 py-4 text-sm text-gray-500">Bibliography of Supporting Literature</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Uploaded</span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                                <a href="#" class="text-blue-600 hover:text-blue-900">Edit</a>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Appendix C</td>
-                                            <td class="px-6 py-4 text-sm text-gray-500">SNP Data Analysis</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Uploaded</span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                                <a href="#" class="text-blue-600 hover:text-blue-900">Edit</a>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Appendix D</td>
-                                            <td class="px-6 py-4 text-sm text-gray-500">Neurogenetic Crosswalk Table</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Uploaded</span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                                <a href="#" class="text-blue-600 hover:text-blue-900">Edit</a>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Appendix E</td>
-                                            <td class="px-6 py-4 text-sm text-gray-500">Case Dockets Timeline</td>
-                                            <td class="px-6 py-4 whitespace-nowrap">
-                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Draft</span>
-                                            </td>
-                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
-                                                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                                <a href="#" class="text-blue-600 hover:text-blue-900">Edit</a>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            
-                            <div class="mt-4">
-                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                                    <i class="fas fa-plus mr-1"></i> Add New Exhibit
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="tab-content" id="templates">
-                <div class="p-6 border-t border-gray-200">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Templates</h3>
-                    
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <div class="flex items-center mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-table text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Master Exhibit Index</h4>
-                                    <p class="text-gray-600 text-sm">Fill and we'll finalize for your case</p>
-                                </div>
-                            </div>
-                            <div class="overflow-x-auto">
-                                <table class="min-w-full border border-gray-200">
-                                    <thead class="bg-gray-50">
-                                        <tr>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">No.</th>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">Bates start–end</th>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">Title/description</th>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">Date</th>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">Source/foundation</th>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">Confidentiality</th>
-                                            <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border">Notes</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                            <td class="px-4 py-2 text-sm border">1</td>
-                                            <td class="px-4 py-2 text-sm border">MCLA-000001-000015</td>
-                                            <td class="px-4 py-2 text-sm border">fMRI Analysis Report</td>
-                                            <td class="px-4 py-2 text-sm border">03/15/2023</td>
-                                            <td class="px-4 py-2 text-sm border">Neuroimaging Center</td>
-                                            <td class="px-4 py-2 text-sm border">None</td>
-                                            <td class="px-4 py-2 text-sm border">Demonstrates executive dysfunction</td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-4 py-2 text-sm border">2</td>
-                                            <td class="px-4 py-2 text-sm border">MCLA-000016-000025</td>
-                                            <td class="px-4 py-2 text-sm border">Neuropsychological Evaluation</td>
-                                            <td class="px-4 py-2 text-sm border">05/22/2023</td>
-                                            <td class="px-4 py-2 text-sm border">Dr. Smith</td>
-                                            <td class="px-4 py-2 text-sm border">PHI Redacted</td>
-                                            <td class="px-4 py-2 text-sm border">Quantifies memory deficits</td>
-                                        </tr>
-                                        <tr>
-                                            <td class="px-4 py-2 text-sm border">3</td>
-                                            <td class="px-4 py-2 text-sm border">MCLA-000026-000042</td>
-                                            <td class="px-4 py-2 text-sm border">Genetic Testing Results</td>
-                                            <td class="px-4 py-2 text-sm border">08/10/2023</td>
-                                            <td class="px-4 py-2 text-sm border">Genomics Lab</td>
-                                            <td class="px-4 py-2 text-sm border">PII Redacted</td>
-                                            <td class="px-4 py-2 text-sm border">SNP panel attached</td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                            <div class="mt-4">
-                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                                    <i class="fas fa-download mr-1"></i> Download Template
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <div class="flex items-center mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-file-signature text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Declaration Template</h4>
-                                    <p class="text-gray-600 text-sm">28 U.S.C. § 1746 format</p>
-                                </div>
-                            </div>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <pre class="text-xs text-gray-800 overflow-x-auto">DECLARATION OF [NAME]
-
-I, [Name], declare as follows:
-
-1. I am [role/qualifications]. I have personal knowledge of the facts set forth herein and could competently testify to them.
-2. [Foundation paragraph: how the declarant obtained/created the exhibit(s), dates, methods, and authenticity.]
-3. [Substantive paragraph: observations, testing methodology, results, or facts relevant to issues before the Court.]
-4. Attached as Exhibit [X] are true and correct copies of [description]. The Bates numbers for these documents are [PREFIX-000123–000256].
-
-I declare under penalty of perjury that the foregoing is true and correct.
-
-Executed on [date], at [city, state].
-
-[Signature]
-[Name]</pre>
-                            </div>
-                            <div class="mt-4">
-                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                                    <i class="fas fa-download mr-1"></i> Download Template
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <div class="flex items-center mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-lock text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Motion to Seal</h4>
-                                    <p class="text-gray-600 text-sm">Skeleton framework</p>
-                                </div>
-                            </div>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <pre class="text-xs text-gray-800 overflow-x-auto">[Caption]
-
-MOTION TO SEAL CERTAIN EXHIBITS
-
-Plaintiff respectfully moves to seal Exhibits [list], which contain [PHI/PII/proprietary details]. Good cause exists because [specific harms]. Plaintiff proposes filing redacted public versions and lodging unredacted versions under seal. This request is narrowly tailored.
-
-Dated: [date]
-                 [Signature block]</pre>
-                            </div>
-                            <div class="mt-4">
-                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                                    <i class="fas fa-download mr-1"></i> Download Template
-                                </button>
-                            </div>
-                        </div>
-                        
-                        <div class="bg-white p-6 rounded-lg border border-gray-200">
-                            <div class="flex items-center mb-4">
-                                <div class="bg-blue-100 p-3 rounded-full mr-4">
-                                    <i class="fas fa-envelope-open-text text-blue-600"></i>
-                                </div>
-                                <div>
-                                    <h4 class="font-bold text-gray-800">Certificate of Service</h4>
-                                    <p class="text-gray-600 text-sm">ECF filing format</p>
-                                </div>
-                            </div>
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <pre class="text-xs text-gray-800 overflow-x-auto">I certify that on [date], I filed the foregoing via the Court's CM/ECF system, which will send notice to all counsel of record.
-
-[Signature]</pre>
-                            </div>
-                            <div class="mt-4">
-                                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                                    <i class="fas fa-download mr-1"></i> Download Template
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="tab-content" id="checklist">
-                <div class="p-6 border-t border-gray-200">
-                    <h3 class="text-xl font-semibold text-gray-800 mb-4">Final Delivery Checklist</h3>
-                    
-                    <div class="bg-white p-6 rounded-lg border border-gray-200">
-                        <div class="space-y-4">
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check1" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check1" class="font-medium text-gray-800">Clean architecture</label>
-                                    <p class="text-sm text-gray-600">Questions Presented, Summary, Jurisdiction/Standing, Standard of Review, Merits, Remedy all present and aligned.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check2" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check2" class="font-medium text-gray-800">Tight prose</label>
-                                    <p class="text-sm text-gray-600">Remove redundancies; lead each section with a clear, outcome-oriented topic sentence.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check3" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check3" class="font-medium text-gray-800">Pincites everywhere</label>
-                                    <p class="text-sm text-gray-600">Authority and record have precise pincites; authorities italicized per Bluebook; short forms consistent.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check4" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check4" class="font-medium text-gray-800">Exhibit calls</label>
-                                    <p class="text-sm text-gray-600">In-text calls like (Ex. 7 at 12–14; AR 1234–36); match the Master Index.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check5" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check5" class="font-medium text-gray-800">Exhibits filed properly</label>
-                                    <p class="text-sm text-gray-600">Bates, bookmarks, redactions, and any motions to seal included.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check6" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check6" class="font-medium text-gray-800">TOC/TOA</label>
-                                    <p class="text-sm text-gray-600">Auto-generated, accurate page numbers; authorities sorted correctly.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check7" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check7" class="font-medium text-gray-800">Signature and compliance</label>
-                                    <p class="text-sm text-gray-600">Signature block, word-count certificate if required, and local-rule compliance.</p>
-                                </div>
-                            </div>
-                            
-                            <div class="flex items-start">
-                                <input type="checkbox" id="check8" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                <div>
-                                    <label for="check8" class="font-medium text-gray-800">Accessibility</label>
-                                    <p class="text-sm text-gray-600">PDFs are tagged, readable text (no image-only), and headings/bookmarks reflect structure.</p>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="mt-8">
-                            <h4 class="font-bold text-lg text-gray-800 mb-3">Case-Specific Checklist Items</h4>
-                            
-                            <div class="space-y-4">
-                                <div class="flex items-start">
-                                    <input type="checkbox" id="check9" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded" checked>
-                                    <div>
-                                        <label for="check9" class="font-medium text-gray-800">Neurogenetic evidence properly cited</label>
-                                        <p class="text-sm text-gray-600">All SNP data cross-referenced to SSA listings in Appendix D.</p>
-                                    </div>
-                                </div>
-                                
-                                <div class="flex items-start">
-                                    <input type="checkbox" id="check10" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded" checked>
-                                    <div>
-                                        <label for="check10" class="font-medium text-gray-800">fMRI methodology explained</label>
-                                        <p class="text-sm text-gray-600">Technical details translated for judicial understanding in Appendix A.</p>
-                                    </div>
-                                </div>
-                                
-                                <div class="flex items-start">
-                                    <input type="checkbox" id="check11" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                    <div>
-                                        <label for="check11" class="font-medium text-gray-800">Tucker Act damages calculated</label>
-                                        <p class="text-sm text-gray-600">$43,200 figure supported by payment records and timeline.</p>
-                                    </div>
-                                </div>
-                                
-                                <div class="flex items-start">
-                                    <input type="checkbox" id="check12" class="mt-1 mr-3 h-5 w-5 text-blue-600 rounded">
-                                    <div>
-                                        <label for="check12" class="font-medium text-gray-800">Legislative mandate feasibility</label>
-                                        <p class="text-sm text-gray-600">$243 million allocation justified with implementation plan.</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="mt-8 flex justify-between items-center">
-                            <div>
-                                <p class="text-sm text-gray-600">Progress: <span class="font-medium">65% complete</span></p>
-                                <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
-                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 65%"></div>
-                                </div>
-                            </div>
-                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium">
-                                <i class="fas fa-file-export mr-2"></i> Generate Final Report
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        
-        <div class="bg-white rounded-xl shadow-md overflow-hidden mt-8">
-            <div class="p-6 border-b border-gray-200">
-                <h3 class="text-xl font-semibold text-gray-800 mb-2">Next Steps</h3>
-                <p class="text-gray-600 mb-4">Send us the following to proceed with finalizing your filing:</p>
-                
-                <div class="grid md:grid-cols-3 gap-6">
-                    <div class="bg-blue-50 p-5 rounded-lg border border-blue-200">
-                        <div class="flex items-center mb-3">
-                            <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                <i class="fas fa-file-text text-blue-600"></i>
-                            </div>
-                            <h4 class="font-bold text-blue-800">Document Text</h4>
-                        </div>
-                        <p class="text-sm text-gray-700">The document text (even in chunks)</p>
-                        <button class="mt-3 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                            <i class="fas fa-upload mr-1"></i> Upload Documents
-                        </button>
-                    </div>
-                    
-                    <div class="bg-blue-50 p-5 rounded-lg border border-blue-200">
-                        <div class="flex items-center mb-3">
-                            <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                <i class="fas fa-gavel text-blue-600"></i>
-                            </div>
-                            <h4 class="font-bold text-blue-800">Court Details</h4>
-                        </div>
-                        <p class="text-sm text-gray-700">The court/posture and deadline</p>
-                        <button class="mt-3 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                            <i class="fas fa-edit mr-1"></i> Review Details
-                        </button>
-                    </div>
-                    
-                    <div class="bg-blue-50 p-5 rounded-lg border border-blue-200">
-                        <div class="flex items-center mb-3">
-                            <div class="bg-blue-100 p-2 rounded-full mr-3">
-                                <i class="fas fa-folder-open text-blue-600"></i>
-                            </div>
-                            <h4 class="font-bold text-blue-800">Exhibit List</h4>
-                        </div>
-                        <p class="text-sm text-gray-700">Your current or tentative exhibit list (even rough)</p>
-                        <button class="mt-3 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
-                            <i class="fas fa-list mr-1"></i> Manage Exhibits
-                        </button>
-                    </div>
-                </div>
-                
-                <div class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4">
-                    <div class="flex">
-                        <div class="flex-shrink-0">
-                            <i class="fas fa-exclamation-circle text-yellow-400 mt-1"></i>
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-sm text-yellow-700">
-                                <span class="font-medium">Important:</span> Once submitted, we'll tighten the argument, insert precise record and authority pincites, build the Master Exhibit Index, draft needed declarations/motions to seal, and return a filing-ready brief with exhibits and a compliance checklist.
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="bg-gray-50 px-6 py-4 flex justify-end">
-                <button class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium flex items-center">
-                    <i class="fas fa-paper-plane mr-2"></i> Submit All Materials
-                </button>
-            </div>
-        </div>
-    </main>
-
-    <footer class="bg-gray-800 text-white py-8">
-        <div class="container mx-auto px-4">
-            <div class="grid md:grid-cols-4 gap-8">
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Caustino Legal Services</h3>
-                    <p class="text-gray-400 text-sm">Specializing in SSDI appeals and disability rights litigation with a focus on neurogenetic evidence integration.</p>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
-                    <ul class="space-y-2 text-gray-400">
-                        <li><a href="#" class="hover:text-white">Home</a></li>
-                        <li><a href="#" class="hover:text-white">Services</a></li>
-                        <li><a href="#" class="hover:text-white">Resources</a></li>
-                        <li><a href="#" class="hover:text-white">Contact</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
-                    <ul class="space-y-2 text-gray-400">
-                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 123 Legal Ave, Suite 400</li>
-                        <li class="flex items-center"><i class="fas fa-phone mr-2"></i> (555) 123-4567</li>
-                        <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> help@caustinolegal.com</li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-semibold mb-4">Follow Us</h3>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter fa-lg"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin fa-lg"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook fa-lg"></i></a>
-                    </div>
-                </div>
-            </div>
-            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400 text-sm">
-                <p>© 2024 Caustino Legal Services. All rights reserved.</p>
-            </div>
-        </div>
-    </footer>
-
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lexend:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script>
-        // Tab functionality
-        const tabBtns = document.querySelectorAll('.tab-btn');
-        const tabContents = document.querySelectorAll('.tab-content');
-        
-        tabBtns.forEach(btn => {
-            btn.addEventListener('click', () => {
-                // Remove active class from all buttons and contents
-                tabBtns.forEach(b => b.classList.remove('active', 'border-blue-600', 'text-blue-600'));
-                tabContents.forEach(c => c.classList.remove('active'));
-                
-                // Add active class to clicked button
-                btn.classList.add('active', 'border-blue-600', 'text-blue-600');
-                
-                // Show corresponding content
-                const tabId = btn.getAttribute('data-tab');
-                document.getElementById(tabId).classList.add('active');
-            });
-        });
-        
-        // Simulate progress update
-        setTimeout(() => {
-            document.querySelector('.progress-bar').style.width = '75%';
-        }, 1000);
-        
-        // Tooltip functionality
-        const tooltipTriggers = document.querySelectorAll('.has-tooltip');
-        tooltipTriggers.forEach(trigger => {
-            trigger.addEventListener('mouseenter', () => {
-                const tooltip = trigger.querySelector('.tooltip');
-                if (tooltip) {
-                    tooltip.style.visibility = 'visible';
-                    tooltip.style.opacity = '1';
-                }
-            });
-            trigger.addEventListener('mouseleave', () => {
-                const tooltip = trigger.querySelector('.tooltip');
-                if (tooltip) {
-                    tooltip.style.visibility = 'hidden';
-                    tooltip.style.opacity = '0';
-                }
-            });
-        });
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+              display: ['Lexend', 'sans-serif'],
+            },
+            colors: {
+              'brand-primary': '#4F46E5',
+              'brand-secondary': '#7C3AED',
+              'gray': {
+                50: '#F9FAFB',
+                100: '#F3F4F6',
+                200: '#E5E7EB',
+                300: '#D1D5DB',
+                400: '#9CA3AF',
+                500: '#6B7280',
+                600: '#4B5563',
+                700: '#374151',
+                800: '#1F2937',
+                900: '#111827',
+                950: '#030712'
+              }
+            }
+          }
+        }
+      }
     </script>
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.1.1",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.1/",
+    "react/": "https://esm.sh/react@^19.1.1/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.14.0"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body class="bg-gray-950 text-gray-100 font-sans">
+    <div id="root"></div>
+<script type="module" src="/index.tsx"></script>
 </body>
-</html>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "SSDI Case Prep Assistant",
+  "description": "An intelligent assistant to help users organize and strengthen their legal documents for SSDI cases. It provides a structured plan to gather necessary information, track progress, and follow AI-powered recommendations.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "ssdi-case-prep-assistant",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "@google/genai": "^1.14.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

services/geminiService.ts

@@ -0,0 +1,93 @@
+
+import { GoogleGenAI, Type } from "@google/genai";
+import type { ActionPlan, CaseData } from '../types';
+
+if (!process.env.API_KEY) {
+    throw new Error("API_KEY environment variable is not set");
+}
+
+const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+
+const responseSchema = {
+    type: Type.OBJECT,
+    properties: {
+        title: { type: Type.STRING, description: "A concise title for the action plan." },
+        summary: { type: Type.STRING, description: "A brief summary of the action plan and its goals." },
+        categories: {
+            type: Type.ARRAY,
+            description: "A list of categories for action items, e.g., 'Medical Documentation', 'Work History Evidence'.",
+            items: {
+                type: Type.OBJECT,
+                properties: {
+                    category: { type: Type.STRING, description: "The name of the category." },
+                    description: { type: Type.STRING, description: "A short description of this category's purpose." },
+                    items: {
+                        type: Type.ARRAY,
+                        description: "A list of specific action items within this category.",
+                        items: {
+                            type: Type.OBJECT,
+                            properties: {
+                                item: { type: Type.STRING, description: "The specific action item or task to complete." },
+                                description: { type: Type.STRING, description: "A detailed explanation of why this item is important and how to complete it." },
+                                status: { type: Type.STRING, description: "The initial status, which should always be 'Not Started'." }
+                            },
+                            required: ["item", "description", "status"]
+                        }
+                    }
+                },
+                required: ["category", "description", "items"]
+            }
+        }
+    },
+    required: ["title", "summary", "categories"]
+};
+
+
+const createPrompt = (data: CaseData): string => {
+    return `
+    Analyze the following Social Security Disability Insurance (SSDI) case details and generate a comprehensive, step-by-step action plan for the applicant.
+
+    **Applicant's Case Details:**
+    - **Age:** ${data.age}
+    - **Diagnosed Medical Conditions:** ${data.medicalConditions}
+    - **Summary of Work History (last 15 years):** ${data.workHistory}
+    - **Daily Limitations and Difficulties:** ${data.limitations}
+
+    **Your Task:**
+    Create a detailed action plan in JSON format. The plan should be structured to guide the applicant in gathering the necessary evidence to build a strong SSDI claim. 
+    
+    **Key areas to cover in the plan:**
+    1.  **Medical Documentation:** Gathering records, doctor's statements, test results, etc.
+    2.  **Work History Evidence:** Documenting past jobs, job duties, and why they can no longer be performed.
+    3.  **Activities of Daily Living (ADL):** Creating logs or journals that detail daily struggles.
+    4.  **Third-Party Evidence:** Obtaining statements from family, friends, or former colleagues.
+
+    For each action item, provide a clear task ("item") and a detailed "description" explaining its importance and providing guidance. Every item's initial "status" must be "Not Started".
+
+    Generate the output strictly following the provided JSON schema.
+    `;
+};
+
+
+export const generateActionPlan = async (data: CaseData): Promise<ActionPlan> => {
+    const prompt = createPrompt(data);
+
+    try {
+        const response = await ai.models.generateContent({
+            model: "gemini-2.5-flash",
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: responseSchema,
+                temperature: 0.5,
+            },
+        });
+
+        const jsonString = response.text.trim();
+        const plan: ActionPlan = JSON.parse(jsonString);
+        return plan;
+    } catch (error) {
+        console.error("Error calling Gemini API:", error);
+        throw new Error("Failed to generate action plan from Gemini API.");
+    }
+};

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,27 @@
+
+export type ActionItemStatus = 'Not Started' | 'In Progress' | 'Completed';
+
+export interface ActionItem {
+    item: string;
+    description: string;
+    status: ActionItemStatus;
+}
+
+export interface PlanCategory {
+    category: string;
+    description: string;
+    items: ActionItem[];
+}
+
+export interface ActionPlan {
+    title: string;
+    summary: string;
+    categories: PlanCategory[];
+}
+
+export interface CaseData {
+    age: string;
+    medicalConditions: string;
+    workHistory: string;
+    limitations: string;
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});