Refine meal suggestions and planner entry controls

nouri/static/css/styles.css

@@ -89,7 +89,8 @@ textarea {
 }
 
 button,
-.button {
+.button,
+.ghost-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -937,6 +938,31 @@ legend {
     background: color-mix(in srgb, var(--surface) 88%, #fff 12%);
 }
 
+.planner-entry-edit {
+    margin-top: 0.85rem;
+}
+
+.planner-entry-edit > summary {
+    width: fit-content;
+    cursor: pointer;
+    list-style: none;
+}
+
+.planner-entry-edit > summary::-webkit-details-marker {
+    display: none;
+}
+
+.planner-entry-inline-form {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.8rem;
+    margin-top: 0.8rem;
+}
+
+.planner-entry-inline-form .wide {
+    grid-column: 1 / -1;
+}
+
 .template-card,
 .template-list-card,
 .suggestion-card {
@@ -952,6 +978,23 @@ legend {
     gap: 0.9rem;
 }
 
+.template-list-card-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.65rem;
+    align-items: center;
+}
+
+.template-list-card-actions form {
+    margin: 0;
+}
+
+.template-list-card .ghost-button,
+.template-list-card .button {
+    width: auto;
+    align-self: flex-start;
+}
+
 .week-template-row {
     padding: 1rem;
     border-radius: 18px;
@@ -1505,6 +1548,10 @@ legend {
         min-width: 100%;
     }
 
+    .planner-entry-inline-form {
+        grid-template-columns: 1fr;
+    }
+
     .mobile-nav-stack {
         position: fixed;
         left: 0.75rem;