feat(worksheets): make progressive difficulty available in both Smart and Manual modes

Moved the progressive difficulty checkbox outside mode-specific sections
so it's available for both Smart and Manual modes.

Previously: Only available in Manual mode
Now: Available in both modes as a shared setting

The checkbox is now in its own card section below mode-specific controls,
making it clear that it applies regardless of which mode is selected.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/.claude/settings.local.json

@@ -173,7 +173,8 @@
       "Bash(git hash-object:*)",
       "Bash(git ls-tree:*)",
       "Bash(git -C /Users/antialias/projects/soroban-abacus-flashcards show HEAD:apps/web/src/app/icon/route.tsx)",
-      "Bash(git -C /Users/antialias/projects/soroban-abacus-flashcards show HEAD:apps/web/package.json)"
+      "Bash(git -C /Users/antialias/projects/soroban-abacus-flashcards show HEAD:apps/web/package.json)",
+      "Bash(git revert:*)"
     ],
     "deny": [],
     "ask": []

apps/web/src/app/create/worksheets/addition/components/ConfigPanel.tsx

@@ -2021,32 +2021,43 @@ export function ConfigPanel({ formState, onChange }: ConfigPanelProps) {
                 Regrouping difficulty at worksheet start (Both = all columns regroup, Any = at least
                 one column regroups)
               </div>
-
-              {/* Progressive difficulty checkbox */}
-              <div className={css({ display: 'flex', gap: '2', alignItems: 'center', mt: '1' })}>
-                <input
-                  id="interpolate-manual"
-                  type="checkbox"
-                  checked={formState.interpolate ?? true}
-                  onChange={(e) => onChange({ interpolate: e.target.checked })}
-                  className={css({ w: '3.5', h: '3.5', cursor: 'pointer', flexShrink: 0 })}
-                />
-                <label
-                  htmlFor="interpolate-manual"
-                  className={css({
-                    fontSize: 'xs',
-                    fontWeight: 'medium',
-                    color: 'gray.600',
-                    cursor: 'pointer',
-                  })}
-                >
-                  Progressive difficulty (easy → hard throughout worksheet)
-                </label>
-              </div>
             </div>
           </div>
         </>
       )}
+
+      {/* Progressive difficulty checkbox - Available for both Smart and Manual modes */}
+      <div
+        data-section="progressive-difficulty"
+        className={css({
+          bg: 'gray.50',
+          border: '1px solid',
+          borderColor: 'gray.200',
+          rounded: 'xl',
+          p: '3',
+        })}
+      >
+        <div className={css({ display: 'flex', gap: '2', alignItems: 'center' })}>
+          <input
+            id="interpolate"
+            type="checkbox"
+            checked={formState.interpolate ?? true}
+            onChange={(e) => onChange({ interpolate: e.target.checked })}
+            className={css({ w: '3.5', h: '3.5', cursor: 'pointer', flexShrink: 0 })}
+          />
+          <label
+            htmlFor="interpolate"
+            className={css({
+              fontSize: 'xs',
+              fontWeight: 'medium',
+              color: 'gray.600',
+              cursor: 'pointer',
+            })}
+          >
+            Progressive difficulty (easy → hard throughout worksheet)
+          </label>
+        </div>
+      </div>
     </div>
   )
 }