meal eaten checkbox

static/style.css

@@ -259,7 +259,11 @@ textarea:focus { border-color: var(--deep-sage); box-shadow: 0 0 0 4px rgba(85,
 .list-meals { display: grid; gap: 8px; }
 .list-meal-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #edf0e6; }
 .list-meal-row:last-child { border-bottom: 0; }
+.list-meal-check { margin: 0; flex: 0 0 auto; }
+.list-meal-check .check-button { width: 26px; height: 26px; }
+.is-checked .list-meal-name { color: var(--muted); text-decoration: line-through; }
 .list-meal-icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; color: var(--deep-sage); background: #eef4e9; font-size: .95rem; }
+.is-checked .list-meal-icon { filter: grayscale(.4); opacity: .7; }
 .list-meal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
 .list-meal-remove { margin: 0; flex: 0 0 auto; }
 .list-meal-remove-button { padding: 2px 7px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: .8rem; line-height: 1; }