J3 — Cook Tonight

Cook tonight

Recipe detail → cook mode → mark as cooked. Kitchen context.

C1 → B2 → B4 → C1 · 16px body, 1.75 line-height, wake lock

Recipe detail

V2 Hero header. Desktop: sidebar + full-width hero banner spanning the content area + two-column content below (ingredients left, steps right). The hero fills the horizontal space — it's not a card, it's a page section with a distinct background.

V2 · Hero header — banner CTA, 2-col content on desktop

Mobile · 320px

18:32●●● WiFi 🔋

← Planner

Slow-roasted tomato pasta

45 min Easy Serves 4

Ingredients

500g

Cherry tomatoes

300g

Penne pasta

3 cloves

Garlic

2 tbsp

Olive oil

Steps

Preheat oven to 180°C. Halve tomatoes.

Drizzle with oil, season, roast 40 min.

Cook pasta. Toss with roasted tomatoes and garlic.

Desktop · 1040px

🥗

Mealplan

Smith household

Plan

📅Planner

📖Recipes

🛒Shopping

← Recipes/Slow-roasted tomato pasta

Slow-roasted tomato pasta

45 min Easy Serves 4 Vegetarian Child-friendly

Roasting the tomatoes concentrates their sweetness — great for the kids and easy to batch cook.

Ingredients · 4 items

500g

Cherry tomatoes

300g

Penne pasta

3 cloves

Garlic

2 tbsp

Olive oil

Steps · 3

Preheat oven to 180°C. Halve the cherry tomatoes and place cut-side up on a large baking tray.

Drizzle generously with olive oil, season with salt and pepper. Roast for 40 minutes until caramelized.

Cook pasta according to package. Toss with roasted tomatoes and minced garlic. Serve with fresh basil.

B2 · Recipe detail

/* Desktop: sidebar + topbar (breadcrumb + Edit button) + hero banner (full width, green-tint) + 2-col below.
 * Hero: name Fraunces 28px + tag pills + description + Cook button on the right.
 * Below hero: ingredients (left, border-right) + steps (right). Both panels scroll independently.
 * Hero with image: hero_image_url as bg, 40% dark overlay, text in white.
 * Mobile: hero banner → stacked ingredients → steps.
 * "Start cooking" → B4. "Edit" → B3 in edit mode. */

Element	Value	Notes
Desktop hero
Layout	Full content width, green-tint bg, 32px padding	Flex: info left (flex:1) + Cook button right (flex-shrink:0)
Name	Fraunces 28px/500, green-deeper	With image: #fff on dark overlay
Desktop content below hero
Ingredients	flex:1, 24px padding, border-right	ir-row component. Scrolls independently.
Steps	flex:1, 24px padding	Numbered circles (28px) + 14px body text, 1.6 line-height.

Cook mode

V1 Centered step. Full-screen on ALL breakpoints — intentionally no sidebar, no tabs, no nav chrome. Kitchen context doesn't change with screen size. Only the text max-width scales (260→400px). The entire screen body is the tap target.

V1 · Centered step — same layout everywhere. No desktop sidebar. Tap anywhere.

Mobile · Step 2 of 3

18:45●●● WiFi 🔋

✕ Exit

Step 2 of 3

Drizzle with olive oil, season generously with salt and pepper. Roast for 40 minutes until caramelized.

Tap anywhere for next step →

Desktop · SAME layout, wider text

✕ Exit

Step 2 of 3

Drizzle with olive oil, season generously with salt and pepper. Roast for 40 minutes until caramelized.

Tap anywhere for next step →

B4 · Cook mode · KITCHEN CRITICAL

/* FULL SCREEN on all breakpoints. NO sidebar. NO tabs. NO nav chrome.
 * Body text: EXACTLY 16px, line-height 1.75. NON-NEGOTIABLE.
 * Max text width: 260px mobile, 320px tablet, 400px desktop.
 * Step number: Fraunces 56px mobile, 72px desktop. Green-light.
 * TAP ANYWHERE to advance. Wake lock on enter. Exit = top-left error red.
 * Final step: "Done — mark as cooked" → cooking_log INSERT → C1.
 * This is an EXCEPTION to nav-spec: no sidebar, no breadcrumbs, no tabs. */

Element	Value	Notes
Layout — IDENTICAL all breakpoints
Body text	16px, line-height 1.75	NON-NEGOTIABLE
Max text width	260px mobile / 320px tablet / 400px desktop	Only difference between breakpoints
Step number	Fraunces 56px mobile / 72px desktop, weight 300, green-light	Visible from arm's length
Tap target	Entire body area	onclick → next step
Wake lock	navigator.wakeLock.request('screen')	On enter, release on exit/done

LLM Implementation Instructions — J3 Cook Tonight

This section provides structured guidance for code-generating LLMs implementing the J3 journey. Follow these rules exactly.

1. Journey Flow

C1 (today highlight) → B2 (recipe detail) → B4 (cook mode) → C1

Actor: Planner
Context: Mobile, hands busy, kitchen environment
The user taps today's meal on the planner (C1), views the recipe (B2), enters cook mode (B4), steps through instructions, marks as cooked, and returns to the planner (C1).

2. Screen B2 — Recipe Detail

Mobile layout

Green-tint hero banner at top: back link ("← Planner"), title in Fraunces 24px, pill tags (time, difficulty, servings), and a full-width "Start cooking" button.
Below the hero: stacked ingredients section, then steps section.

Desktop layout

Sidebar (224px) + topbar with breadcrumb ("← Recipes / Recipe Name") and Edit button.
Full-width hero banner: green-tint background, 32px padding. Flex layout with recipe info left (flex:1) and Cook button right (flex-shrink:0).
Below hero: 2-column layout. Ingredients left (flex:1, border-right) + steps right (flex:1). Both panels scroll independently.

Hero variants

With image: hero_image_url as background, 40% dark overlay, all text rendered in white.
Without image: green-tint background, dark text (green-deeper for title).

Component details

Ingredients: Read-only .ir rows (quantity + name). Quantities are scaled to the saved serving count for the planned meal.
Steps: Numbered circles (28px diameter on desktop, 22px mobile) + step text (14px, line-height 1.6 on desktop; 13px, line-height 1.5 on mobile).

Navigation

"Start cooking" button → navigates to B4 (cook mode).
"Edit" button → navigates to B3 (recipe form, prefilled with current recipe data).

3. Screen B4 — Cook Mode (KITCHEN CRITICAL)

This screen is the single exception to all responsive and navigation patterns in the app.

Layout rules

IDENTICAL LAYOUT on ALL breakpoints — this is the ONLY screen that ignores responsive patterns.
NO sidebar, NO tabs, NO navigation chrome on ANY breakpoint. This is an explicit exception to the nav-spec.

Topbar

Three-column flex: Exit button (left, error red var(--color-error)) + progress indicator (center, "Step N of M") + empty spacer (right).

Progress bar

Height: 4px. Track: var(--color-subtle). Fill: var(--green). Border-radius: 2px.
Width percentage: (currentStep / totalSteps) * 100%.

Body

Centered step number: Fraunces, weight 300, var(--green-light). Size: 56px (mobile) / 72px (desktop).
Step text: EXACTLY 16px, line-height 1.75 — NON-NEGOTIABLE. This is a readability requirement for kitchen use with dirty hands.
Max text width: 260px (mobile) / 320px (tablet) / 400px (desktop).

Interaction

TAP ANYWHERE to advance: The entire body area is the tap target. No fine motor precision required.
On the final step, the tap target label changes to "Done — mark as cooked".
Tapping on the final step triggers: cooking_log INSERT with recipe_id and cooked_date set to today's date, then navigates back to C1.

Wake lock

On entering B4: call navigator.wakeLock.request('screen') to prevent the screen from sleeping.
On exiting B4 (via Exit button or "Done"): release the wake lock.

4. Critical Feedback Loop

The cooking_log table is the data source for the variety/repetition algorithm used in J2 (meal suggestions). Meals cooked more recently are weighted more heavily in the repetition filter, causing the algorithm to deprioritize them in future suggestions. This means J3's "mark as cooked" action directly makes J2's suggestions smarter over time.

5. Data Operations

Screen	Operation	Tables
B2	READ	`recipe`, `recipe_ingredient`, `ingredient`, `recipe_step`
B4	WRITE	`cooking_log` INSERT (`recipe_id`, `cooked_date`)

6. Accessibility

B4's tap target is the entire screen body — accessible with one finger, no fine motor precision needed. This is intentional for kitchen use where hands may be wet or dirty.
The wake lock prevents the screen from sleeping mid-recipe, eliminating the need to unlock the device with messy hands.
Step text at 16px with 1.75 line-height ensures readability at arm's length.