/* The four small chips a design is labelled with : its facet summary, its index gear, its refractive
   index and its length over width.

   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;
}