Build me a single-page HTML app called "Recipe Costing" as one self-contained index.html file with embedded CSS and JavaScript (no frameworks, no build step, no backend).

REQUIREMENTS:
- Pre-load 10-15 real menu items from my restaurant. For each recipe: name, menu price, and a list of ingredients with portion sizes (e.g. "Atlantic salmon fillet 8oz").
- Pre-load a flat dictionary of ingredient unit costs at current invoice prices.
- Compute food cost % = (sum of ingredient costs / menu price) * 100 for each recipe.
- Show a summary row at the top: average food cost %, total menu items, count of items flagged.
- Sortable table of all recipes with columns: Recipe, Ingredient Cost, Menu Price, Food Cost %, Status dot (green <28%, yellow 28-32%, red >32%).
- Clicking a recipe opens a detail panel showing every ingredient and its unit cost, with a total.
- Alert panel at the top listing every recipe above 30% food cost, sorted worst first.
- A "Update Ingredient Prices" card with number inputs for every ingredient, rendered and populated on first load (not gated behind a recipe selection). Typing a new price recalculates every recipe that uses it in real time.
- Use an editorial design: warm cream background, serif display headlines (DM Sans 900 weight), generous whitespace, no heavy card shadows, divider-based layout.
- Mobile-responsive.
- All data hardcoded — no backend, no fetch calls.
- Interactivity must survive table re-renders: clicking a recipe row must always open the detail panel, even after the table has been re-sorted or recomputed. Make sure every <th> the sort logic touches has whatever child element it expects (e.g. a sort-arrow span), and wrap any DOM cleanup in null-safety so a single missing element doesn't silently halt the init script.

FIRST, ask me for:
1. My 10-15 menu items with prices
2. Ingredient lists for each
3. Current unit costs (or I'll give you a rough spreadsheet to infer from)

Then build the whole thing in one index.html file.

Build me a single-page HTML app called "CPG Channel Profitability" as one self-contained index.html file with embedded CSS and JavaScript. Include Chart.js via CDN for line chart visualization. No backend.

REQUIREMENTS:
- Pre-load 3-5 sales channels I use (e.g. DTC Shopify, UNFI distributor, direct store delivery, Amazon FBA, wholesale).
- For each channel, 6 months of monthly data: revenue, COGS, and channel-specific costs. DTC costs: shipping, packaging, returns. Distributor costs: distributor margin, trade spend, damage claims. DSD costs: delivery, slotting fees, demo costs, free-fill.
- Compute gross margin % and net margin % per channel over the period.
- Summary stats: total revenue, blended net margin, count of channel-months below my target net margin (from step 4 below; if I don't give one, default to 15%).
- Table showing each channel's totals, gross %, net %, and a trend arrow (last month vs previous).
- Bottom row showing blended total across all channels.
- Clicking a channel row opens a detailed monthly breakdown table with every cost line item.
- Alert panel listing every channel-month where net margin dropped below my target (or 15% if I didn't specify one). Label the alert with the threshold being used so I know which number drove the alert.
- Line chart of net margin % by channel across the 6 months.
- Editorial design: cream background, DM Sans 900 weight headlines, olive green accent (#7A9A1E), dividers instead of cards, generous whitespace.
- Mobile-responsive.

FIRST, ask me for:
1. My channel names and short codes
2. Last 6 months of revenue and COGS per channel
3. The specific cost line items I track per channel
4. Any target margin I'm trying to hit

Then build the whole thing in one index.html file.

Build me a single-page HTML app called "Supplier Document Tracker" as one self-contained index.html file with embedded CSS and JavaScript. No backend, no frameworks.

REQUIREMENTS:
- Pre-load 10-15 suppliers. For each: name, COA (Certificate of Analysis) expiration, allergen statement expiration, insurance certificate expiration, most recent audit score, audit type (SQF/BRC/FSSC 22000/unannounced), optional note.
- Today's date is fixed at the top of the file (so the demo is reproducible). Parse it as local midnight (e.g. `new Date(2026, 4, 18)` — JS months are 0-indexed) and parse every expiration date the same way. Do NOT use `new Date('2026-05-18')` because that parses as UTC midnight and the displayed date will shift by a day in most US timezones.
- For each document: compute status as current (>30 days until expiration), expiring (within 30 days), or expired.
- Summary stats: count of fully compliant suppliers, count with warnings, count with expired documents.
- Table of all suppliers with overall status dot, COA status cell, allergen status cell, insurance status cell, audit score badge (green 90+, yellow 80-89, red <80).
- Clicking a supplier opens a detail panel with each document, its expiration date, and its status label.
- Alert panel listing every expired document and every document expiring within 30 days, sorted expired-first then by soonest expiration.
- Handle null/missing dates cleanly (display "N/A").
- Editorial design: cream background (#FAFAF7), DM Sans 900 display, olive green accent (#7A9A1E), dividers instead of card shadows, status cells as small colored squares with checkmarks/exclamations/x-marks.
- Mobile-responsive.

FIRST, ask me for:
1. My supplier list (names only is fine — I'll give you document dates after)
2. Which documents I track per supplier (COA, allergen, insurance, GFSI audit, organic cert, kosher/halal, etc.)
3. Audit scheme and typical score range
4. Whether I want to track any custom fields (e.g. country of origin, ingredient category)

Then build the whole thing in one index.html file.

Build me a single-page HTML app called "Farm Operations Dashboard" as one self-contained index.html file with embedded CSS and JavaScript. No backend, no frameworks.

REQUIREMENTS:
- Pre-load 10-15 fields. For each field: name, acres, 2025 crop, 2026 planned crop, cover crop (and when planted), 2025 yield, soil pH, field type (row/vegetable/hay), optional notes.
- Pre-load 5-8 pieces of equipment. For each: name (with make/model), current hours, service-due hours, currently assigned field or status, notes.
- Summary stats: total acreage, field count, equipment count.
- Field grid (card per field): name with acre count, 2026 crop, cover crop, 2025 yield, soil pH, notes highlighted in yellow if present.
- Equipment grid: name, hours / service-due hours, hours remaining until service, color-coded alert (red <50 hours, yellow <200 hours, green otherwise).
- Clicking a field opens a detail panel with every attribute including 2025 vs 2026 crop, cover crop planting date, yield, soil pH with "low" badge if below 6.0.
- Editorial design: cream background (#FAFAF7), DM Sans 900 display, olive green accent (#7A9A1E), divider-based grid (no heavy cards), generous whitespace.
- Mobile-responsive.

FIRST, ask me for:
1. My field names, acreages, and crop rotation (last year's crop + this year's planned crop)
2. Cover crop strategy per field (if any)
3. Equipment list with current hour meters and service intervals
4. Any soil test data I want tracked (pH, organic matter, nutrient levels)

Then build the whole thing in one index.html file.