Recipe detail page, menu revamp, and UX improvements

- Add recipe detail page (recipe.html) with full ingredients and instructions
- Simplify menu tab: cards show name + description only, click through for full recipe
- Add description field to Recipe model with DB migration
- Add AI-generated descriptions to menu, swap, and import prompts
- Add single dish by description (POST /api/menus/current/recipes)
- Add grocery item delete without pantry add (DELETE /api/grocery/{id}/items)
- Persist grocery checked state server-side (PATCH /api/grocery/{id}/check-item)
- Hash-based tab routing — refresh stays on current tab
- Logo branding in header and favicon
- Dark theme fixes: URL/text inputs, amber accent, muted danger/warning colors
- Markdown rendering in chat (bold, italic, code blocks, lists, headers)
- Fix instruction step splitting for inline-numbered steps (1. 2. 3.)
- Import recipe from URL with JSON-LD structured data + AI fallback

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

1 files changed, 49 insertions, 25 deletions

diff --git a/static/style.css b/static/style.css
index c530839..4395e88 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,15 +1,15 @@
 :root {
-  --bg: #0f1117;
-  --surface: #1a1d27;
-  --surface2: #252836;
-  --border: #2e3148;
-  --accent: #6c63ff;
-  --accent-hover: #8b84ff;
+  --bg: #0b0b0a;
+  --surface: #141412;
+  --surface2: #1e1e1b;
+  --border: #2a2a26;
+  --accent: #c07d0a;
+  --accent-hover: #a56a08;
   --text: #e2e8f0;
   --text-muted: #94a3b8;
-  --success: #22c55e;
-  --warning: #f59e0b;
-  --danger: #ef4444;
+  --success: #1ea34e;
+  --warning: #d4783a;
+  --danger: #b03030;
   --info: #3b82f6;
 }
 
@@ -190,6 +190,24 @@ main {
   transition: border-color 0.2s ease;
 }
 
+input[type="url"],
+input[type="text"] {
+  padding: 0.75rem;
+  background-color: var(--surface2);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  color: var(--text);
+  font-size: 0.9rem;
+  transition: border-color 0.2s ease;
+}
+
+input[type="url"]:focus,
+input[type="text"]:focus {
+  outline: none;
+  border-color: var(--accent);
+  background-color: rgba(108, 99, 255, 0.05);
+}
+
 .form-group input:focus,
 .form-group select:focus {
   outline: none;
@@ -385,12 +403,6 @@ tbody tr:hover {
   gap: 0.5rem;
 }
 
-.recipe-card-title {
-  font-weight: 600;
-  font-size: 1rem;
-  color: var(--text);
-}
-
 .recipe-type-badge {
   font-size: 0.7rem;
   padding: 0.2rem 0.6rem;
@@ -410,20 +422,23 @@ tbody tr:hover {
   color: var(--text-muted);
 }
 
-.recipe-card-ingredients {
-  font-size: 0.85rem;
+.recipe-description {
   color: var(--text-muted);
+  font-size: 0.9rem;
+  margin: 0.25rem 0 0.5rem;
   line-height: 1.5;
 }
 
-.recipe-card-instructions {
-  font-size: 0.85rem;
+.recipe-card-title {
   color: var(--text);
-  line-height: 1.6;
-  border-top: 1px solid var(--border);
-  padding-top: 0.5rem;
-  margin-top: 0.25rem;
-  white-space: pre-line;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.05rem;
+}
+
+.recipe-card-title:hover {
+  color: var(--accent);
+  text-decoration: underline;
 }
 
 .recipe-card .btn {
@@ -454,7 +469,7 @@ tbody tr:hover {
 
 .grocery-item {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 1rem;
   padding: 0.75rem;
   background-color: rgba(255, 255, 255, 0.01);
@@ -943,6 +958,15 @@ tbody tr:hover {
   border-bottom-left-radius: 0.25rem;
 }
 
+.chat-bubble p { margin: 0 0 0.5rem; }
+.chat-bubble p:last-child { margin-bottom: 0; }
+.chat-bubble h3, .chat-bubble h4 { margin: 0.75rem 0 0.25rem; font-size: 0.95rem; }
+.chat-bubble ul { padding-left: 1.25rem; margin: 0.25rem 0; }
+.chat-bubble li { margin-bottom: 0.15rem; }
+.chat-bubble code { background: rgba(0,0,0,0.3); padding: 0.1rem 0.35rem; border-radius: 0.25rem; font-size: 0.85rem; font-family: monospace; }
+.chat-bubble pre { background: rgba(0,0,0,0.4); padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; margin: 0.5rem 0; }
+.chat-bubble pre code { background: none; padding: 0; font-size: 0.82rem; }
+
 .chat-typing-indicator {
   color: var(--text-muted);
   font-style: italic;