/* Ingredient icon chip — a pastel colored square framing the
 * transparent-PNG photo icon. See docs/specs/ingredient-icons.md v2
 * and ADR 0011. The shape (64x64, 14px radius, 9px inner pad,
 * inner drop-shadow) comes verbatim from the approved bake-off design;
 * 64/14/9 are off the --space-* and --radius-* token scales because
 * the chip is a fixed-optics component, not a rhythm value. Only the
 * padding: 9px declaration is in scope for the spacing guard; the
 * width / height / border-radius properties are outside the guard's
 * margin / padding / gap allowlist.
 *
 * Used on the recipe-detail surface today; reusable on recipe-card,
 * plan-peek, etc. as future surfaces wire it in — that is why this is
 * a leaf component file under components/, not appended to
 * recipe-detail.css.
 */
@layer components {
  .ing-chip {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .ing-chip img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14));
  }
}