From 56742c511dff81b597eab84f28b64bd0d4ff6499 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Thu, 18 Dec 2025 10:49:49 -0600
Subject: [PATCH] fix(StartPracticeModal): responsive improvements + integrated
 tutorial CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Full-screen mode at ≤700px height for iPhone SE support
- Two-column grid layout for settings in landscape mode
- Integrated tutorial CTA: combines unlock banner + start button
- Fixed collapsed mode clipping of target skills section
- Made "focusing on weak skills" visible on all screen sizes
- Fixed duplicate CSS media query breakpoints
- BKT: changed computeBktFromHistory to accept Partial<BktComputeExtendedOptions>

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../practice/StartPracticeModal.tsx           | 914 +++++++++++-------
 .../web/src/lib/curriculum/bkt/compute-bkt.ts |  12 +-
 2 files changed, 577 insertions(+), 349 deletions(-)

diff --git a/apps/web/src/components/practice/StartPracticeModal.tsx b/apps/web/src/components/practice/StartPracticeModal.tsx
index 9ea9d250..3bd3b81e 100644
--- a/apps/web/src/components/practice/StartPracticeModal.tsx
+++ b/apps/web/src/components/practice/StartPracticeModal.tsx
@@ -7,7 +7,6 @@ import { useCallback, useMemo, useState } from 'react'
 import { useTheme } from '@/contexts/ThemeContext'
 import type { SessionPlan } from '@/db/schema/session-plans'
 import { DEFAULT_PLAN_CONFIG } from '@/db/schema/session-plans'
-import type { ProblemGenerationMode } from '@/lib/curriculum/config'
 import {
   ActiveSessionExistsClientError,
   NoSkillsEnabledClientError,
@@ -103,8 +102,6 @@ export function StartPracticeModal({
   const [abacusMaxTerms, setAbacusMaxTerms] = useState(
     DEFAULT_PLAN_CONFIG.abacusTermCount?.max ?? 5
   )
-  const [problemGenerationMode, setProblemGenerationMode] =
-    useState<ProblemGenerationMode>('adaptive-bkt')
 
   const togglePart = useCallback((partType: keyof EnabledParts) => {
     setEnabledParts((prev) => {
@@ -234,7 +231,7 @@ export function StartPracticeModal({
             durationMinutes,
             abacusTermCount: { min: 3, max: abacusMaxTerms },
             enabledParts,
-            problemGenerationMode,
+            problemGenerationMode: 'adaptive-bkt',
           })
         } catch (err) {
           if (err instanceof ActiveSessionExistsClientError) {
@@ -258,7 +255,6 @@ export function StartPracticeModal({
     durationMinutes,
     abacusMaxTerms,
     enabledParts,
-    problemGenerationMode,
     existingPlan,
     generatePlan,
     approvePlan,
@@ -361,8 +357,6 @@ export function StartPracticeModal({
             transform: 'translate(-50%, -50%)',
             width: 'calc(100% - 2rem)',
             maxWidth: '360px',
-            maxHeight: 'calc(100vh - 2rem)',
-            overflowY: 'auto',
             borderRadius: '20px',
             boxShadow: '0 20px 50px -12px rgba(0, 0, 0, 0.4)',
             zIndex: 1001,
@@ -371,6 +365,19 @@ export function StartPracticeModal({
               width: 'auto',
               minWidth: '360px',
             },
+            // Full-screen on short viewports
+            '@media (max-height: 700px)': {
+              top: 0,
+              left: 0,
+              transform: 'none',
+              width: '100%',
+              maxWidth: 'none',
+              height: '100%',
+              borderRadius: 0,
+              boxShadow: 'none',
+              display: 'flex',
+              flexDirection: 'column',
+            },
           })}
           style={{
             background: isDark
@@ -381,6 +388,7 @@ export function StartPracticeModal({
           <Dialog.Close asChild>
             <button
               type="button"
+              data-action="close-modal"
               className={css({
                 position: 'absolute',
                 top: '0.75rem',
@@ -401,6 +409,13 @@ export function StartPracticeModal({
                   backgroundColor: isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)',
                   color: isDark ? 'gray.300' : 'gray.600',
                 },
+                '@media (max-height: 700px)': {
+                  top: '0.375rem',
+                  right: '0.375rem',
+                  width: '24px',
+                  height: '24px',
+                  fontSize: '0.75rem',
+                },
               })}
               aria-label="Close"
             >
@@ -408,15 +423,68 @@ export function StartPracticeModal({
             </button>
           </Dialog.Close>
 
-          <div className={css({ padding: '1.5rem' })}>
+          <div
+            data-section="modal-content"
+            data-expanded={isExpanded}
+            className={css({
+              padding: '1.5rem',
+              // Full-screen mode: center content vertically
+              '@media (max-height: 700px)': {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'center',
+                padding: '1rem',
+                paddingTop: '2.5rem', // Account for close button
+              },
+              // Landscape mode: single column, more compact, scrollable if needed
+              '@media (max-height: 500px) and (orientation: landscape)': {
+                padding: '0.75rem 2rem',
+                paddingTop: '2rem',
+                overflowY: 'auto',
+                justifyContent: 'flex-start',
+              },
+            })}
+          >
             {/* Header */}
-            <div className={css({ textAlign: 'center', marginBottom: '1.25rem' })}>
-              <div className={css({ fontSize: '2rem', marginBottom: '0.375rem' })}>🎯</div>
+            <div
+              data-section="header"
+              className={css({
+                textAlign: 'center',
+                marginBottom: '1.25rem',
+                // Minimal header on full-screen mobile
+                '@media (max-height: 700px)': {
+                  marginBottom: '0.5rem',
+                },
+                // Landscape: even more compact header
+                '@media (max-height: 500px) and (orientation: landscape)': {
+                  marginBottom: '0.375rem',
+                },
+              })}
+            >
+              <div
+                data-element="header-icon"
+                className={css({
+                  fontSize: '2rem',
+                  marginBottom: '0.375rem',
+                  // Hide icon on small screens to save vertical space
+                  '@media (max-height: 700px)': {
+                    display: 'none',
+                  },
+                })}
+              >
+                🎯
+              </div>
               <Dialog.Title
                 className={css({
                   fontSize: '1.5rem',
                   fontWeight: 'bold',
                   marginBottom: '0.25rem',
+                  // Smaller title on full-screen mobile
+                  '@media (max-height: 700px)': {
+                    fontSize: '1.125rem',
+                    marginBottom: '0.125rem',
+                  },
                 })}
                 style={{
                   background: isDark
@@ -433,20 +501,47 @@ export function StartPracticeModal({
                 className={css({
                   fontSize: '0.875rem',
                   color: isDark ? 'gray.400' : 'gray.500',
+                  // Hide description on small portrait screens to save space
+                  '@media (max-height: 700px)': {
+                    display: 'none',
+                  },
+                  // Also hidden in landscape
+                  '@media (max-height: 500px) and (orientation: landscape)': {
+                    display: 'none',
+                  },
                 })}
               >
                 {focusDescription}
               </Dialog.Description>
             </div>
 
-            {/* Session config card */}
+            {/* Config and action wrapper */}
             <div
+              data-section="config-and-action"
               className={css({
-                borderRadius: '12px',
-                marginBottom: '1rem',
-                overflow: 'hidden',
-                transition: 'all 0.3s ease',
+                display: 'contents',
+                '@media (max-height: 500px) and (min-width: 500px)': {
+                  display: 'flex',
+                  flexDirection: 'column',
+                  flex: 1,
+                  minHeight: 0,
+                  overflow: 'hidden',
+                },
               })}
+            >
+              {/* Session config card */}
+              <div
+                data-section="session-config"
+                className={css({
+                  borderRadius: '12px',
+                  marginBottom: '1rem',
+                  overflow: 'hidden',
+                  transition: 'all 0.3s ease',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '0.5rem',
+                    borderRadius: '8px',
+                  },
+                })}
               style={{
                 background: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
                 border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
@@ -454,17 +549,19 @@ export function StartPracticeModal({
             >
               {/* Summary view (collapses when expanded) */}
               <div
+                data-section="config-summary"
                 className={css({
                   overflow: 'hidden',
                   transition: 'all 0.3s ease',
                 })}
                 style={{
-                  maxHeight: isExpanded ? '0px' : '80px',
+                  maxHeight: isExpanded ? '0px' : '140px',
                   opacity: isExpanded ? 0 : 1,
                 }}
               >
                 <button
                   type="button"
+                  data-action="expand-config"
                   onClick={() => setIsExpanded(true)}
                   className={css({
                     width: '100%',
@@ -480,21 +577,30 @@ export function StartPracticeModal({
                     _hover: {
                       backgroundColor: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.02)',
                     },
+                    '@media (max-height: 700px)': {
+                      padding: '0.75rem',
+                      gap: '0.5rem',
+                    },
                   })}
                 >
                   {/* Duration */}
-                  <div className={css({ textAlign: 'center' })}>
+                  <div data-element="duration-summary" className={css({ textAlign: 'center' })}>
                     <div
+                      data-value="duration-minutes"
                       className={css({
                         fontSize: '1.5rem',
                         fontWeight: 'bold',
                         color: isDark ? 'blue.300' : 'blue.600',
                         lineHeight: 1,
+                        '@media (max-height: 700px)': {
+                          fontSize: '1.25rem',
+                        },
                       })}
                     >
                       {durationMinutes}
                     </div>
                     <div
+                      data-label="duration"
                       className={css({
                         fontSize: '0.6875rem',
                         color: isDark ? 'gray.500' : 'gray.500',
@@ -515,22 +621,30 @@ export function StartPracticeModal({
                   </div>
 
                   {/* Problems */}
-                  <div className={css({ textAlign: 'center' })}>
+                  <div data-element="problems-summary" className={css({ textAlign: 'center' })}>
                     <div
+                      data-value="problems-count"
                       className={css({
                         fontSize: '1.5rem',
                         fontWeight: 'bold',
                         color: isDark ? 'green.300' : 'green.600',
                         lineHeight: 1,
+                        '@media (max-height: 700px)': {
+                          fontSize: '1.25rem',
+                        },
                       })}
                     >
                       ~{estimatedProblems}
                     </div>
                     <div
+                      data-label="problems"
                       className={css({
                         fontSize: '0.6875rem',
                         color: isDark ? 'gray.500' : 'gray.500',
                         marginTop: '0.125rem',
+                        '@media (max-height: 700px)': {
+                          fontSize: '0.625rem',
+                        },
                       })}
                     >
                       problems
@@ -541,6 +655,9 @@ export function StartPracticeModal({
                     className={css({
                       fontSize: '0.875rem',
                       color: isDark ? 'gray.600' : 'gray.300',
+                      '@media (max-height: 700px)': {
+                        fontSize: '0.75rem',
+                      },
                     })}
                   >
                     •
@@ -548,15 +665,20 @@ export function StartPracticeModal({
 
                   {/* Modes with problem counts underneath */}
                   <div
+                    data-element="modes-summary"
                     className={css({
                       display: 'flex',
                       justifyContent: 'center',
                       gap: '0.5rem',
+                      '@media (max-height: 700px)': {
+                        gap: '0.375rem',
+                      },
                     })}
                   >
                     {PART_TYPES.filter((p) => enabledParts[p.type]).map(({ type, emoji }) => (
                       <div
                         key={type}
+                        data-mode={type}
                         className={css({
                           display: 'flex',
                           flexDirection: 'column',
@@ -564,13 +686,28 @@ export function StartPracticeModal({
                           gap: '0',
                         })}
                       >
-                        <span className={css({ fontSize: '1.25rem', lineHeight: 1 })}>{emoji}</span>
                         <span
+                          data-element="mode-icon"
+                          className={css({
+                            fontSize: '1.25rem',
+                            lineHeight: 1,
+                            '@media (max-height: 700px)': {
+                              fontSize: '1rem',
+                            },
+                          })}
+                        >
+                          {emoji}
+                        </span>
+                        <span
+                          data-element="mode-count"
                           className={css({
                             fontSize: '0.6875rem',
                             fontWeight: '600',
                             lineHeight: 1,
                             marginTop: '0.125rem',
+                            '@media (max-height: 700px)': {
+                              fontSize: '0.625rem',
+                            },
                           })}
                           style={{ color: isDark ? '#22c55e' : '#16a34a' }}
                         >
@@ -582,23 +719,32 @@ export function StartPracticeModal({
 
                   {/* Expand indicator */}
                   <div
+                    data-element="expand-indicator"
                     className={css({
                       marginLeft: '0.25rem',
                       fontSize: '0.625rem',
                       color: isDark ? 'gray.500' : 'gray.400',
+                      '@media (max-height: 700px)': {
+                        fontSize: '0.5rem',
+                        marginLeft: '0.125rem',
+                      },
                     })}
                   >
                     ▼
                   </div>
                 </button>
 
-                {/* Target skills summary - shown when adaptive-bkt mode is selected */}
-                {problemGenerationMode === 'adaptive-bkt' && targetSkillsInfo.hasData && (
+                {/* Target skills summary */}
+                {targetSkillsInfo.hasData && (
                   <div
+                    data-element="target-skills-summary"
                     className={css({
                       padding: '0.5rem 1rem',
                       borderTop: '1px solid',
                       borderColor: isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)',
+                      '@media (max-height: 700px)': {
+                        padding: '0.25rem 0.5rem',
+                      },
                       display: 'flex',
                       alignItems: 'center',
                       justifyContent: 'center',
@@ -609,6 +755,7 @@ export function StartPracticeModal({
                     {targetSkillsInfo.targetedSkills.length > 0 ? (
                       <>
                         <span
+                          data-element="targeting-label"
                           className={css({
                             fontSize: '0.6875rem',
                             color: isDark ? 'amber.400' : 'amber.600',
@@ -620,6 +767,7 @@ export function StartPracticeModal({
                         {targetSkillsInfo.targetedSkills.slice(0, 3).map((skill, i) => (
                           <span
                             key={skill.skillId}
+                            data-skill={skill.skillId}
                             className={css({
                               fontSize: '0.6875rem',
                               color: isDark ? 'gray.400' : 'gray.600',
@@ -631,6 +779,7 @@ export function StartPracticeModal({
                         ))}
                         {targetSkillsInfo.targetedSkills.length > 3 && (
                           <span
+                            data-element="skills-overflow"
                             className={css({
                               fontSize: '0.6875rem',
                               color: isDark ? 'gray.500' : 'gray.500',
@@ -642,6 +791,7 @@ export function StartPracticeModal({
                       </>
                     ) : (
                       <span
+                        data-element="even-distribution-message"
                         className={css({
                           fontSize: '0.6875rem',
                           color: isDark ? 'gray.500' : 'gray.500',
@@ -656,9 +806,14 @@ export function StartPracticeModal({
 
               {/* Expanded config panel */}
               <div
+                data-section="config-expanded"
                 className={css({
                   overflow: 'hidden',
                   transition: 'all 0.3s ease',
+                  '@media (max-height: 500px) and (min-width: 500px)': {
+                    overflow: 'auto',
+                    maxHeight: '100%',
+                  },
                 })}
                 style={{
                   maxHeight: isExpanded ? '520px' : '0px',
@@ -671,11 +826,92 @@ export function StartPracticeModal({
                     display: 'flex',
                     flexDirection: 'column',
                     gap: '0.875rem',
+                    '@media (max-height: 700px)': {
+                      padding: '0.5rem',
+                      gap: '0.375rem',
+                    },
                   })}
                 >
+                  {/* Expanded header with collapse button */}
+                  <div
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'space-between',
+                      marginBottom: '-0.25rem',
+                      '@media (max-height: 700px)': {
+                        marginBottom: '-0.125rem',
+                      },
+                    })}
+                  >
+                    <span
+                      className={css({
+                        fontSize: '0.75rem',
+                        fontWeight: '600',
+                        color: isDark ? 'gray.400' : 'gray.500',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                        '@media (max-height: 700px)': {
+                          fontSize: '0.625rem',
+                        },
+                      })}
+                    >
+                      Session Settings
+                    </span>
+                    <button
+                      type="button"
+                      data-action="collapse-settings"
+                      onClick={() => setIsExpanded(false)}
+                      className={css({
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '0.25rem',
+                        padding: '0.25rem 0.5rem',
+                        fontSize: '0.6875rem',
+                        fontWeight: '500',
+                        color: isDark ? 'gray.400' : 'gray.500',
+                        backgroundColor: isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.03)',
+                        border: 'none',
+                        borderRadius: '4px',
+                        cursor: 'pointer',
+                        transition: 'all 0.15s ease',
+                        _hover: {
+                          backgroundColor: isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)',
+                          color: isDark ? 'gray.300' : 'gray.600',
+                        },
+                        '@media (max-height: 700px)': {
+                          padding: '0.125rem 0.375rem',
+                          fontSize: '0.5625rem',
+                        },
+                      })}
+                    >
+                      <span>▲</span>
+                      <span>Collapse</span>
+                    </button>
+                  </div>
+
+                  {/* Settings grid - 2 columns in landscape */}
+                  <div
+                    data-element="settings-grid"
+                    className={css({
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '0.875rem',
+                      '@media (max-height: 700px)': {
+                        gap: '0.375rem',
+                      },
+                      '@media (max-height: 500px) and (min-width: 500px)': {
+                        display: 'grid',
+                        gridTemplateColumns: '1fr 1fr',
+                        gap: '0.5rem',
+                      },
+                    })}
+                  >
+
                   {/* Duration options */}
-                  <div>
+                  <div data-setting="duration">
                     <div
+                      data-element="duration-label"
                       className={css({
                         fontSize: '0.6875rem',
                         fontWeight: '600',
@@ -683,11 +919,15 @@ export function StartPracticeModal({
                         textTransform: 'uppercase',
                         letterSpacing: '0.05em',
                         marginBottom: '0.5rem',
+                        '@media (max-height: 700px)': {
+                          marginBottom: '0.25rem',
+                          fontSize: '0.625rem',
+                        },
                       })}
                     >
                       Duration
                     </div>
-                    <div className={css({ display: 'flex', gap: '0.375rem' })}>
+                    <div data-element="duration-options" className={css({ display: 'flex', gap: '0.375rem', '@media (max-height: 700px)': { gap: '0.25rem' } })}>
                       {[5, 10, 15, 20].map((min) => {
                         // Estimate problems for this duration using current settings
                         const enabledPartTypes = PART_TYPES.filter((p) => enabledParts[p.type]).map(
@@ -709,6 +949,8 @@ export function StartPracticeModal({
                           <button
                             key={min}
                             type="button"
+                            data-option={`duration-${min}`}
+                            data-selected={isSelected}
                             onClick={() => setDurationMinutes(min)}
                             className={css({
                               flex: 1,
@@ -721,6 +963,11 @@ export function StartPracticeModal({
                               border: '2px solid',
                               cursor: 'pointer',
                               transition: 'all 0.15s ease',
+                              '@media (max-height: 700px)': {
+                                padding: '0.375rem 0.125rem',
+                                borderRadius: '6px',
+                                gap: '0',
+                              },
                             })}
                             style={{
                               borderColor: isSelected
@@ -738,7 +985,13 @@ export function StartPracticeModal({
                             }}
                           >
                             <span
-                              className={css({ fontSize: '0.9375rem', fontWeight: '600' })}
+                              className={css({
+                                fontSize: '0.9375rem',
+                                fontWeight: '600',
+                                '@media (max-height: 700px)': {
+                                  fontSize: '0.8125rem',
+                                },
+                              })}
                               style={{
                                 color: isSelected
                                   ? isDark
@@ -752,7 +1005,12 @@ export function StartPracticeModal({
                               {min}m
                             </span>
                             <span
-                              className={css({ fontSize: '0.625rem' })}
+                              className={css({
+                                fontSize: '0.625rem',
+                                '@media (max-height: 700px)': {
+                                  fontSize: '0.5625rem',
+                                },
+                              })}
                               style={{ color: isDark ? '#64748b' : '#94a3b8' }}
                             >
                               ~{problems}
@@ -764,8 +1022,9 @@ export function StartPracticeModal({
                   </div>
 
                   {/* Modes */}
-                  <div>
+                  <div data-setting="practice-modes">
                     <div
+                      data-element="modes-label"
                       className={css({
                         fontSize: '0.6875rem',
                         fontWeight: '600',
@@ -773,11 +1032,15 @@ export function StartPracticeModal({
                         textTransform: 'uppercase',
                         letterSpacing: '0.05em',
                         marginBottom: '0.5rem',
+                        '@media (max-height: 700px)': {
+                          marginBottom: '0.25rem',
+                          fontSize: '0.625rem',
+                        },
                       })}
                     >
                       Practice Modes
                     </div>
-                    <div className={css({ display: 'flex', gap: '0.375rem' })}>
+                    <div data-element="modes-options" className={css({ display: 'flex', gap: '0.375rem', '@media (max-height: 700px)': { gap: '0.25rem' } })}>
                       {PART_TYPES.map(({ type, emoji, label }) => {
                         const isEnabled = enabledParts[type]
                         const problemCount = problemsPerType[type]
@@ -785,6 +1048,8 @@ export function StartPracticeModal({
                           <button
                             key={type}
                             type="button"
+                            data-option={`mode-${type}`}
+                            data-enabled={isEnabled}
                             onClick={() => togglePart(type)}
                             className={css({
                               position: 'relative',
@@ -798,6 +1063,11 @@ export function StartPracticeModal({
                               border: '2px solid',
                               cursor: 'pointer',
                               transition: 'all 0.15s ease',
+                              '@media (max-height: 700px)': {
+                                padding: '0.375rem 0.125rem 0.25rem',
+                                borderRadius: '6px',
+                                gap: '0.125rem',
+                              },
                             })}
                             style={{
                               borderColor: isEnabled
@@ -835,17 +1105,36 @@ export function StartPracticeModal({
                                   borderRadius: '50%',
                                   padding: '2px',
                                   boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                                  '@media (max-height: 700px)': {
+                                    top: '-6px',
+                                    right: '-6px',
+                                    minWidth: '18px',
+                                    minHeight: '18px',
+                                    fontSize: '0.625rem',
+                                  },
                                 })}
                               >
                                 {problemCount}
                               </span>
                             )}
                             {/* Emoji */}
-                            <span className={css({ fontSize: '1.5rem', lineHeight: 1 })}>
+                            <span className={css({
+                              fontSize: '1.5rem',
+                              lineHeight: 1,
+                              '@media (max-height: 700px)': {
+                                fontSize: '1.25rem',
+                              },
+                            })}>
                               {emoji}
                             </span>
                             <span
-                              className={css({ fontSize: '0.6875rem', fontWeight: '500' })}
+                              className={css({
+                                fontSize: '0.6875rem',
+                                fontWeight: '500',
+                                '@media (max-height: 700px)': {
+                                  fontSize: '0.5625rem',
+                                },
+                              })}
                               style={{ color: isDark ? '#e2e8f0' : '#334155' }}
                             >
                               {label}
@@ -857,8 +1146,9 @@ export function StartPracticeModal({
                   </div>
 
                   {/* Numbers per problem */}
-                  <div>
+                  <div data-setting="max-terms">
                     <div
+                      data-element="terms-label"
                       className={css({
                         fontSize: '0.6875rem',
                         fontWeight: '600',
@@ -866,17 +1156,23 @@ export function StartPracticeModal({
                         textTransform: 'uppercase',
                         letterSpacing: '0.05em',
                         marginBottom: '0.5rem',
+                        '@media (max-height: 700px)': {
+                          marginBottom: '0.25rem',
+                          fontSize: '0.625rem',
+                        },
                       })}
                     >
                       Numbers per problem
                     </div>
-                    <div className={css({ display: 'flex', gap: '0.25rem' })}>
+                    <div data-element="terms-options" className={css({ display: 'flex', gap: '0.25rem', '@media (max-height: 700px)': { gap: '0.125rem' } })}>
                       {[3, 4, 5, 6, 7, 8].map((terms) => {
                         const isSelected = abacusMaxTerms === terms
                         return (
                           <button
                             key={terms}
                             type="button"
+                            data-option={`terms-${terms}`}
+                            data-selected={isSelected}
                             onClick={() => setAbacusMaxTerms(terms)}
                             className={css({
                               flex: 1,
@@ -887,6 +1183,11 @@ export function StartPracticeModal({
                               border: 'none',
                               cursor: 'pointer',
                               transition: 'all 0.15s ease',
+                              '@media (max-height: 700px)': {
+                                padding: '0.3125rem 0.125rem',
+                                fontSize: '0.75rem',
+                                borderRadius: '4px',
+                              },
                             })}
                             style={{
                               backgroundColor: isSelected
@@ -906,324 +1207,238 @@ export function StartPracticeModal({
                     </div>
                   </div>
 
-                  {/* Problem Selection Algorithm */}
-                  <div>
+                  {/* Target skills info - in the grid for landscape layout */}
+                  {targetSkillsInfo.hasData && (
                     <div
+                      data-element="target-skills-expanded"
                       className={css({
-                        fontSize: '0.6875rem',
-                        fontWeight: '600',
-                        color: isDark ? 'gray.500' : 'gray.400',
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.05em',
-                        marginBottom: '0.5rem',
-                      })}
-                    >
-                      Problem Selection
-                    </div>
-                    <div
-                      className={css({ display: 'flex', flexDirection: 'column', gap: '0.375rem' })}
-                    >
-                      {[
-                        {
-                          mode: 'adaptive-bkt' as const,
-                          label: 'Focus on weak spots',
-                          desc: 'Practices what you need most (recommended)',
+                        padding: '0.625rem',
+                        borderRadius: '6px',
+                        '@media (max-height: 700px)': {
+                          padding: '0.375rem 0.5rem',
                         },
-                        {
-                          mode: 'classic' as const,
-                          label: 'Practice everything',
-                          desc: 'Equal time on all skills',
-                        },
-                      ].map(({ mode, label, desc }) => {
-                        const isSelected = problemGenerationMode === mode
-                        return (
-                          <button
-                            key={mode}
-                            type="button"
-                            onClick={() => setProblemGenerationMode(mode)}
-                            className={css({
-                              display: 'flex',
-                              alignItems: 'center',
-                              gap: '0.625rem',
-                              padding: '0.5rem 0.75rem',
-                              borderRadius: '8px',
-                              border: '2px solid',
-                              cursor: 'pointer',
-                              transition: 'all 0.15s ease',
-                              textAlign: 'left',
-                            })}
-                            style={{
-                              borderColor: isSelected
-                                ? isDark
-                                  ? '#f59e0b'
-                                  : '#d97706'
-                                : isDark
-                                  ? 'rgba(255,255,255,0.1)'
-                                  : 'rgba(0,0,0,0.08)',
-                              backgroundColor: isSelected
-                                ? isDark
-                                  ? 'rgba(245, 158, 11, 0.15)'
-                                  : 'rgba(217, 119, 6, 0.08)'
-                                : 'transparent',
-                            }}
-                          >
-                            <span
-                              className={css({
-                                width: '16px',
-                                height: '16px',
-                                borderRadius: '50%',
-                                border: '2px solid',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                flexShrink: 0,
-                              })}
-                              style={{
-                                borderColor: isSelected
-                                  ? isDark
-                                    ? '#f59e0b'
-                                    : '#d97706'
-                                  : isDark
-                                    ? 'rgba(255,255,255,0.3)'
-                                    : 'rgba(0,0,0,0.2)',
-                              }}
-                            >
-                              {isSelected && (
-                                <span
-                                  className={css({
-                                    width: '8px',
-                                    height: '8px',
-                                    borderRadius: '50%',
-                                  })}
-                                  style={{
-                                    backgroundColor: isDark ? '#f59e0b' : '#d97706',
-                                  }}
-                                />
-                              )}
-                            </span>
-                            <div>
-                              <div
-                                className={css({ fontSize: '0.8125rem', fontWeight: '600' })}
-                                style={{ color: isDark ? '#e2e8f0' : '#334155' }}
-                              >
-                                {label}
-                              </div>
-                              <div
-                                className={css({ fontSize: '0.6875rem' })}
-                                style={{ color: isDark ? '#64748b' : '#94a3b8' }}
-                              >
-                                {desc}
-                              </div>
-                            </div>
-                          </button>
-                        )
-                      })}
-                    </div>
-
-                    {/* Target skills display - shown when adaptive-bkt mode is selected */}
-                    {problemGenerationMode === 'adaptive-bkt' && targetSkillsInfo.hasData && (
-                      <div
-                        className={css({
-                          marginTop: '0.5rem',
-                          padding: '0.625rem',
-                          borderRadius: '6px',
-                          backgroundColor: isDark
+                        backgroundColor: isDark
+                          ? targetSkillsInfo.targetedSkills.length > 0
+                            ? 'rgba(245, 158, 11, 0.08)'
+                            : 'rgba(100, 116, 139, 0.08)'
+                          : targetSkillsInfo.targetedSkills.length > 0
+                            ? 'rgba(245, 158, 11, 0.06)'
+                            : 'rgba(100, 116, 139, 0.06)',
+                        border: `1px solid ${
+                          isDark
                             ? targetSkillsInfo.targetedSkills.length > 0
-                              ? 'rgba(245, 158, 11, 0.08)'
-                              : 'rgba(100, 116, 139, 0.08)'
+                              ? 'rgba(245, 158, 11, 0.2)'
+                              : 'rgba(100, 116, 139, 0.2)'
                             : targetSkillsInfo.targetedSkills.length > 0
-                              ? 'rgba(245, 158, 11, 0.06)'
-                              : 'rgba(100, 116, 139, 0.06)',
-                          border: `1px solid ${
-                            isDark
-                              ? targetSkillsInfo.targetedSkills.length > 0
-                                ? 'rgba(245, 158, 11, 0.2)'
-                                : 'rgba(100, 116, 139, 0.2)'
-                              : targetSkillsInfo.targetedSkills.length > 0
-                                ? 'rgba(245, 158, 11, 0.15)'
-                                : 'rgba(100, 116, 139, 0.15)'
-                          }`,
-                        })}
-                      >
-                        {targetSkillsInfo.targetedSkills.length > 0 ? (
-                          <>
-                            <div
-                              className={css({
-                                fontSize: '0.6875rem',
-                                fontWeight: '600',
-                                color: isDark ? 'amber.400' : 'amber.700',
-                                marginBottom: '0.375rem',
-                              })}
-                            >
-                              Will target these weak skills (pKnown &lt; 50%):
-                            </div>
-                            <div
-                              className={css({
-                                display: 'flex',
-                                flexWrap: 'wrap',
-                                gap: '0.25rem',
-                              })}
-                            >
-                              {targetSkillsInfo.targetedSkills.map((skill) => (
-                                <span
-                                  key={skill.skillId}
-                                  className={css({
-                                    fontSize: '0.625rem',
-                                    padding: '0.125rem 0.375rem',
-                                    borderRadius: '4px',
-                                    backgroundColor: isDark
-                                      ? 'rgba(245, 158, 11, 0.15)'
-                                      : 'rgba(245, 158, 11, 0.12)',
-                                    color: isDark ? 'amber.300' : 'amber.800',
-                                  })}
-                                >
-                                  {skill.displayName}{' '}
-                                  <span className={css({ opacity: 0.7 })}>
-                                    ({Math.round(skill.pKnown * 100)}%)
-                                  </span>
-                                </span>
-                              ))}
-                            </div>
-                          </>
-                        ) : (
+                              ? 'rgba(245, 158, 11, 0.15)'
+                              : 'rgba(100, 116, 139, 0.15)'
+                        }`,
+                      })}
+                    >
+                      {targetSkillsInfo.targetedSkills.length > 0 ? (
+                        <>
                           <div
                             className={css({
                               fontSize: '0.6875rem',
-                              color: isDark ? 'gray.400' : 'gray.600',
+                              fontWeight: '600',
+                              color: isDark ? 'amber.400' : 'amber.700',
+                              marginBottom: '0.375rem',
+                              '@media (max-height: 700px)': {
+                                fontSize: '0.625rem',
+                                marginBottom: '0.25rem',
+                              },
                             })}
                           >
-                            No weak skills detected. Problems will be evenly distributed across all
-                            practicing skills.
+                            Focusing on weak skills:
                           </div>
-                        )}
-                      </div>
-                    )}
-                  </div>
+                          <div
+                            className={css({
+                              display: 'flex',
+                              flexWrap: 'wrap',
+                              gap: '0.25rem',
+                            })}
+                          >
+                            {targetSkillsInfo.targetedSkills.map((skill) => (
+                              <span
+                                key={skill.skillId}
+                                className={css({
+                                  fontSize: '0.625rem',
+                                  padding: '0.125rem 0.375rem',
+                                  borderRadius: '4px',
+                                  backgroundColor: isDark
+                                    ? 'rgba(245, 158, 11, 0.15)'
+                                    : 'rgba(245, 158, 11, 0.12)',
+                                  color: isDark ? 'amber.300' : 'amber.800',
+                                  '@media (max-height: 700px)': {
+                                    fontSize: '0.5625rem',
+                                    padding: '0.0625rem 0.25rem',
+                                  },
+                                })}
+                              >
+                                {skill.displayName}{' '}
+                                <span className={css({ opacity: 0.7 })}>
+                                  ({Math.round(skill.pKnown * 100)}%)
+                                </span>
+                              </span>
+                            ))}
+                          </div>
+                        </>
+                      ) : (
+                        <div
+                          className={css({
+                            fontSize: '0.6875rem',
+                            color: isDark ? 'gray.400' : 'gray.600',
+                            '@media (max-height: 700px)': {
+                              fontSize: '0.625rem',
+                            },
+                          })}
+                        >
+                          ✓ On track! Problems will be evenly distributed across all skills.
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  </div>{/* End settings-grid */}
 
-                  {/* Collapse button */}
-                  <button
-                    type="button"
-                    onClick={() => setIsExpanded(false)}
-                    className={css({
-                      width: '100%',
-                      padding: '0.5rem',
-                      fontSize: '0.75rem',
-                      fontWeight: '500',
-                      color: isDark ? 'gray.500' : 'gray.400',
-                      backgroundColor: 'transparent',
-                      border: 'none',
-                      cursor: 'pointer',
-                      transition: 'color 0.15s ease',
-                      _hover: { color: isDark ? 'gray.300' : 'gray.600' },
-                    })}
-                  >
-                    ▲ Done
-                  </button>
                 </div>
               </div>
             </div>
 
-            {/* Tutorial gate - New skill available */}
+            {/* Tutorial CTA - New skill unlocked with integrated start button */}
             {showTutorialGate && tutorialConfig && nextSkill && (
               <div
-                data-element="tutorial-gate"
+                data-element="tutorial-cta"
                 className={css({
-                  marginBottom: '1rem',
-                  padding: '1rem',
                   borderRadius: '12px',
                   overflow: 'hidden',
+                  '@media (max-height: 700px)': {
+                    borderRadius: '10px',
+                    marginTop: 'auto',
+                  },
                 })}
                 style={{
                   background: isDark
-                    ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(59, 130, 246, 0.12) 100%)'
-                    : 'linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%)',
-                  border: `2px solid ${isDark ? 'rgba(34, 197, 94, 0.3)' : 'rgba(34, 197, 94, 0.25)'}`,
+                    ? 'linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%)'
+                    : 'linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(59, 130, 246, 0.04) 100%)',
+                  border: `2px solid ${isDark ? 'rgba(34, 197, 94, 0.25)' : 'rgba(34, 197, 94, 0.2)'}`,
                 }}
               >
-                <div className={css({ display: 'flex', gap: '0.75rem', alignItems: 'start' })}>
-                  <span className={css({ fontSize: '1.75rem', lineHeight: 1 })}>🌟</span>
+                {/* Info section */}
+                <div
+                  className={css({
+                    padding: '0.875rem 1rem',
+                    display: 'flex',
+                    gap: '0.625rem',
+                    alignItems: 'center',
+                    '@media (max-height: 700px)': {
+                      padding: '0.5rem 0.75rem',
+                      gap: '0.5rem',
+                    },
+                  })}
+                >
+                  <span
+                    className={css({
+                      fontSize: '1.5rem',
+                      lineHeight: 1,
+                      '@media (max-height: 700px)': {
+                        fontSize: '1.25rem',
+                      },
+                    })}
+                  >
+                    🌟
+                  </span>
                   <div className={css({ flex: 1 })}>
                     <p
                       className={css({
-                        fontSize: '0.9375rem',
+                        fontSize: '0.875rem',
                         fontWeight: '600',
-                        marginBottom: '0.25rem',
+                        '@media (max-height: 700px)': {
+                          fontSize: '0.8125rem',
+                        },
                       })}
                       style={{ color: isDark ? '#86efac' : '#166534' }}
                     >
-                      New skill available!
+                      You've unlocked: <strong>{tutorialConfig.title}</strong>
                     </p>
                     <p
-                      className={css({ fontSize: '0.8125rem', marginBottom: '0.75rem' })}
-                      style={{ color: isDark ? '#d4d4d4' : '#525252' }}
+                      className={css({
+                        fontSize: '0.75rem',
+                        marginTop: '0.125rem',
+                        '@media (max-height: 700px)': {
+                          fontSize: '0.6875rem',
+                        },
+                      })}
+                      style={{ color: isDark ? '#a1a1aa' : '#6b7280' }}
                     >
-                      Ready to learn <strong>{tutorialConfig.title}</strong>?
-                      {nextSkill.skipCount > 0 && (
-                        <span className={css({ color: isDark ? '#a1a1aa' : '#71717a' })}>
-                          {' '}
-                          (skipped {nextSkill.skipCount} time{nextSkill.skipCount > 1 ? 's' : ''})
-                        </span>
-                      )}
+                      Start with a quick tutorial
                     </p>
-                    <div className={css({ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' })}>
-                      <button
-                        type="button"
-                        onClick={() => setShowTutorial(true)}
-                        className={css({
-                          padding: '0.5rem 1rem',
-                          fontSize: '0.8125rem',
-                          fontWeight: '600',
-                          color: 'white',
-                          borderRadius: '8px',
-                          border: 'none',
-                          cursor: 'pointer',
-                          transition: 'all 0.15s ease',
-                          _hover: { transform: 'translateY(-1px)' },
-                        })}
-                        style={{
-                          background: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
-                          boxShadow: '0 4px 12px rgba(34, 197, 94, 0.3)',
-                        }}
-                      >
-                        Learn Now
-                      </button>
-                      <button
-                        type="button"
-                        onClick={handleStart}
-                        disabled={isStarting}
-                        className={css({
-                          padding: '0.5rem 1rem',
-                          fontSize: '0.8125rem',
-                          fontWeight: '500',
-                          backgroundColor: 'transparent',
-                          borderRadius: '8px',
-                          cursor: 'pointer',
-                          transition: 'all 0.15s ease',
-                          _hover: {
-                            backgroundColor: isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)',
-                          },
-                        })}
-                        style={{
-                          color: isDark ? '#a1a1aa' : '#6b7280',
-                          border: `1px solid ${isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)'}`,
-                        }}
-                      >
-                        Practice without it
-                      </button>
-                    </div>
                   </div>
                 </div>
+                {/* Integrated start button */}
+                <button
+                  type="button"
+                  data-action="start-tutorial"
+                  data-status={isStarting ? 'starting' : 'ready'}
+                  onClick={() => setShowTutorial(true)}
+                  disabled={isStarting}
+                  className={css({
+                    width: '100%',
+                    padding: '0.875rem',
+                    fontSize: '1rem',
+                    fontWeight: 'bold',
+                    color: 'white',
+                    border: 'none',
+                    borderRadius: '0 0 10px 10px',
+                    cursor: isStarting ? 'not-allowed' : 'pointer',
+                    transition: 'all 0.2s ease',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    gap: '0.5rem',
+                    _hover: {
+                      filter: isStarting ? 'none' : 'brightness(1.05)',
+                    },
+                    '@media (max-height: 700px)': {
+                      padding: '0.75rem',
+                      fontSize: '0.9375rem',
+                    },
+                  })}
+                  style={{
+                    background: isStarting
+                      ? '#9ca3af'
+                      : 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
+                    boxShadow: isStarting ? 'none' : 'inset 0 1px 0 rgba(255,255,255,0.15)',
+                  }}
+                >
+                  {isStarting ? (
+                    'Starting...'
+                  ) : (
+                    <>
+                      <span>🎓</span>
+                      <span>Begin Tutorial</span>
+                      <span>→</span>
+                    </>
+                  )}
+                </button>
               </div>
             )}
 
             {/* Error display */}
             {displayError && (
               <div
+                data-element="error-display"
+                data-error-type={isNoSkillsError ? 'no-skills' : 'generic'}
                 className={css({
                   marginBottom: '1rem',
                   padding: '0.75rem',
                   borderRadius: '8px',
                   textAlign: 'center',
+                  '@media (max-height: 700px)': {
+                    marginBottom: '0.5rem',
+                    padding: '0.375rem',
+                    borderRadius: '6px',
+                  },
                 })}
                 style={{
                   background: isNoSkillsError
@@ -1271,51 +1486,62 @@ export function StartPracticeModal({
               </div>
             )}
 
-            {/* Start button */}
-            <button
-              type="button"
-              onClick={handleStart}
-              disabled={isStarting}
-              className={css({
-                width: '100%',
-                padding: '1rem',
-                fontSize: '1.0625rem',
-                fontWeight: 'bold',
-                color: 'white',
-                borderRadius: '12px',
-                border: 'none',
-                cursor: isStarting ? 'not-allowed' : 'pointer',
-                transition: 'all 0.2s ease',
-                _hover: {
-                  transform: isStarting ? 'none' : 'translateY(-1px)',
-                },
-                _active: {
-                  transform: 'translateY(0)',
-                },
-              })}
-              style={{
-                background: isStarting
-                  ? '#9ca3af'
-                  : 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
-                boxShadow: isStarting ? 'none' : '0 6px 20px rgba(34, 197, 94, 0.35)',
-              }}
-            >
-              {isStarting ? (
-                'Starting...'
-              ) : (
-                <span
-                  className={css({
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    gap: '0.5rem',
-                  })}
-                >
-                  <span>Let's Go!</span>
-                  <span>→</span>
-                </span>
-              )}
-            </button>
+            {/* Start button - only shown when no tutorial is pending */}
+            {!showTutorialGate && (
+              <button
+                type="button"
+                data-action="start-practice"
+                data-status={isStarting ? 'starting' : 'ready'}
+                onClick={handleStart}
+                disabled={isStarting}
+                className={css({
+                  width: '100%',
+                  padding: '1rem',
+                  fontSize: '1.0625rem',
+                  fontWeight: 'bold',
+                  color: 'white',
+                  borderRadius: '12px',
+                  border: 'none',
+                  cursor: isStarting ? 'not-allowed' : 'pointer',
+                  transition: 'all 0.2s ease',
+                  _hover: {
+                    transform: isStarting ? 'none' : 'translateY(-1px)',
+                  },
+                  _active: {
+                    transform: 'translateY(0)',
+                  },
+                  '@media (max-height: 700px)': {
+                    padding: '0.75rem',
+                    fontSize: '1rem',
+                    borderRadius: '10px',
+                    marginTop: 'auto',
+                  },
+                })}
+                style={{
+                  background: isStarting
+                    ? '#9ca3af'
+                    : 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
+                  boxShadow: isStarting ? 'none' : '0 6px 20px rgba(34, 197, 94, 0.35)',
+                }}
+              >
+                {isStarting ? (
+                  'Starting...'
+                ) : (
+                  <span
+                    className={css({
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      gap: '0.5rem',
+                    })}
+                  >
+                    <span>Let's Go!</span>
+                    <span>→</span>
+                  </span>
+                )}
+              </button>
+            )}
+            </div>{/* End config-and-action wrapper */}
           </div>
         </Dialog.Content>
       </Dialog.Portal>
diff --git a/apps/web/src/lib/curriculum/bkt/compute-bkt.ts b/apps/web/src/lib/curriculum/bkt/compute-bkt.ts
index ed354353..7d833cf4 100644
--- a/apps/web/src/lib/curriculum/bkt/compute-bkt.ts
+++ b/apps/web/src/lib/curriculum/bkt/compute-bkt.ts
@@ -75,8 +75,10 @@ function applyTimeDecay(
  */
 export function computeBktFromHistory(
   results: ProblemResultWithContext[],
-  options: BktComputeExtendedOptions = DEFAULT_BKT_OPTIONS
+  options: Partial<BktComputeExtendedOptions> = {}
 ): BktComputeResult {
+  // Merge with defaults so callers can override just what they need
+  const opts: BktComputeExtendedOptions = { ...DEFAULT_BKT_OPTIONS, ...options }
   // Sort by timestamp to replay in chronological order
   // Note: timestamp may be a Date or a string (from JSON serialization)
   const sorted = [...results].sort((a, b) => {
@@ -126,7 +128,7 @@ export function computeBktFromHistory(
     const evidenceWeight = helpWeight * rtWeight
 
     // Compute BKT updates (conjunctive model)
-    const blameMethod = options.blameMethod ?? 'heuristic'
+    const blameMethod = opts.blameMethod ?? 'heuristic'
     const updates = result.isCorrect
       ? updateOnCorrect(skillRecords)
       : updateOnIncorrectWithMethod(skillRecords, blameMethod)
@@ -158,13 +160,13 @@ export function computeBktFromHistory(
 
     // Apply decay if enabled
     let finalPKnown = state.pKnown
-    if (options.applyDecay && state.lastPracticedAt) {
+    if (opts.applyDecay && state.lastPracticedAt) {
       const daysSinceLastPractice =
         (now.getTime() - state.lastPracticedAt.getTime()) / (1000 * 60 * 60 * 24)
       finalPKnown = applyTimeDecay(
         state.pKnown,
         daysSinceLastPractice,
-        options.decayHalfLifeDays,
+        opts.decayHalfLifeDays,
         state.params.pInit
       )
     }
@@ -175,7 +177,7 @@ export function computeBktFromHistory(
     const masteryClassification = classifyMastery(
       finalPKnown,
       confidence,
-      options.confidenceThreshold
+      opts.confidenceThreshold
     )
 
     skills.push({