/* Recipe tables use empty headers (|  |  |) so the table reads as two aligned
   columns with no header row. Group names come from `Table: Name` syntax
   (markdown-it-table-captions) and render as <caption>. recipes.js prepends
   a checkbox cell to each row so items can be ticked off while shopping or
   cooking. State is intentionally transient — a reload clears it. */

thead:not(:has(th:not(:empty))) {
  display: none;
}

thead:not(:has(th:not(:empty))) + tbody td {
  padding: 0.25rem 0.5rem;
}

caption {
  text-align: left;
  font-weight: bold;
  padding-bottom: 0.25rem;
}

td.recipe-check {
  width: 2rem;
  padding-right: 0;
}

td.recipe-check input {
  margin: 0;
  vertical-align: middle;
  box-shadow: none;
  outline: none;
}

td.recipe-check input:focus:not(:checked) {
  border-color: var(--pico-form-element-border-color);
}

td.recipe-check + td {
  width: 6rem;
  color: var(--pico-muted-color);
}

tr:has(.recipe-check input:checked) td:not(.recipe-check),
caption.all-checked {
  text-decoration: line-through;
  opacity: 0.5;
}