Clarify meal editing and selected ingredients

nouri/static/css/styles.css

@@ -653,6 +653,58 @@ h3 {
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
 }
 
+.selected-component-stack {
+    display: grid;
+    gap: 0.7rem;
+    margin: 0 0 1rem;
+}
+
+.selected-components-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.75rem;
+}
+
+.selected-component-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.85rem;
+    padding: 0.9rem 1rem;
+    border-radius: 18px;
+    border: 1px solid var(--line);
+    background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface-strong) 82%);
+}
+
+.selected-component-main {
+    display: grid;
+    gap: 0.2rem;
+    min-width: 0;
+}
+
+.selected-component-main strong,
+.selected-component-main small {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+.selected-component-main small {
+    color: var(--muted);
+}
+
+.selected-component-remove {
+    white-space: nowrap;
+}
+
+[data-theme="dark"] .selected-component-card {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-soft) 82%, #4d413d 18%),
+        color-mix(in srgb, var(--surface) 96%, #2c2523 4%)
+    );
+    border-color: color-mix(in srgb, rgba(243, 177, 125, 0.36) 48%, var(--line) 52%);
+}
+
 .quick-food-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));