/* The small chips a design is labelled with : its facet summary, its index gear, its refractive
   index and its length over width, and on a gallery card a second row with its shape and its
   material.

   They are written here rather than in the gallery's own stylesheet because two pages draw them now.
   The gallery draws them under a published design, and the "my submissions" page draws the same four
   under a design that has only just been measured, minutes before it is published. A second copy of
   these two rules would be restyled on one page and not the other the day anybody touched either.

   The rules below were moved out of gallery.css unchanged, comment included.

   The one screen-size rule that reaches them stays in responsive.css, which is this project's single
   home for media queries and is loaded last on every page. */

/* --- Gem badges --- */
.gem-badges {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 5px;
}
.gem-badge {
  background-color: #ccc;
  border-radius: 8px;
  padding: 2px 5px;
  font-size: 0.75rem;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* This flag was weighed and deliberately kept. It guards a colour, not a box : the chip's
     background is a fixed light grey in both themes, so its text has to stay dark whatever
     a theme rule says about it later, and no screen-size rule ever needs to reach a colour.
     Taking it out could only ever cost a colour and would buy nothing the widths above
     needed. */
  color: #000 !important;
}

/* The second chip row a gallery card draws : the design's outline and what it is cut from. These two
   are words where the four above are numbers, so each is allowed the width of half the card - the
   catalogue holds outlines like "Rectangle Cut Corner", which reads as nothing at all cut to a hundred
   pixels. Two chips at this width still fit the 300 pixel card without wrapping. */
.gem-badges.gem-identity-badges {
  margin-top: 4px;
}
.gem-badges.gem-identity-badges .gem-badge {
  max-width: 145px;
}