feat: synchronize recipe completion controls

Fixes #5\nRefs #1, #2

control/styles.css

@@ -102,6 +102,30 @@ button {
 
 .recipe strong { font-size: 1.12rem; }
 
+.active-recipe {
+  margin: 1.5rem 0;
+  padding: 1rem;
+  border: 1px solid #d8c9ad;
+  border-radius: 8px;
+  background: #fffdf8;
+}
+
+.active-recipe h2,
+.active-recipe h3 { margin-top: 0; }
+
+.checklist {
+  display: grid;
+  gap: .7rem;
+  padding-left: 1.4rem;
+}
+
+.checklist li { padding-left: .2rem; }
+.checklist label { display: flex; gap: .6rem; align-items: flex-start; }
+.checklist input { margin-top: .25rem; min-width: 1.1rem; min-height: 1.1rem; }
+.checklist .completed { color: #777; text-decoration: line-through; }
+.checklist .quantity-warning { color: #876500; }
+.checklist .quantity-error { color: #a2342b; }
+
 .recipe span {
   display: -webkit-box;
   overflow: hidden;