feat: adapt recipe surfaces for batch-cook sessions

- Recipes page action buttons reordered/restyled to push AI generation
  and batch cooking ahead of manual recipe creation.
- Recipe detail page hides meal/drink pairing (doesn't make sense for
  a multi-dish batch session).
- Print pages force light mode regardless of app theme (dark bg +
  hardcoded dark text was unreadable) and render sectioned steps +
  dishes/storage for batch-cook recipes.
- Markdown export mirrors the same sectioned structure.
- Cooking mode tags each step with which dish(es) it belongs to.
- Meal planner: mealPlanEntries.batchDishId lets a slot point at one
  specific dish within a batch session; picking a batch-cook recipe
  now prompts for which dish, and the grid shows the dish name.

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

apps/web/app/print/[id]/page.tsx

@@ -21,6 +21,7 @@ export default async function RecipePrintPage({ params }: Params) {
     with: {
       ingredients: { orderBy: (t, { asc }) => asc(t.order) },
       steps: { orderBy: (t, { asc }) => asc(t.order) },
+      batchDishes: { orderBy: (t, { asc }) => asc(t.order) },
     },
   });
 
@@ -28,6 +29,16 @@ export default async function RecipePrintPage({ params }: Params) {
 
   const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
 
+  const stepGroups: Array<{ label: string; steps: typeof recipe.steps }> = [];
+  if (recipe.isBatchCook) {
+    for (const step of recipe.steps) {
+      const label = step.appliesTo.length === 0 ? m.recipe.batchCookPrep : step.appliesTo.join(" + ");
+      const last = stepGroups[stepGroups.length - 1];
+      if (last && last.label === label) last.steps.push(step);
+      else stepGroups.push({ label, steps: [step] });
+    }
+  }
+
   const activeTags = Object.entries(recipe.dietaryTags ?? {})
     .filter(([, v]) => v)
     .map(([k]) => m.recipe.dietary[k as keyof typeof m.recipe.dietary])
@@ -62,6 +73,11 @@ export default async function RecipePrintPage({ params }: Params) {
         ol.steps { padding-left: 20px; margin: 0; }
         ol.steps li { padding: 6px 0 6px 4px; border-bottom: 1px dotted #e0e0e0; font-size: 0.95em; }
         ol.steps li:last-child { border-bottom: none; }
+        h3.section { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; color: #777; margin: 18px 0 6px; font-family: system-ui, sans-serif; }
+        .dish { border: 1px solid #ddd; border-radius: 6px; padding: 10px 14px; margin: 10px 0; font-family: system-ui, sans-serif; }
+        .dish-name { font-weight: 600; margin: 0 0 4px; }
+        .dish-storage { font-size: 0.85em; color: #666; margin: 0 0 6px; }
+        .dish-dayof { font-size: 0.9em; margin: 0; }
         .timer { font-size: 0.85em; color: #666; font-family: system-ui, sans-serif; margin-left: 8px; }
         footer { margin-top: 40px; font-size: 0.75em; color: #aaa; text-align: center; font-family: system-ui, sans-serif; }
         .print-btn {
@@ -117,16 +133,46 @@ export default async function RecipePrintPage({ params }: Params) {
         {recipe.steps.length > 0 && (
           <>
             <h2>{m.recipe.instructions}</h2>
-            <ol className="steps">
-              {recipe.steps.map((step) => (
-                <li key={step.id}>
-                  {step.instruction}
-                  {step.timerSeconds && (
-                    <span className="timer">⏱ {Math.floor(step.timerSeconds / 60)} min</span>
-                  )}
-                </li>
-              ))}
-            </ol>
+            {recipe.isBatchCook ? (
+              stepGroups.map((group, gi) => (
+                <div key={gi}>
+                  <h3 className="section">{group.label}</h3>
+                  <ol className="steps">
+                    {group.steps.map((step) => (
+                      <li key={step.id}>{step.instruction}</li>
+                    ))}
+                  </ol>
+                </div>
+              ))
+            ) : (
+              <ol className="steps">
+                {recipe.steps.map((step) => (
+                  <li key={step.id}>
+                    {step.instruction}
+                    {step.timerSeconds && (
+                      <span className="timer">⏱ {Math.floor(step.timerSeconds / 60)} min</span>
+                    )}
+                  </li>
+                ))}
+              </ol>
+            )}
+          </>
+        )}
+
+        {recipe.isBatchCook && recipe.batchDishes.length > 0 && (
+          <>
+            <h2>{m.recipe.batchCookDishesTitle}</h2>
+            {recipe.batchDishes.map((dish) => (
+              <div key={dish.id} className="dish">
+                <p className="dish-name">{dish.name}</p>
+                <p className="dish-storage">
+                  {formatMessage(m.recipe.batchCookFridgeDays, { days: dish.fridgeDays })}
+                  {dish.freezerFriendly && ` · ${m.recipe.batchCookFreezerFriendly}`}
+                  {dish.freezerNote && ` — ${dish.freezerNote}`}
+                </p>
+                <p className="dish-dayof"><strong>{m.recipe.batchCookDayOf}:</strong> {dish.dayOfInstructions}</p>
+              </div>
+            ))}
           </>
         )}
       </article>