Put wine paring on shoppinglist (#319) · northbriton.net/careme@dfdd8b3

+165 -33

internal/recipes/html.go

··· 12 12 "strings" 13 13 ) 14 14 15 + // shoppingRecipeView is a thin wrapper around ai.Recipe for the shopping list page. 16 + // 17 + // We keep ingredient expansion in Go instead of the template because the same derived 18 + // list is used both for card rendering and for the combined shopping list below. 19 + // The remaining extra fields are shopping-list-specific UI state that ai.Recipe 20 + // should not own. 21 + type shoppingRecipeView struct { 22 + ai.Recipe 23 + Hash string 24 + DisplayIngredients []ai.Ingredient //merged food and wine 25 + Dismissed bool //saved already in recipe 26 + Wine shoppingRecipeWineView 27 + } 28 + 29 + // shoppingRecipeWineView holds the template-only state for the shopping list wine UI. 30 + // The shopping card has three independently swappable regions, so the IDs are grouped 31 + // here instead of being spread across the parent recipe view. 32 + type shoppingRecipeWineView struct { 33 + ActionID string 34 + ActionButtonID string 35 + PreviewID string 36 + DetailID string 37 + DetailButtonID string 38 + Preview []ai.Ingredient 39 + Recommendation *ai.WineSelection 40 + } 41 + 15 42 // FormatShoppingListHTML renders the multi-recipe shopping list view. 16 43 func FormatShoppingListHTML(p *generatorParams, l ai.ShoppingList, signedIn bool, writer http.ResponseWriter) { 17 - FormatShoppingListHTMLForHash(p, l, signedIn, p.Hash(), writer) 44 + FormatShoppingListHTMLForHash(p, l, nil, signedIn, p.Hash(), writer) 18 45 } 19 46 20 47 // FormatShoppingListHTMLForHash renders the multi-recipe shopping list view for a specific hash. 21 - func FormatShoppingListHTMLForHash(p *generatorParams, l ai.ShoppingList, signedIn bool, hash string, writer http.ResponseWriter) { 22 - // TODO just put params into shopping list and pass that up? 48 + func FormatShoppingListHTMLForHash(p *generatorParams, l ai.ShoppingList, wineRecommendations map[string]*ai.WineSelection, signedIn bool, hash string, writer http.ResponseWriter) { 23 49 dismissedHashes := make(map[string]bool, len(p.Dismissed)) 24 50 for _, recipe := range p.Dismissed { 25 51 dismissedHashes[recipe.ComputeHash()] = true 26 52 } 53 + recipeViews := make([]shoppingRecipeView, 0, len(l.Recipes)) 54 + combinedIngredients := make([]ai.Ingredient, 0) 55 + for _, recipe := range l.Recipes { 56 + recipeHash := recipe.ComputeHash() 57 + wineRecommendation := wineRecommendations[recipeHash] 58 + displayIngredients := ingredientsForDisplay(recipe.Ingredients, wineRecommendation) 59 + wineActionID, wineButtonID := shoppingWineDOMIDs(recipeHash) 60 + wineDetailID, wineDetailButtonID := shoppingWineDetailDOMIDs(recipeHash) 61 + recipeViews = append(recipeViews, shoppingRecipeView{ 62 + Recipe: recipe, 63 + Hash: recipeHash, 64 + DisplayIngredients: displayIngredients, 65 + Dismissed: dismissedHashes[recipeHash], 66 + Wine: shoppingRecipeWineView{ 67 + ActionID: wineActionID, 68 + ActionButtonID: wineButtonID, 69 + PreviewID: shoppingWinePreviewDOMID(recipeHash), 70 + DetailID: wineDetailID, 71 + DetailButtonID: wineDetailButtonID, 72 + Preview: winePreviewPicks(wineRecommendation), 73 + Recommendation: wineRecommendation, 74 + }, 75 + }) 76 + combinedIngredients = append(combinedIngredients, displayIngredients...) 77 + } 78 + var shoppingList []ai.Ingredient 79 + if len(l.Recipes) > 1 { 80 + shoppingList = shoppingListForDisplay(combinedIngredients) 81 + } 27 82 data := struct { 28 83 Location locations.Location 29 84 Date string ··· 31 86 GoogleTagScript template.HTML 32 87 Instructions string 33 88 Hash string 34 - Recipes []ai.Recipe 89 + Recipes []shoppingRecipeView 35 90 ShoppingList []ai.Ingredient 36 91 ConversationID string 37 - DismissedHashes map[string]bool 38 92 Style seasons.Style 39 93 ServerSignedIn bool 40 94 }{ ··· 44 98 GoogleTagScript: templates.GoogleTagScript(), 45 99 Instructions: p.Instructions, 46 100 Hash: hash, 47 - Recipes: l.Recipes, 48 - ShoppingList: shoppingListForDisplay(l.Recipes), 101 + Recipes: recipeViews, 102 + ShoppingList: shoppingList, 49 103 ConversationID: l.ConversationID, 50 - DismissedHashes: dismissedHashes, 51 104 Style: seasons.GetCurrentStyle(), 52 105 ServerSignedIn: signedIn, 53 106 } ··· 68 121 ClarityScript template.HTML 69 122 GoogleTagScript template.HTML 70 123 Recipe ai.Recipe 124 + DisplayIngredients []ai.Ingredient 71 125 OriginHash string 72 126 ConversationID string 73 127 WineRecommendation *ai.WineSelection ··· 82 136 ClarityScript: templates.ClarityScript(), 83 137 GoogleTagScript: templates.GoogleTagScript(), 84 138 Recipe: recipe, 139 + DisplayIngredients: ingredientsForDisplay(recipe.Ingredients, wineRecommendation), 85 140 OriginHash: recipe.OriginHash, 86 141 ConversationID: p.ConversationID, 87 142 WineRecommendation: wineRecommendation, ··· 133 188 } 134 189 } 135 190 191 + // FormatShoppingRecipeWineHTML renders the shopping list wine recommendation fragment for HTMX swaps. 192 + func FormatShoppingRecipeWineHTML(recipeHash, slot string, selection *ai.WineSelection, writer http.ResponseWriter) { 193 + wineActionID, wineButtonID := shoppingWineDOMIDs(recipeHash) 194 + winePreviewID := shoppingWinePreviewDOMID(recipeHash) 195 + wineDetailID, wineDetailButtonID := shoppingWineDetailDOMIDs(recipeHash) 196 + data := struct { 197 + Hash string 198 + Wine shoppingRecipeWineView 199 + }{ 200 + Hash: recipeHash, 201 + Wine: shoppingRecipeWineView{ 202 + ActionID: wineActionID, 203 + ActionButtonID: wineButtonID, 204 + PreviewID: winePreviewID, 205 + DetailID: wineDetailID, 206 + DetailButtonID: wineDetailButtonID, 207 + Preview: winePreviewPicks(selection), 208 + Recommendation: selection, 209 + }, 210 + } 211 + 212 + templateName := "shopping_recipe_wine_action_response" 213 + if strings.EqualFold(strings.TrimSpace(slot), "details") { 214 + templateName = "shopping_recipe_wine_details_response" 215 + } 216 + 217 + if err := templates.ShoppingList.ExecuteTemplate(writer, templateName, data); err != nil { 218 + http.Error(writer, "shopping list wine template error: "+err.Error(), http.StatusInternalServerError) 219 + } 220 + } 221 + 136 222 // drops clarity, instructions and most of shoppinglist 137 223 func FormatMail(p *generatorParams, l ai.ShoppingList, writer io.Writer) error { 138 224 // TODO just put params into shopping list and pass that up? ··· 156 242 return templates.Mail.Execute(writer, data) 157 243 } 158 244 159 - func shoppingListForDisplay(recipes []ai.Recipe) []ai.Ingredient { 160 - if len(recipes) <= 1 { 245 + func shoppingListForDisplay(ingredients []ai.Ingredient) []ai.Ingredient { 246 + if len(ingredients) == 0 { 161 247 return nil 162 248 } 163 249 items := make(map[string]*ai.Ingredient) 164 250 order := make([]string, 0) 165 251 166 - for _, recipe := range recipes { 167 - for _, ingredient := range recipe.Ingredients { 168 - name := strings.ToLower(strings.TrimSpace(ingredient.Name)) 169 - if name == "" { 170 - continue 171 - } 172 - existing, ok := items[name] 173 - if !ok { 174 - items[name] = &ai.Ingredient{ 175 - Name: ingredient.Name, 176 - Quantity: strings.TrimSpace(ingredient.Quantity), 177 - } 178 - order = append(order, name) 179 - continue 180 - } 181 - qty := strings.TrimSpace(ingredient.Quantity) 182 - if qty == "" { 183 - continue 252 + for _, ingredient := range ingredients { 253 + name := strings.ToLower(strings.TrimSpace(ingredient.Name)) 254 + if name == "" { 255 + continue 256 + } 257 + existing, ok := items[name] 258 + if !ok { 259 + items[name] = &ai.Ingredient{ 260 + Name: ingredient.Name, 261 + Quantity: strings.TrimSpace(ingredient.Quantity), 184 262 } 185 - if existing.Quantity == "" { 186 - existing.Quantity = qty 187 - continue 188 - } 189 - existing.Quantity = existing.Quantity + ", " + qty 263 + order = append(order, name) 264 + continue 265 + } 266 + qty := strings.TrimSpace(ingredient.Quantity) 267 + if qty == "" { 268 + continue 269 + } 270 + if existing.Quantity == "" { 271 + existing.Quantity = qty 272 + continue 190 273 } 274 + existing.Quantity = existing.Quantity + ", " + qty 191 275 } 192 276 193 277 combined := make([]ai.Ingredient, 0, len(order)) ··· 196 280 } 197 281 return combined 198 282 } 283 + 284 + func ingredientsForDisplay(base []ai.Ingredient, wineRecommendation *ai.WineSelection) []ai.Ingredient { 285 + display := make([]ai.Ingredient, 0, len(base)) 286 + display = append(display, base...) 287 + if wineRecommendation == nil || len(wineRecommendation.Wines) == 0 { 288 + return display 289 + } 290 + display = append(display, wineRecommendation.Wines[0]) // Need a way to let the user pick among wines. 291 + return display 292 + } 293 + 294 + // shoppingWineDOMIDs and friends live in Go rather than the template because the IDs 295 + // have to match across two render paths: 296 + // - the full shopping list page render 297 + // - the HTMX wine fragment responses that swap those regions later 298 + // 299 + // Keeping the ID construction here gives us one source of truth for: 300 + // - how recipe hashes are normalized into valid DOM ids 301 + // - which ids belong to the action, preview, and details regions 302 + // - tests that assert HTMX responses target the same elements as the full page 303 + func shoppingWineDOMIDs(hash string) (containerID string, buttonID string) { 304 + safeHash := shoppingWineSafeHash(hash) 305 + return "shopping-wine-" + safeHash, "shopping-wine-picker-" + safeHash 306 + } 307 + 308 + func shoppingWinePreviewDOMID(hash string) string { 309 + safeHash := shoppingWineSafeHash(hash) 310 + return "shopping-wine-preview-" + safeHash 311 + } 312 + 313 + func shoppingWineDetailDOMIDs(hash string) (containerID string, buttonID string) { 314 + safeHash := shoppingWineSafeHash(hash) 315 + return "shopping-wine-details-" + safeHash, "shopping-wine-details-picker-" + safeHash 316 + } 317 + 318 + func shoppingWineSafeHash(hash string) string { 319 + return strings.TrimRight(strings.TrimSpace(hash), "=") 320 + } 321 + 322 + func winePreviewPicks(selection *ai.WineSelection) []ai.Ingredient { 323 + if selection == nil || len(selection.Wines) == 0 { 324 + return nil 325 + } 326 + if len(selection.Wines) <= 2 { 327 + return selection.Wines 328 + } 329 + return selection.Wines[:2] 330 + }

+116 -1

internal/recipes/html_test.go

··· 73 73 if !strings.Contains(html, `/static/htmx@2.0.8.js`) { 74 74 t.Error("shopping list HTML should include htmx script") 75 75 } 76 + if !strings.Contains(html, "shopping-wine-refresh:") { 77 + t.Error("shopping list HTML should include wine refresh history handling") 78 + } 76 79 } 77 80 78 81 func TestFormatMail_ValidHTML(t *testing.T) { ··· 203 206 if !strings.Contains(html, `hx-post="/recipe/`) || !strings.Contains(html, `/wine"`) { 204 207 t.Error("recipe HTML should include wine picker htmx endpoint") 205 208 } 206 - if !strings.Contains(html, "choose a wine") { 209 + if !strings.Contains(html, "Choose a wine") { 207 210 t.Error("recipe HTML should include choose a wine button") 208 211 } 209 212 if !strings.Contains(html, "Cook time:") { ··· 255 258 FormatRecipeHTML(p, list.Recipes[0], true, []RecipeThreadEntry{}, RecipeFeedback{}, &ai.WineSelection{ 256 259 Wines: []ai.Ingredient{ 257 260 {Name: "Oregon Pinot Noir", Price: "$14.99"}, 261 + {Name: "Backup Chardonnay", Price: "$11.99"}, 258 262 }, 259 263 Commentary: "Great with the savory notes.", 260 264 }, w) ··· 267 271 } 268 272 if !strings.Contains(html, "Great with the savory notes.") { 269 273 t.Error("recipe HTML should render cached wine commentary") 274 + } 275 + if got := strings.Count(html, "Oregon Pinot Noir"); got < 2 { 276 + t.Errorf("recipe HTML should include wine in ingredients and recommendation, got count %d", got) 277 + } 278 + if got := strings.Count(html, "Backup Chardonnay"); got != 1 { 279 + t.Errorf("recipe HTML should only show backup wine in recommendation, got count %d", got) 270 280 } 271 281 if strings.Contains(html, "choose a wine") { 272 282 t.Error("recipe HTML should not render choose a wine button when recommendation exists") 283 + } 284 + } 285 + 286 + func TestFormatShoppingListHTMLForHash_RendersWinePickerAndWineIngredients(t *testing.T) { 287 + loc := locations.Location{ID: "L1", Name: "Store", Address: "1 Main St"} 288 + p := DefaultParams(&loc, time.Now()) 289 + multi := ai.ShoppingList{ 290 + Recipes: []ai.Recipe{ 291 + { 292 + Title: "Roast Chicken", 293 + Description: "Simple roast", 294 + Ingredients: []ai.Ingredient{{Name: "Chicken", Quantity: "1", Price: "$10"}}, 295 + Instructions: []string{"Roast"}, 296 + Health: "Protein", 297 + DrinkPairing: "Pinot noir", 298 + }, 299 + { 300 + Title: "Pasta", 301 + Description: "Quick pasta", 302 + Ingredients: []ai.Ingredient{{Name: "Pasta", Quantity: "1 box", Price: "$2"}}, 303 + Instructions: []string{"Boil"}, 304 + Health: "Carb-rich", 305 + DrinkPairing: "Sparkling water", 306 + }, 307 + }, 308 + } 309 + wineHash := multi.Recipes[0].ComputeHash() 310 + pickerHash := multi.Recipes[1].ComputeHash() 311 + pickerActionID, pickerButtonID := shoppingWineDOMIDs(pickerHash) 312 + pickerPreviewID := shoppingWinePreviewDOMID(pickerHash) 313 + pickerDetailID, pickerDetailButtonID := shoppingWineDetailDOMIDs(pickerHash) 314 + w := httptest.NewRecorder() 315 + FormatShoppingListHTMLForHash(p, multi, map[string]*ai.WineSelection{ 316 + wineHash: { 317 + Wines: []ai.Ingredient{ 318 + {Name: "Cellar Red", Quantity: "1 bottle", Price: "$15"}, 319 + {Name: "Second Bottle", Quantity: "1 bottle", Price: "$18"}, 320 + }, 321 + Commentary: "Good with roasted flavors.", 322 + }, 323 + }, true, p.Hash(), w) 324 + html := w.Body.String() 325 + 326 + isValidHTML(t, html) 327 + 328 + if !strings.Contains(html, `id="`+pickerActionID+`"`) { 329 + t.Fatalf("shopping list should include action wine container for recipe without selection, body: %s", html) 330 + } 331 + if !strings.Contains(html, `id="`+pickerButtonID+`"`) { 332 + t.Fatalf("shopping list should include compact wine picker for recipe without selection, body: %s", html) 333 + } 334 + if !strings.Contains(html, `id="`+pickerPreviewID+`"`) { 335 + t.Fatalf("shopping list should include preview wine container for recipe without selection, body: %s", html) 336 + } 337 + if !strings.Contains(html, `id="`+pickerDetailID+`"`) { 338 + t.Fatalf("shopping list should include details wine container for recipe without selection, body: %s", html) 339 + } 340 + if !strings.Contains(html, `id="`+pickerDetailButtonID+`"`) { 341 + t.Fatalf("shopping list should include details wine picker for recipe without selection, body: %s", html) 342 + } 343 + if _, wineButtonID := shoppingWineDOMIDs(wineHash); strings.Contains(html, `id="`+wineButtonID+`"`) { 344 + t.Fatalf("shopping list should not include picker for recipe with cached wine, body: %s", html) 345 + } 346 + if !strings.Contains(html, `aria-label="Choose wine"`) { 347 + t.Fatalf("shopping list should include accessible wine picker label, body: %s", html) 348 + } 349 + if strings.Index(html, `aria-live="polite"`) > strings.Index(html, `id="`+pickerPreviewID+`"`) { 350 + t.Fatalf("shopping list should render wine preview beneath the action row, body: %s", html) 351 + } 352 + if got := strings.Count(html, "Cellar Red"); got != 4 { 353 + t.Fatalf("shopping list should show selected wine in ingredients, preview, recommendation, and combined list; got count %d, body: %s", got, html) 354 + } 355 + if got := strings.Count(html, "Second Bottle"); got != 2 { 356 + t.Fatalf("shopping list should only add the second wine to preview and recommendation; got count %d, body: %s", got, html) 357 + } 358 + if got := strings.Count(html, "Good with roasted flavors."); got != 1 { 359 + t.Fatalf("shopping list should render wine commentary once in details; got count %d, body: %s", got, html) 360 + } 361 + if strings.Index(html, "Drink pairing:") > strings.Index(html, "Good with roasted flavors.") { 362 + t.Fatalf("shopping list should render wine commentary beneath drink pairing, body: %s", html) 363 + } 364 + } 365 + 366 + func TestFormatShoppingRecipeWineHTML_RendersPicker(t *testing.T) { 367 + w := httptest.NewRecorder() 368 + FormatShoppingRecipeWineHTML("recipe-hash", "action", nil, w) 369 + body := w.Body.String() 370 + actionID, _ := shoppingWineDOMIDs("recipe-hash") 371 + previewID := shoppingWinePreviewDOMID("recipe-hash") 372 + detailContainerID, _ := shoppingWineDetailDOMIDs("recipe-hash") 373 + 374 + if !strings.Contains(body, `id="`+actionID+`"`) { 375 + t.Fatalf("expected shopping wine fragment container in response, got body: %s", body) 376 + } 377 + if !strings.Contains(body, `id="`+previewID+`"`) || !strings.Contains(body, `id="`+detailContainerID+`"`) || !strings.Contains(body, `hx-swap-oob="outerHTML"`) { 378 + t.Fatalf("expected shopping wine preview and details fragments to update out-of-band, got body: %s", body) 379 + } 380 + if !strings.Contains(body, `aria-label="Choose wine"`) { 381 + t.Fatalf("expected accessible wine picker in response, got body: %s", body) 382 + } 383 + if !strings.Contains(body, `hx-post="/recipe/recipe-hash/wine?view=shopping&slot=action"`) { 384 + t.Fatalf("expected shopping wine endpoint in response, got body: %s", body) 385 + } 386 + if !strings.Contains(body, `sessionStorage.setItem('shopping-wine-refresh:`) { 387 + t.Fatalf("expected shopping wine picker to mark the page for refresh after browser back, got body: %s", body) 273 388 } 274 389 } 275 390

+41 -2

internal/recipes/server.go

··· 78 78 } 79 79 80 80 func (s *server) handleSingle(w http.ResponseWriter, r *http.Request) { 81 + // This page has user-visible HTMX mutations (wine picks, feedback, Q&A). 82 + // If the browser restores it from history or an intermediary cache, the user can 83 + // see stale UI that no longer matches cache-backed state, so force a fresh GET. 84 + w.Header().Set("Cache-Control", "no-store, no-cache, must-revalidate") 81 85 ctx := r.Context() 82 86 hash := r.PathValue("hash") 83 87 if hash == "" { ··· 248 252 http.Error(w, "htmx request required", http.StatusBadRequest) 249 253 return 250 254 } 255 + renderShoppingVariant := strings.EqualFold(strings.TrimSpace(r.URL.Query().Get("view")), "shopping") 256 + shoppingSlot := strings.TrimSpace(r.URL.Query().Get("slot")) 251 257 hash := strings.TrimSpace(r.PathValue("hash")) 252 258 if hash == "" { 253 259 http.Error(w, "missing recipe hash", http.StatusBadRequest) ··· 258 264 http.Error(w, "failed to load wine recommendation", http.StatusInternalServerError) 259 265 return 260 266 } 261 - FormatRecipeWineHTML(hash, selection, w) 267 + if renderShoppingVariant { 268 + FormatShoppingRecipeWineHTML(hash, shoppingSlot, selection, w) 269 + } else { 270 + FormatRecipeWineHTML(hash, selection, w) 271 + } 262 272 return 263 273 } else if !errors.Is(err, cache.ErrNotFound) { 264 274 slog.ErrorContext(ctx, "failed to load cached wine recommendation", "hash", hash, "error", err) ··· 304 314 slog.ErrorContext(ctx, "failed to save wine recommendation", "hash", hash, "error", err) 305 315 } 306 316 317 + if renderShoppingVariant { 318 + FormatShoppingRecipeWineHTML(hash, shoppingSlot, selection, w) 319 + return 320 + } 307 321 FormatRecipeWineHTML(hash, selection, w) 308 322 } 309 323 ··· 680 694 } 681 695 682 696 func (s *server) handleRecipes(w http.ResponseWriter, r *http.Request) { 697 + // The shopping list page is mutated in-place via HTMX (save/dismiss/wine picks). 698 + // We disable browser/intermediary caching so Back/Forward revalidation fetches the 699 + // latest server-rendered state instead of restoring a stale DOM snapshot. 700 + w.Header().Set("Cache-Control", "no-store, no-cache, must-revalidate") 683 701 ctx := r.Context() 684 702 // TODO(pm): Revisit route shape for hash-based recipe lists. `h` is a derived key from 685 703 // query params, so `/recipes?h=...` is defensible; decide later if we also want a ··· 730 748 s.mergeParamsWithSelection(ctx, p, fromStore, slist.Recipes) 731 749 } 732 750 applySavedToRecipes(slist.Recipes, p) 733 - FormatShoppingListHTMLForHash(p, *slist, signedIn, hashParam, w) 751 + wineRecommendations := make(map[string]*ai.WineSelection, len(slist.Recipes)) 752 + var wineWG sync.WaitGroup 753 + var wineMu sync.Mutex 754 + wineWG.Add(len(slist.Recipes)) 755 + for _, recipe := range slist.Recipes { 756 + recipeHash := recipe.ComputeHash() 757 + go func(recipeHash string) { 758 + defer wineWG.Done() 759 + wineRecommendation, wineErr := s.WineFromCache(ctx, recipeHash) 760 + if wineErr != nil { 761 + if !errors.Is(wineErr, cache.ErrNotFound) { 762 + slog.ErrorContext(ctx, "failed to load cached wine recommendation for shopping list render", "recipe_hash", recipeHash, "error", wineErr) 763 + } 764 + return 765 + } 766 + wineMu.Lock() 767 + wineRecommendations[recipeHash] = wineRecommendation 768 + wineMu.Unlock() 769 + }(recipeHash) 770 + } 771 + wineWG.Wait() 772 + FormatShoppingListHTMLForHash(p, *slist, wineRecommendations, signedIn, hashParam, w) 734 773 return 735 774 } 736 775

+60

internal/recipes/server_test.go

··· 85 85 if got := u.Query().Get("h"); got != hash { 86 86 t.Fatalf("expected redirect hash %q, got %q", hash, got) 87 87 } 88 + if got := rr.Header().Get("Cache-Control"); got != "no-store, no-cache, must-revalidate" { 89 + t.Fatalf("expected cache control header on recipes page, got %q", got) 90 + } 88 91 } 89 92 90 93 func TestHandleRecipes_RedirectsLegacyHashAndPreservesQuery(t *testing.T) { ··· 169 172 } 170 173 if !strings.Contains(body, "Canonical Test Store") { 171 174 t.Fatalf("expected canonical params location to render, body: %s", body) 175 + } 176 + if got := rr.Header().Get("Cache-Control"); got != "no-store, no-cache, must-revalidate" { 177 + t.Fatalf("expected cache control header on recipe page, got %q", got) 172 178 } 173 179 } 174 180 ··· 561 567 } 562 568 if got, want := g.winePickCalls, 1; got != want { 563 569 t.Fatalf("expected PickAWine call count %d, got %d", want, got) 570 + } 571 + } 572 + 573 + func TestHandleWine_ShoppingVariantReturnsShoppingFragment(t *testing.T) { 574 + cacheStore := cache.NewFileCache(filepath.Join(t.TempDir(), "cache")) 575 + g := &captureQuestionGenerator{} 576 + s := &server{ 577 + recipeio: recipeio{Cache: cacheStore}, 578 + storage: users.NewStorage(cacheStore), 579 + clerk: auth.DefaultMock(), 580 + generator: g, 581 + } 582 + 583 + p := DefaultParams(&locations.Location{ID: "loc-wine", Name: "Wine Test Store"}, time.Now()) 584 + p.ConversationID = "conv-wine" 585 + originHash := p.Hash() 586 + if err := s.SaveParams(t.Context(), p); err != nil { 587 + t.Fatalf("failed to save params: %v", err) 588 + } 589 + recipe := ai.Recipe{ 590 + OriginHash: originHash, 591 + Title: "Roast Chicken", 592 + Description: "Crisp skin and herbs.", 593 + Ingredients: []ai.Ingredient{{Name: "chicken", Quantity: "1", Price: "$12"}}, 594 + Instructions: []string{"Roast until done."}, 595 + WineStyles: []string{"pinot noir"}, 596 + } 597 + recipeHash := recipe.ComputeHash() 598 + if err := s.SaveRecipes(t.Context(), []ai.Recipe{recipe}, originHash); err != nil { 599 + t.Fatalf("failed to save recipe: %v", err) 600 + } 601 + 602 + req := httptest.NewRequest(http.MethodPost, "/recipe/"+recipeHash+"/wine?view=shopping", nil) 603 + req.Header.Set("HX-Request", "true") 604 + req.SetPathValue("hash", recipeHash) 605 + rr := httptest.NewRecorder() 606 + 607 + s.handleWine(rr, req) 608 + 609 + if rr.Code != http.StatusOK { 610 + t.Fatalf("expected status %d, got %d, body: %s", http.StatusOK, rr.Code, rr.Body.String()) 611 + } 612 + body := rr.Body.String() 613 + actionID, _ := shoppingWineDOMIDs(recipeHash) 614 + previewID := shoppingWinePreviewDOMID(recipeHash) 615 + detailContainerID, _ := shoppingWineDetailDOMIDs(recipeHash) 616 + if !strings.Contains(body, `id="`+actionID+`"`) { 617 + t.Fatalf("expected shopping wine fragment container in response, got body: %s", body) 618 + } 619 + if !strings.Contains(body, `id="`+previewID+`"`) || !strings.Contains(body, `id="`+detailContainerID+`"`) || !strings.Contains(body, `hx-swap-oob="outerHTML"`) { 620 + t.Fatalf("expected shopping wine response to update preview and details containers out-of-band, got body: %s", body) 621 + } 622 + if !strings.Contains(body, "Try a chilled sauvignon blanc.") { 623 + t.Fatalf("expected wine recommendation in response, got body: %s", body) 564 624 } 565 625 } 566 626

+12 -25

internal/recipes/shopping_list_test.go

··· 8 8 9 9 func TestShoppingListForDisplay(t *testing.T) { 10 10 tests := []struct { 11 - name string 12 - recipes []ai.Recipe 13 - want []ai.Ingredient 11 + name string 12 + ingredients []ai.Ingredient 13 + want []ai.Ingredient 14 14 }{ 15 15 { 16 - name: "single recipe returns nil", 17 - recipes: []ai.Recipe{ 18 - {Title: "Solo"}, 19 - }, 16 + name: "empty list returns empty result", 20 17 want: nil, 21 18 }, 22 19 { 23 20 name: "combines quantities and preserves first-seen order", 24 - recipes: []ai.Recipe{ 25 - { 26 - Title: "First", 27 - Ingredients: []ai.Ingredient{ 28 - {Name: "Onion", Quantity: "1"}, 29 - {Name: "Garlic", Quantity: ""}, 30 - }, 31 - }, 32 - { 33 - Title: "Second", 34 - Ingredients: []ai.Ingredient{ 35 - {Name: "onion", Quantity: "2"}, 36 - {Name: "garlic", Quantity: "3 cloves"}, 37 - {Name: "Basil", Quantity: " "}, 38 - {Name: " ", Quantity: "1"}, 39 - }, 40 - }, 21 + ingredients: []ai.Ingredient{ 22 + {Name: "Onion", Quantity: "1"}, 23 + {Name: "Garlic", Quantity: ""}, 24 + {Name: "onion", Quantity: "2"}, 25 + {Name: "garlic", Quantity: "3 cloves"}, 26 + {Name: "Basil", Quantity: " "}, 27 + {Name: " ", Quantity: "1"}, 41 28 }, 42 29 want: []ai.Ingredient{ 43 30 {Name: "Onion", Quantity: "1, 2"}, ··· 49 36 50 37 for _, tc := range tests { 51 38 t.Run(tc.name, func(t *testing.T) { 52 - got := shoppingListForDisplay(tc.recipes) 39 + got := shoppingListForDisplay(tc.ingredients) 53 40 if !reflect.DeepEqual(got, tc.want) { 54 41 t.Fatalf("shoppingListForDisplay() = %#v, want %#v", got, tc.want) 55 42 }

+1 -1

internal/static/tailwind.css

··· 1 1 /*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */ 2 - @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-700:oklch(50.5% .213 27.518);--color-amber-500:oklch(76.9% .188 70.08);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-700:oklch(50.8% .118 165.612);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand-50:var(--brand-50);--color-brand-100:var(--brand-100);--color-brand-200:var(--brand-200);--color-brand-300:var(--brand-300);--color-brand-400:var(--brand-400);--color-brand-500:var(--brand-500);--color-brand-600:var(--brand-600);--color-brand-700:var(--brand-700);--color-brand-800:var(--brand-800);--color-brand-900:var(--brand-900);--color-ink-500:#64748b;--color-ink-600:#475569;--color-ink-700:#334155;--color-ink-900:#0f172a;--color-action-green-50:#ecfdf5;--color-action-green-100:#d1fae5;--color-action-green-300:#6ee7b7;--color-action-green-500:#10b981;--color-action-green-600:#059669;--color-action-green-700:#047857;--color-action-red-50:#fef2f2;--color-action-red-100:#fee2e2;--color-action-red-500:#ef4444;--color-action-red-600:#dc2626;--color-action-red-700:#b91c1c}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}p{text-wrap:pretty}}@layer components{.friendly-card{corner-shape:squircle;border-radius:48px}.friendly-card-soft{corner-shape:squircle;border-radius:28px}}@layer utilities{.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.top-3{top:calc(var(--spacing)*3)}.right-0{right:calc(var(--spacing)*0)}.z-10{z-index:10}.z-20{z-index:20}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-14{height:calc(var(--spacing)*14)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing)*4)}.w-14{width:calc(var(--spacing)*14)}.w-48{width:calc(var(--spacing)*48)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-brand-100>:not(:last-child)){border-color:var(--color-brand-100)}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-action-green-500{border-color:var(--color-action-green-500)}.border-action-red-500{border-color:var(--color-action-red-500)}.border-brand-100{border-color:var(--color-brand-100)}.border-brand-200{border-color:var(--color-brand-200)}.border-brand-300{border-color:var(--color-brand-300)}.border-brand-400{border-color:var(--color-brand-400)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-t-brand-600{border-top-color:var(--color-brand-600)}.bg-action-green-50{background-color:var(--color-action-green-50)}.bg-action-green-500{background-color:var(--color-action-green-500)}.bg-action-red-50{background-color:var(--color-action-red-50)}.bg-brand-50,.bg-brand-50\/40{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/40{background-color:color-mix(in oklab,var(--color-brand-50)40%,transparent)}}.bg-brand-50\/60{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/60{background-color:color-mix(in oklab,var(--color-brand-50)60%,transparent)}}.bg-brand-50\/70{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/70{background-color:color-mix(in oklab,var(--color-brand-50)70%,transparent)}}.bg-brand-50\/80{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/80{background-color:color-mix(in oklab,var(--color-brand-50)80%,transparent)}}.bg-brand-100{background-color:var(--color-brand-100)}.bg-brand-500{background-color:var(--color-brand-500)}.bg-brand-600{background-color:var(--color-brand-600)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-white{background-color:var(--color-white)}.bg-white\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\/88{background-color:#ffffffe0}@supports (color:color-mix(in lab, red, red)){.bg-white\/88{background-color:color-mix(in oklab,var(--color-white)88%,transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-brand-50{--tw-gradient-from:var(--color-brand-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-brand-50\/80{--tw-gradient-from:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.from-brand-50\/80{--tw-gradient-from:color-mix(in oklab,var(--color-brand-50)80%,transparent)}}.from-brand-50\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-white\/72{--tw-gradient-from:#ffffffb8}@supports (color:color-mix(in lab, red, red)){.from-white\/72{--tw-gradient-from:color-mix(in oklab,var(--color-white)72%,transparent)}}.from-white\/72{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-white{--tw-gradient-via:var(--color-white);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-white\/62{--tw-gradient-via:#ffffff9e}@supports (color:color-mix(in lab, red, red)){.via-white\/62{--tw-gradient-via:color-mix(in oklab,var(--color-white)62%,transparent)}}.via-white\/62{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-brand-50\/80{--tw-gradient-to:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.to-brand-50\/80{--tw-gradient-to:color-mix(in oklab,var(--color-brand-50)80%,transparent)}}.to-brand-50\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-white{--tw-gradient-to:var(--color-white);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-white\/78{--tw-gradient-to:#ffffffc7}@supports (color:color-mix(in lab, red, red)){.to-white\/78{--tw-gradient-to:color-mix(in oklab,var(--color-white)78%,transparent)}}.to-white\/78{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-8{padding-top:calc(var(--spacing)*8)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pl-5{padding-left:calc(var(--spacing)*5)}.pl-6{padding-left:calc(var(--spacing)*6)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-pretty{text-wrap:pretty}.whitespace-pre-line{white-space:pre-line}.text-action-green-700{color:var(--color-action-green-700)}.text-action-red-600{color:var(--color-action-red-600)}.text-action-red-700{color:var(--color-action-red-700)}.text-amber-500{color:var(--color-amber-500)}.text-brand-600{color:var(--color-brand-600)}.text-brand-700{color:var(--color-brand-700)}.text-brand-800{color:var(--color-brand-800)}.text-brand-900{color:var(--color-brand-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-ink-500{color:var(--color-ink-500)}.text-ink-600{color:var(--color-ink-600)}.text-ink-700{color:var(--color-ink-700)}.text-ink-900{color:var(--color-ink-900)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.decoration-brand-300{-webkit-text-decoration-color:var(--color-brand-300);-webkit-text-decoration-color:var(--color-brand-300);text-decoration-color:var(--color-brand-300)}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::placeholder{color:var(--color-gray-400)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.peer-checked\/dismiss\:border-action-red-700:is(:where(.peer\/dismiss):checked~*){border-color:var(--color-action-red-700)}.peer-checked\/dismiss\:bg-action-red-600:is(:where(.peer\/dismiss):checked~*){background-color:var(--color-action-red-600)}.peer-checked\/dismiss\:text-white:is(:where(.peer\/dismiss):checked~*){color:var(--color-white)}.peer-checked\/instructions\:block:is(:where(.peer\/instructions):checked~*){display:block}.peer-checked\/save\:border-action-green-700:is(:where(.peer\/save):checked~*){border-color:var(--color-action-green-700)}.peer-checked\/save\:bg-action-green-600:is(:where(.peer\/save):checked~*){background-color:var(--color-action-green-600)}.peer-checked\/save\:text-white:is(:where(.peer\/save):checked~*){color:var(--color-white)}@media (hover:hover){.hover\:border-brand-400:hover{border-color:var(--color-brand-400)}.hover\:bg-action-green-100:hover{background-color:var(--color-action-green-100)}.hover\:bg-action-green-600:hover{background-color:var(--color-action-green-600)}.hover\:bg-action-red-50:hover{background-color:var(--color-action-red-50)}.hover\:bg-action-red-100:hover{background-color:var(--color-action-red-100)}.hover\:bg-brand-50:hover{background-color:var(--color-brand-50)}.hover\:bg-brand-100:hover{background-color:var(--color-brand-100)}.hover\:bg-brand-200:hover{background-color:var(--color-brand-200)}.hover\:bg-brand-600:hover{background-color:var(--color-brand-600)}.hover\:bg-brand-700:hover{background-color:var(--color-brand-700)}.hover\:bg-white\/70:hover{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/70:hover{background-color:color-mix(in oklab,var(--color-white)70%,transparent)}}.hover\:text-amber-500:hover{color:var(--color-amber-500)}.hover\:text-brand-600:hover{color:var(--color-brand-600)}.hover\:text-brand-700:hover{color:var(--color-brand-700)}.hover\:text-brand-800:hover{color:var(--color-brand-800)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-brand-400:focus{border-color:var(--color-brand-400)}.focus\:border-brand-500:focus{border-color:var(--color-brand-500)}.focus\:bg-brand-50:focus{background-color:var(--color-brand-50)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-action-green-300:focus{--tw-ring-color:var(--color-action-green-300)}.focus\:ring-brand-300:focus{--tw-ring-color:var(--color-brand-300)}.focus\:ring-brand-400:focus{--tw-ring-color:var(--color-brand-400)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-brand-400:disabled{background-color:var(--color-brand-400)}.disabled\:text-brand-400:disabled{color:var(--color-brand-400)}.disabled\:text-white\/90:disabled{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.disabled\:text-white\/90:disabled{color:color-mix(in oklab,var(--color-white)90%,transparent)}}@media (min-width:40rem){.sm\:w-40{width:calc(var(--spacing)*40)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:py-10{padding-block:calc(var(--spacing)*10)}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}@supports (color:oklch(62% 0.12 220)){:root{--color-ink-500:oklch(55% .032 248);--color-ink-600:oklch(46% .034 248);--color-ink-700:oklch(38.5% .035 250);--color-ink-900:oklch(24% .033 254);--color-action-green-50:oklch(97.6% .02 154);--color-action-green-100:oklch(94.5% .042 154);--color-action-green-300:oklch(82.8% .111 154);--color-action-green-500:oklch(68.5% .169 154);--color-action-green-600:oklch(58.8% .158 154);--color-action-green-700:oklch(50% .134 154);--color-action-red-50:oklch(97.6% .02 28);--color-action-red-100:oklch(94.5% .042 28);--color-action-red-300:oklch(82.8% .111 28);--color-action-red-500:oklch(68.5% .169 28);--color-action-red-600:oklch(58.8% .158 28);--color-action-red-700:oklch(50% .134 28)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}} 2 + @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-700:oklch(50.5% .213 27.518);--color-amber-500:oklch(76.9% .188 70.08);--color-green-700:oklch(52.7% .154 150.069);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-700:oklch(50.8% .118 165.612);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-900:oklch(20.8% .042 265.755);--color-slate-950:oklch(12.9% .042 264.695);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--tracking-wide:.025em;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand-50:var(--brand-50);--color-brand-100:var(--brand-100);--color-brand-200:var(--brand-200);--color-brand-300:var(--brand-300);--color-brand-400:var(--brand-400);--color-brand-500:var(--brand-500);--color-brand-600:var(--brand-600);--color-brand-700:var(--brand-700);--color-brand-800:var(--brand-800);--color-brand-900:var(--brand-900);--color-ink-500:#64748b;--color-ink-600:#475569;--color-ink-700:#334155;--color-ink-900:#0f172a;--color-action-green-50:#ecfdf5;--color-action-green-100:#d1fae5;--color-action-green-300:#6ee7b7;--color-action-green-500:#10b981;--color-action-green-600:#059669;--color-action-green-700:#047857;--color-action-red-50:#fef2f2;--color-action-red-100:#fee2e2;--color-action-red-500:#ef4444;--color-action-red-600:#dc2626;--color-action-red-700:#b91c1c}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}p{text-wrap:pretty}}@layer components{.friendly-card{corner-shape:squircle;border-radius:48px}.friendly-card-soft{corner-shape:squircle;border-radius:28px}.shopping-wine-details,.shopping-recipe-card:has(details[open]) .shopping-wine-preview{display:none}.shopping-recipe-card:has(details[open]) .shopping-wine-details{display:block}}@layer utilities{.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.top-3{top:calc(var(--spacing)*3)}.right-0{right:calc(var(--spacing)*0)}.z-10{z-index:10}.z-20{z-index:20}.-mx-2{margin-inline:calc(var(--spacing)*-2)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.h-4{height:calc(var(--spacing)*4)}.h-14{height:calc(var(--spacing)*14)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-4{width:calc(var(--spacing)*4)}.w-14{width:calc(var(--spacing)*14)}.w-48{width:calc(var(--spacing)*48)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-2{column-gap:calc(var(--spacing)*2)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-brand-100>:not(:last-child)){border-color:var(--color-brand-100)}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-action-green-500{border-color:var(--color-action-green-500)}.border-action-red-500{border-color:var(--color-action-red-500)}.border-brand-100{border-color:var(--color-brand-100)}.border-brand-200{border-color:var(--color-brand-200)}.border-brand-300{border-color:var(--color-brand-300)}.border-brand-400{border-color:var(--color-brand-400)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-t-brand-600{border-top-color:var(--color-brand-600)}.bg-action-green-50{background-color:var(--color-action-green-50)}.bg-action-green-500{background-color:var(--color-action-green-500)}.bg-action-red-50{background-color:var(--color-action-red-50)}.bg-brand-50,.bg-brand-50\/40{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/40{background-color:color-mix(in oklab,var(--color-brand-50)40%,transparent)}}.bg-brand-50\/60{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/60{background-color:color-mix(in oklab,var(--color-brand-50)60%,transparent)}}.bg-brand-50\/70{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/70{background-color:color-mix(in oklab,var(--color-brand-50)70%,transparent)}}.bg-brand-50\/80{background-color:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.bg-brand-50\/80{background-color:color-mix(in oklab,var(--color-brand-50)80%,transparent)}}.bg-brand-100{background-color:var(--color-brand-100)}.bg-brand-500{background-color:var(--color-brand-500)}.bg-brand-600{background-color:var(--color-brand-600)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-white{background-color:var(--color-white)}.bg-white\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\/88{background-color:#ffffffe0}@supports (color:color-mix(in lab, red, red)){.bg-white\/88{background-color:color-mix(in oklab,var(--color-white)88%,transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-brand-50{--tw-gradient-from:var(--color-brand-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-brand-50\/80{--tw-gradient-from:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.from-brand-50\/80{--tw-gradient-from:color-mix(in oklab,var(--color-brand-50)80%,transparent)}}.from-brand-50\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-white\/72{--tw-gradient-from:#ffffffb8}@supports (color:color-mix(in lab, red, red)){.from-white\/72{--tw-gradient-from:color-mix(in oklab,var(--color-white)72%,transparent)}}.from-white\/72{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-white{--tw-gradient-via:var(--color-white);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-white\/62{--tw-gradient-via:#ffffff9e}@supports (color:color-mix(in lab, red, red)){.via-white\/62{--tw-gradient-via:color-mix(in oklab,var(--color-white)62%,transparent)}}.via-white\/62{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-brand-50\/80{--tw-gradient-to:var(--color-brand-50)}@supports (color:color-mix(in lab, red, red)){.to-brand-50\/80{--tw-gradient-to:color-mix(in oklab,var(--color-brand-50)80%,transparent)}}.to-brand-50\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-white{--tw-gradient-to:var(--color-white);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-white\/78{--tw-gradient-to:#ffffffc7}@supports (color:color-mix(in lab, red, red)){.to-white\/78{--tw-gradient-to:color-mix(in oklab,var(--color-white)78%,transparent)}}.to-white\/78{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-8{padding-top:calc(var(--spacing)*8)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pl-5{padding-left:calc(var(--spacing)*5)}.pl-6{padding-left:calc(var(--spacing)*6)}.text-center{text-align:center}.text-left{text-align:left}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-pretty{text-wrap:pretty}.whitespace-pre-line{white-space:pre-line}.text-action-green-700{color:var(--color-action-green-700)}.text-action-red-600{color:var(--color-action-red-600)}.text-action-red-700{color:var(--color-action-red-700)}.text-amber-500{color:var(--color-amber-500)}.text-brand-600{color:var(--color-brand-600)}.text-brand-700{color:var(--color-brand-700)}.text-brand-800{color:var(--color-brand-800)}.text-brand-900{color:var(--color-brand-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-700{color:var(--color-green-700)}.text-ink-500{color:var(--color-ink-500)}.text-ink-600{color:var(--color-ink-600)}.text-ink-700{color:var(--color-ink-700)}.text-ink-900{color:var(--color-ink-900)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.decoration-brand-300{-webkit-text-decoration-color:var(--color-brand-300);-webkit-text-decoration-color:var(--color-brand-300);text-decoration-color:var(--color-brand-300)}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-gray-400::placeholder{color:var(--color-gray-400)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.peer-checked\/dismiss\:border-action-red-700:is(:where(.peer\/dismiss):checked~*){border-color:var(--color-action-red-700)}.peer-checked\/dismiss\:bg-action-red-600:is(:where(.peer\/dismiss):checked~*){background-color:var(--color-action-red-600)}.peer-checked\/dismiss\:text-white:is(:where(.peer\/dismiss):checked~*){color:var(--color-white)}.peer-checked\/instructions\:block:is(:where(.peer\/instructions):checked~*){display:block}.peer-checked\/save\:border-action-green-700:is(:where(.peer\/save):checked~*){border-color:var(--color-action-green-700)}.peer-checked\/save\:bg-action-green-600:is(:where(.peer\/save):checked~*){background-color:var(--color-action-green-600)}.peer-checked\/save\:text-white:is(:where(.peer\/save):checked~*){color:var(--color-white)}@media (hover:hover){.hover\:border-brand-400:hover{border-color:var(--color-brand-400)}.hover\:bg-action-green-100:hover{background-color:var(--color-action-green-100)}.hover\:bg-action-green-600:hover{background-color:var(--color-action-green-600)}.hover\:bg-action-red-50:hover{background-color:var(--color-action-red-50)}.hover\:bg-action-red-100:hover{background-color:var(--color-action-red-100)}.hover\:bg-brand-50:hover{background-color:var(--color-brand-50)}.hover\:bg-brand-100:hover{background-color:var(--color-brand-100)}.hover\:bg-brand-200:hover{background-color:var(--color-brand-200)}.hover\:bg-brand-600:hover{background-color:var(--color-brand-600)}.hover\:bg-brand-700:hover{background-color:var(--color-brand-700)}.hover\:bg-white\/70:hover{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/70:hover{background-color:color-mix(in oklab,var(--color-white)70%,transparent)}}.hover\:text-amber-500:hover{color:var(--color-amber-500)}.hover\:text-brand-600:hover{color:var(--color-brand-600)}.hover\:text-brand-700:hover{color:var(--color-brand-700)}.hover\:text-brand-800:hover{color:var(--color-brand-800)}.hover\:underline:hover{text-decoration-line:underline}}.focus\:border-brand-400:focus{border-color:var(--color-brand-400)}.focus\:border-brand-500:focus{border-color:var(--color-brand-500)}.focus\:bg-brand-50:focus{background-color:var(--color-brand-50)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-action-green-300:focus{--tw-ring-color:var(--color-action-green-300)}.focus\:ring-brand-300:focus{--tw-ring-color:var(--color-brand-300)}.focus\:ring-brand-400:focus{--tw-ring-color:var(--color-brand-400)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-brand-400:disabled{background-color:var(--color-brand-400)}.disabled\:text-brand-400:disabled{color:var(--color-brand-400)}.disabled\:text-white\/90:disabled{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.disabled\:text-white\/90:disabled{color:color-mix(in oklab,var(--color-white)90%,transparent)}}@media (min-width:40rem){.sm\:w-40{width:calc(var(--spacing)*40)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:justify-end{justify-content:flex-end}.sm\:py-10{padding-block:calc(var(--spacing)*10)}}@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}@supports (color:oklch(62% 0.12 220)){:root{--color-ink-500:oklch(55% .032 248);--color-ink-600:oklch(46% .034 248);--color-ink-700:oklch(38.5% .035 250);--color-ink-900:oklch(24% .033 254);--color-action-green-50:oklch(97.6% .02 154);--color-action-green-100:oklch(94.5% .042 154);--color-action-green-300:oklch(82.8% .111 154);--color-action-green-500:oklch(68.5% .169 154);--color-action-green-600:oklch(58.8% .158 154);--color-action-green-700:oklch(50% .134 154);--color-action-red-50:oklch(97.6% .02 28);--color-action-red-100:oklch(94.5% .042 28);--color-action-red-300:oklch(82.8% .111 28);--color-action-red-500:oklch(68.5% .169 28);--color-action-red-600:oklch(58.8% .158 28);--color-action-red-700:oklch(50% .134 28)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

+4 -4

internal/templates/recipe.html

··· 55 55 <div> 56 56 <h3 class="text-sm font-semibold uppercase tracking-wide text-gray-500">Ingredients</h3> 57 57 <ul class="mt-3 space-y-2 text-gray-700"> 58 - {{range .Recipe.Ingredients}} 58 + {{range .DisplayIngredients}} 59 59 <li class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-brand-50 px-3 py-2 text-sm"> 60 60 <span class="font-medium text-brand-700">{{.Name}}</span> 61 61 <span class="text-gray-600">{{.Quantity}}</span> ··· 288 288 hx-target="#wine-recommendation" 289 289 hx-swap="outerHTML" 290 290 hx-disabled-elt="#wine-picker-button" 291 - hx-on::before-request="this.textContent='Choosing...';" 292 - hx-on::response-error="this.textContent='choose a wine';" 291 + hx-on::before-request="this.textContent='Choosing 🍷 ...';" 292 + hx-on::response-error="this.textContent='wine failure 😞';" 293 293 class="inline-flex items-center justify-center rounded-lg border border-brand-300 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-sm transition hover:border-brand-400 hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2"> 294 - choose a wine 294 + 🍷 Choose a wine 295 295 </button> 296 296 {{end}} 297 297 </div>

+161 -13

internal/templates/shoppinglist.html

··· 66 66 67 67 <div class="mt-8 space-y-8"> 68 68 {{range .Recipes}} 69 - <article class="space-y-5 rounded-2xl border border-brand-100 bg-white/95 p-6 shadow-md"> 69 + <article class="shopping-recipe-card space-y-5 rounded-2xl border border-brand-100 bg-white/95 p-6 shadow-md"> 70 70 <header class="space-y-4"> 71 71 <div> 72 - <a href="/recipe/{{.ComputeHash}}" class="text-2xl font-semibold text-brand-700 hover:text-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2"> 72 + <a href="/recipe/{{.Hash}}" class="text-2xl font-semibold text-brand-700 hover:text-brand-600 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2"> 73 73 {{.Title}} 74 74 </a> 75 75 <p class="mt-1 text-sm text-ink-500">{{.Description}}</p> ··· 77 77 <div class="flex flex-wrap items-center gap-3"> 78 78 <input type="radio" 79 79 {{if .Saved}}checked{{end}} 80 - name="recipe-{{.ComputeHash}}" 80 + name="recipe-{{.Hash}}" 81 81 value="save" 82 - id="save-{{.ComputeHash}}" 82 + id="save-{{.Hash}}" 83 83 class="peer/save hidden" /> 84 - <label for="save-{{.ComputeHash}}" 85 - hx-post="/recipe/{{.ComputeHash}}/save" 84 + <label for="save-{{.Hash}}" 85 + hx-post="/recipe/{{.Hash}}/save" 86 86 hx-vals='{"h":"{{$.Hash}}"}' 87 87 hx-trigger="click" 88 88 hx-target="next .profile-status" ··· 92 92 Save 93 93 </label> 94 94 <input type="radio" 95 - {{if index $.DismissedHashes (.ComputeHash)}}checked{{end}} 96 - name="recipe-{{.ComputeHash}}" 95 + {{if .Dismissed}}checked{{end}} 96 + name="recipe-{{.Hash}}" 97 97 value="dismiss" 98 - id="dismiss-{{.ComputeHash}}" 98 + id="dismiss-{{.Hash}}" 99 99 class="peer/dismiss hidden" /> 100 - <label for="dismiss-{{.ComputeHash}}" 101 - hx-post="/recipe/{{.ComputeHash}}/dismiss" 100 + <label for="dismiss-{{.Hash}}" 101 + hx-post="/recipe/{{.Hash}}/dismiss" 102 102 hx-vals='{"h":"{{$.Hash}}"}' 103 103 hx-trigger="click" 104 104 hx-target="next .profile-status" ··· 112 112 class="inline-flex items-center justify-center rounded-lg border-2 border-brand-400 bg-brand-50 px-4 py-2 text-sm font-medium text-brand-700 transition hover:bg-brand-100 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2"> 113 113 Details 114 114 </button> 115 + {{template "shopping_recipe_wine_action" .}} 115 116 <span class="profile-status text-xs font-medium text-ink-600" aria-live="polite"></span> 116 117 </div> 117 118 </header> 118 119 119 - <details {{if not (or .Saved (index $.DismissedHashes (.ComputeHash)))}}open{{end}} class="space-y-4"> 120 + <div class="pt-1"> 121 + {{template "shopping_recipe_wine_preview" .}} 122 + </div> 123 + 124 + <details {{if not (or .Saved .Dismissed)}}open{{end}} class="space-y-4"> 120 125 <summary class="hidden">Details</summary> 121 126 <section class="space-y-6"> 122 127 <div class="grid gap-6 md:grid-cols-2"> 123 128 <div> 124 129 <h3 class="text-sm font-semibold uppercase tracking-wide text-ink-500">Ingredients</h3> 125 130 <ul class="mt-3 space-y-2 text-ink-700"> 126 - {{range .Ingredients}} 131 + {{range .DisplayIngredients}} 127 132 <li class="flex flex-wrap items-center justify-between gap-2 rounded-lg bg-brand-50 px-3 py-2 text-sm"> 128 133 <span class="font-medium text-brand-700">{{.Name}}</span> 129 134 <span class="text-ink-600">{{.Quantity}}</span> ··· 151 156 {{end}} 152 157 <p><span class="font-semibold text-brand-700">Health notes:</span> {{.Health}}</p> 153 158 <p><span class="font-semibold text-brand-700">Drink pairing:</span> {{.DrinkPairing}}</p> 159 + {{template "shopping_recipe_wine_details" .}} 154 160 </div> 155 161 </section> 156 162 </details> ··· 194 200 </section> 195 201 </main> 196 202 <script src="/static/htmx@2.0.8.js"></script> 203 + <script> 204 + (() => { 205 + // After an HTMX wine pick, browser Back/Forward can restore a stale shopping-list 206 + // DOM from history instead of refetching the page. We mark the page as dirty in 207 + // sessionStorage and force one reload on pageshow so the restored page matches the 208 + // latest server-rendered wine state, then clear the flag immediately. 209 + const key = "shopping-wine-refresh:{{.Hash}}"; 210 + window.addEventListener("pageshow", (event) => { 211 + if (sessionStorage.getItem(key) !== "1") return; 212 + if (event.persisted) { 213 + sessionStorage.removeItem(key); 214 + location.reload(); 215 + return; 216 + } 217 + sessionStorage.removeItem(key); 218 + }); 219 + })(); 220 + </script> 197 221 {{template "clerk_refresh.html" .}} 198 222 </body> 199 223 </html> 224 + 225 + {{define "shopping_recipe_wine_action"}} 226 + <div id="{{.Wine.ActionID}}" class="shopping-wine-action"> 227 + {{template "shopping_recipe_wine_action_content" .}} 228 + </div> 229 + {{end}} 230 + 231 + {{define "shopping_recipe_wine_action_oob"}} 232 + <div id="{{.Wine.ActionID}}" hx-swap-oob="outerHTML" class="shopping-wine-action"> 233 + {{template "shopping_recipe_wine_action_content" .}} 234 + </div> 235 + {{end}} 236 + 237 + {{define "shopping_recipe_wine_action_content"}} 238 + {{if not .Wine.Recommendation}} 239 + <button type="button" 240 + id="{{.Wine.ActionButtonID}}" 241 + hx-post="/recipe/{{.Hash}}/wine?view=shopping&slot=action" 242 + hx-target="#{{.Wine.ActionID}}" 243 + hx-swap="outerHTML" 244 + hx-disabled-elt="#{{.Wine.ActionButtonID}}" 245 + hx-on::before-request="this.textContent='🍷🔄';" 246 + hx-on::response-error="this.textContent='😞';" 247 + hx-on::after-request="if(event.detail.successful){sessionStorage.setItem('shopping-wine-refresh:{{$.Hash}}','1');}" 248 + aria-label="Choose wine" 249 + title="Choose wine" 250 + class="inline-flex items-center justify-center rounded-lg border-2 border-brand-300 bg-white px-4 py-2 text-sm font-medium text-brand-700 shadow-sm transition hover:border-brand-400 hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2"> 251 + 🍷 252 + </button> 253 + {{end}} 254 + {{end}} 255 + 256 + {{define "shopping_recipe_wine_preview"}} 257 + <div id="{{.Wine.PreviewID}}" class="shopping-wine-preview"> 258 + {{template "shopping_recipe_wine_preview_content" .}} 259 + </div> 260 + {{end}} 261 + 262 + {{define "shopping_recipe_wine_preview_oob"}} 263 + <div id="{{.Wine.PreviewID}}" hx-swap-oob="outerHTML" class="shopping-wine-preview"> 264 + {{template "shopping_recipe_wine_preview_content" .}} 265 + </div> 266 + {{end}} 267 + 268 + {{define "shopping_recipe_wine_preview_content"}} 269 + {{if .Wine.Recommendation}} 270 + <div class="rounded-lg border border-brand-200 bg-brand-50 px-3 py-2 text-xs text-brand-900"> 271 + {{if .Wine.Preview}} 272 + <p class="font-semibold text-brand-700">Wine picks:</p> 273 + <ul class="mt-1 space-y-1"> 274 + {{range .Wine.Preview}} 275 + <li class="flex flex-wrap items-baseline gap-x-2"> 276 + <span class="font-medium text-brand-800">{{.Name}}</span> 277 + {{if .Price}}<span class="text-brand-700">{{.Price}}</span>{{end}} 278 + {{if .Quantity}}<span class="text-brand-600">{{.Quantity}}</span>{{end}} 279 + </li> 280 + {{end}} 281 + </ul> 282 + {{end}} 283 + </div> 284 + {{end}} 285 + {{end}} 286 + 287 + {{define "shopping_recipe_wine_details"}} 288 + <div id="{{.Wine.DetailID}}" class="shopping-wine-details pt-2"> 289 + {{template "shopping_recipe_wine_details_content" .}} 290 + </div> 291 + {{end}} 292 + 293 + {{define "shopping_recipe_wine_details_oob"}} 294 + <div id="{{.Wine.DetailID}}" hx-swap-oob="outerHTML" class="shopping-wine-details pt-2"> 295 + {{template "shopping_recipe_wine_details_content" .}} 296 + </div> 297 + {{end}} 298 + 299 + {{define "shopping_recipe_wine_details_content"}} 300 + {{if .Wine.Recommendation}} 301 + <div class="rounded-lg border border-brand-200 bg-brand-50 px-3 py-2 text-sm text-brand-900"> 302 + {{if .Wine.Recommendation.Wines}} 303 + <p class="font-semibold text-brand-700">Wine picks:</p> 304 + <ul class="mt-1 space-y-1"> 305 + {{range .Wine.Recommendation.Wines}} 306 + <li class="flex flex-wrap items-baseline gap-x-2"> 307 + <span class="font-medium text-brand-800">{{.Name}}</span> 308 + {{if .Price}}<span class="text-brand-700">{{.Price}}</span>{{end}} 309 + {{if .Quantity}}<span class="text-brand-600">{{.Quantity}}</span>{{end}} 310 + </li> 311 + {{end}} 312 + </ul> 313 + {{end}} 314 + {{if .Wine.Recommendation.Commentary}} 315 + <p class="{{if .Wine.Recommendation.Wines}}mt-2{{end}}"> 316 + <span class="font-semibold text-brand-700">Why it works:</span> 317 + <span class="whitespace-pre-line">{{.Wine.Recommendation.Commentary}}</span> 318 + </p> 319 + {{end}} 320 + </div> 321 + {{else}} 322 + <button type="button" 323 + id="{{.Wine.DetailButtonID}}" 324 + hx-post="/recipe/{{.Hash}}/wine?view=shopping&slot=details" 325 + hx-target="#{{.Wine.DetailID}}" 326 + hx-swap="outerHTML" 327 + hx-disabled-elt="#{{.Wine.DetailButtonID}}" 328 + hx-on::before-request="this.textContent='Choosing 🍷 ...';" 329 + hx-on::response-error="this.textContent='wine failure 😞';" 330 + hx-on::after-request="if(event.detail.successful){sessionStorage.setItem('shopping-wine-refresh:{{$.Hash}}','1');}" 331 + class="inline-flex items-center justify-center rounded-lg border border-brand-300 bg-white px-4 py-2 text-sm font-semibold text-brand-700 shadow-sm transition hover:border-brand-400 hover:bg-brand-50 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:ring-offset-2"> 332 + 🍷 Choose a wine 333 + </button> 334 + {{end}} 335 + {{end}} 336 + 337 + {{define "shopping_recipe_wine_action_response"}} 338 + {{template "shopping_recipe_wine_action" .}} 339 + {{template "shopping_recipe_wine_preview_oob" .}} 340 + {{template "shopping_recipe_wine_details_oob" .}} 341 + {{end}} 342 + 343 + {{define "shopping_recipe_wine_details_response"}} 344 + {{template "shopping_recipe_wine_action_oob" .}} 345 + {{template "shopping_recipe_wine_preview_oob" .}} 346 + {{template "shopping_recipe_wine_details" .}} 347 + {{end}}

+12

tailwind/input.css

··· 73 73 border-radius: 28px; 74 74 corner-shape: squircle; 75 75 } 76 + 77 + .shopping-wine-details { 78 + display: none; 79 + } 80 + 81 + .shopping-recipe-card:has(details[open]) .shopping-wine-preview { 82 + display: none; 83 + } 84 + 85 + .shopping-recipe-card:has(details[open]) .shopping-wine-details { 86 + display: block; 87 + } 76 88 } 77 89 /* This seems like not the right way to do this. 78 90 https://tailwindcss.com/docs/adding-custom-variants#custom-variants

Configure Feed

Configure Feed