/* CUIJustifiedTileGrid - mirrors motion/justified_tile_grid/cui_justified_tile_grid.dart (newer, column-based version).
   Rows of equal-width cells at an exact gap; column count = most that fit at the tiles' natural width, clamped to
   [minColumns, maxColumns]; tiles are laid out TIGHT at the cell width. Tiles are absolutely positioned by
   justified_tile_grid.js, which also runs the FLIP slide on reflow (320ms easeInOutCubic).
   The demo content is the real CUI.ingredientTile (customisation beta composition). */
.cui-jtg-demo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cui-space-xs); width: 100%; }
.cui-jtg-wrap { max-width: 100%; }
.cui-jtg { position: relative; width: 100%; }
.cui-jtg__tile { position: absolute; left: 0; top: 0; width: max-content; will-change: transform; }
.cui-jtg__tile.is-tight { width: auto; }                       /* JS sets an explicit px width (tight constraint) */
.cui-jtg__scale { display: block; transform-origin: 50% 50%; width: 100%; }
/* a tile handed a tight width fills it (its own width is only a preference) */
.cui-jtg__tile.is-tight .cui-jtg__scale > .cui-ingredient-tile { width: 100%; }
.cui-jtg-demo__reset { appearance: none; cursor: pointer; border: var(--cui-border-default) solid var(--cui-color-border-default);
  background: var(--cui-color-surface-bg-default); color: var(--cui-color-text-default); border-radius: var(--cui-radius-sm);
  padding: var(--cui-space-xs) var(--cui-space-sm); font-family: var(--cui-type-body-sm-semi-family); font-size: var(--cui-type-body-sm-semi-size);
  font-weight: var(--cui-type-body-sm-semi-weight); line-height: var(--cui-type-body-sm-semi-line); }
.cui-jtg-demo__hint { color: var(--cui-color-text-subtle); font-family: var(--cui-type-caption-family); font-size: var(--cui-type-caption-size); line-height: var(--cui-type-caption-line); }