Add word list preview, young learner mode, and practice improvements

- Show full word list before practice starts so students can study words first
- Add per-student young learner mode (set in admin): word stays visible while typing
- Center all practice card content (speak button, prompt, feedback, check button)
- Remove 10-word-per-session cap so large lists (25-30 words) practice all words
- Double the misspelled-word study countdown from 4s to 8s
- Fix word list preview numbering for 10+ items (inline numbers, no clipping)
- Add young_learner column to students table with admin toggle

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

public/admin.js

@@ -128,11 +128,18 @@ async function loadKids() {
             .map(([t, c]) => `<button class="theme-swatch theme-${t} ${t === theme ? 'selected' : ''}" data-student-theme="${s.id}" data-theme="${t}" title="${t}" style="background:${c}"></button>`)
             .join('');
           const streak = s.streak_count >= 2 ? `<span style="color:#e8802a;font-size:.85rem">🔥 ${s.streak_count} day streak</span>` : '';
-          return `<div class="item-row">
+          const youngLabel = s.young_learner
+            ? `<span class="badge-young" title="Young learner mode on">👶 Young</span>`
+            : '';
+          return `<div class="item-row" style="flex-wrap:wrap;gap:0.5rem">
             <span style="font-size:1.5rem">${esc(s.emoji)}</span>
             <strong class="grow">${esc(s.name)}</strong>
             ${streak}
+            ${youngLabel}
             <div class="theme-swatch-row" title="Kid's color theme">${swatches}</div>
+            <label class="young-learner-toggle" title="Show word while typing (for younger kids)" style="font-size:0.85rem;display:flex;align-items:center;gap:0.3rem;cursor:pointer">
+              <input type="checkbox" data-young-learner="${s.id}" ${s.young_learner ? 'checked' : ''}> 👶 See it first
+            </label>
             <button class="danger" data-del-student="${s.id}">Remove</button>
           </div>`;
         })
@@ -151,6 +158,15 @@ async function loadKids() {
     })
   );
 
+  document.querySelectorAll('[data-young-learner]').forEach((chk) =>
+    chk.addEventListener('change', async () => {
+      await api(`/api/students/${chk.dataset.youngLearner}/young-learner`, {
+        method: 'PATCH',
+        body: { young_learner: chk.checked },
+      });
+    })
+  );
+
   document.querySelectorAll('[data-del-student]').forEach((btn) =>
     btn.addEventListener('click', async () => {
       if (!confirm('Remove this kid and all their progress? This cannot be undone.')) return;