/* The recipe pop-up's content (System v2 "Recipe pop-up"), on both pages:
   the photo, the name (Fraunces semibold) and its tags, the details between
   two lines, Servings, Ingredients and Directions, 16px apart. Built by
   recipeDetailHtml in js/core.js; also used by the desktop hover preview.
   The box around it (size, corners, close button, footer) belongs to each
   page. */
.modal-img{
  width:100%;
  height:220px;
  object-fit:cover;
  background:var(--border-default);
}
/* Recipe pop-up: the name (Fraunces semibold) and its tags, the details
   between two lines, Servings, Ingredients, Directions; 16px apart */
.modal-body{
  display:flex;
  flex-direction:column;
  gap:var(--space-16);
  padding:var(--space-24) var(--space-16);
}
.recipe-head{ display:flex; flex-direction:column; gap:var(--space-8); }
.modal-body h2{
  margin:0;
  font:var(--type-heading-large-semibold);
  font-variation-settings:var(--fraunces-axes);
}
.modal-body .modal-title{ margin:0; }
.recipe-tags{ margin:0; font:var(--type-body); color:var(--text-secondary); }
.modal-meta{
  display:flex;
  flex-direction:column;
  gap:var(--space-8);
  padding:var(--space-16) 0;
  border-top:1px solid var(--border-default);
  border-bottom:1px solid var(--border-default);
  font:var(--type-support);
  color:var(--text-secondary);
}
.modal-meta span b{ font-weight:400; color:var(--text-primary); margin-right:var(--space-4); }
.goes-with{ margin:0; }
.recipe-part{ display:flex; flex-direction:column; gap:var(--space-4); }
.modal-body h3{
  margin:0;
  font:var(--type-body-semibold);
  color:var(--text-primary);
}
.modal-body ul, .modal-body ol{
  margin:0;
  padding-left:var(--space-20);
  font:var(--type-body);
}
.modal-body li{ margin-bottom:var(--space-4); }
.modal-body .no-ingredients{ margin:0; }
.modal-source{
  display:inline-flex;
  align-items:center;
  gap:var(--space-4);
  align-self:flex-start;
  font:var(--type-support);
  color:var(--text-primary);
}
.modal-source .icon{ width:12px; height:12px; }