VISUAL RECIPE GRID

The logic for your visual recipe grid is primarily defined in src/_includes/recipe_layout.liquid, with supporting structures in styles.css. It uses a two-panel flexbox architecture designed to visually map the relationship between ingredients and the actions performed with them.

Here is the breakdown of the recipe grid logic:

1. The Two-Panel Structure Each step is wrapped in a .step-content container which is split into two distinct functional zones:

Left Panel (.ingredients-panel): This panel has a higher flex priority (flex: 2). It contains the visual representations of everything being introduced or prepared in that step.

Right Panel (.cooking-panel): This panel has a lower flex priority (flex: 1). It focuses on the macro-level actions (e.g., Stir, Simmer) , the heat intensity , and the specific kitchen tool (recipient) being used.

2. Ingredient Tile LogicThe left panel iterates through an ingredients array. Each item is processed through a "Tile Counter" to determine how many visual components it needs: Standard Ingredient: Renders a tile.liquid component featuring the ingredient image, label, and quantities. Action Tile: If an action (like "Chop" or "Rinse") is present, a second tile is rendered immediately after the ingredient. Transformed Ingredient: If a transformed_label exists, it renders a third tile showing the final state (e.g., "Diced Onion").

3. Row Management & Isolation Your system uses a Grouping Logic to control how tiles occupy space:

Group Size Calculation: The template calculates a tile_count (1 to 3) for each ingredient entry .

Isolation (CSS flex-basis): In styles.css, any ingredient group with 2 or 3 tiles is forced to its own line using flex-basis: 100%. This ensures that if an ingredient is being "transformed" (requiring multiple tiles), no other ingredients from that step appear on the same horizontal row.

4. The Cooking (Right) Panel LogicThe right panel displays the "action" and the "recipient" as a paired unit: The Action-Recipient Container: Uses display: flex to center the action icon and the pot/pan icon side-by-side. HUD (Heads-Up Display) Integration: The recipient image often includes a hud array. This renders small tokens on top of the pot icon to represent ingredients already inside from previous steps. Temporal & Thermal Data: The heat_value and time_value are rendered as high-contrast "pills" (usually black text on a yellow background) positioned below the action/recipient icons.

5. Responsive Behavior (Mobile) When the screen width is 700px or less:

The flex-direction for the entire step changes to column.

The ingredients panel moves to the top and centers its contents.

The cooking panel moves to the bottom, losing its background colors to keep the interface lean and readable.