.recipe-list {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

.recipe-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
}

.recipe-list__title {
  text-decoration: none;
  font-size: var(--font-size-l);
}

.recipe-list__item .tag-list {
  gap: 0.3em;
}

.recipe-search {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
  margin-block-end: var(--block-space);
}

.recipe-search__input {
  flex: 1;
  max-inline-size: 20rem;
}

.pagination {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--block-space);
  font-size: var(--font-size-s);
  color: var(--color-ink-muted);
}

.recipe-list__pdf {
  margin-inline-start: auto;
  font-size: var(--font-size-m);
  color: var(--color-ink-muted);

  &:hover {
    color: var(--color-ink);
  }
}

.recipe-list__empty {
  color: var(--color-ink-muted);
}

.recipe {
  display: flex;
  flex-direction: column;
  gap: calc(var(--block-space) * 1.5);
}

.recipe__hero {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.recipe__header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25em;
}

.recipe__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--block-space) * 1.5);

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
  }
}

.recipe-servings,
.recipe-timing,
.recipe-nutrition {
  font-size: var(--font-size-s);
  color: var(--color-ink-muted);
  margin-block-end: var(--block-space);
}

.ingredient-section,
.instruction-section {
  margin-block-end: var(--block-space);
}

.ingredient-section__title,
.instruction-section__title {
  font-size: inherit;
  font-weight: 700;
  margin-block-end: 0.5em;
}

.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.ingredient-list__amount {
  font-weight: 700;
}

.ingredient-list__optional {
  color: var(--color-ink-muted);
  font-size: var(--font-size-s);
}

.instruction-list {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
}

.recipe__actions {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
}

.cooking-log {
  font-size: var(--font-size-s);
  color: var(--color-ink-muted);
}

.cooking-log__form {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
  margin-block-end: 0.5em;
}

.cooking-log__list {
  margin-block-start: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.cooking-log__list li {
  display: flex;
  gap: var(--inline-space);
  align-items: center;
}

.recipe-form fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--block-space);
  margin-block-end: var(--block-space);
}

.recipe-form legend {
  font-weight: 700;
  padding-inline: 0.3em;
}

.field-row {
  display: flex;
  gap: var(--inline-space);
  align-items: baseline;
  margin-block-end: 0.5em;
}

.field-row > * {
  flex: 1;
}

.field-row__section {
  flex: 0 0 8rem;
}

.field-row__quantity,
.field-row__unit {
  flex: 0 0 6rem;
}

.field-row__optional,
.field-row__remove {
  flex: 0 0 auto;
}

.source-text {
  margin-block-end: var(--block-space);
  color: var(--color-ink-muted);
}

.source-text summary {
  cursor: pointer;
  font-size: var(--font-size-s);
}

.source-text pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: var(--font-size-s);
  max-block-size: 16lh;
  overflow-y: auto;
  margin-block-start: var(--block-space);
  padding: var(--block-space);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}