/* Servings (2026-10-19), on both pages: the recipe pop-up's "Servings"
   stepper above Ingredients, and the "Serves" box in the recipe forms.
   The stepper itself is the shared .stepper (recipe-form.css). */

/* Servings changer: "Servings" (small semibold heading) over a stepper */
.servings-changer{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
.modal-body .servings-changer h3{ margin:0; font:var(--type-body-semibold); }
.stepper.servings{ width:74px; }
@media (pointer:coarse){ .stepper.servings{ width:84px; } }
.servings-num{ flex:1; font:var(--type-body); font-variant-numeric:tabular-nums; }
.servings-note{
  margin:0;
  font:var(--type-support);
  color:var(--text-secondary);
}

/* "Serves" in Edit recipe, Manually enter and the link check screen. It
   sits alone in a wrapper, so it keeps its gap to the next field itself. */
.cm-field.serves-field{ margin-bottom:var(--space-16); }
.serves-field input{
  width:120px;
  height:var(--size-control-form);
  padding:0 var(--space-12);
  border:1px solid var(--border-default);
  border-radius:var(--radius-control);
  font:var(--type-body);
  color:var(--text-primary);
  background:var(--surface-panel);
}
.serves-field input:hover{ border-color:var(--border-default); }
.serves-field input:focus{ outline:none; border-color:var(--text-secondary); }
.serves-field input::placeholder{ font:var(--type-support); color:var(--text-secondary); }
/* On the link check screen it sits above the tags, under the same line. */
.cm-review-serves{ padding:0 var(--space-24); }
.cm-review-serves:not(:empty){ padding-top:var(--space-16); border-top:1px solid var(--border-default); margin:0 var(--space-24); padding-left:0; padding-right:0; }
.cm-review-serves:not(:empty) + .cm-review-tags .tag-fields{ border-top:none; padding-top:0; }