/* CUIIngredientTile (misc/) - mirrors the current cui_ingredient_tile.dart. Variants: remove_swap | add_ingredient | only_swap | invalid_swap |
   shimmering_loading | add_more | show_all | default_micro | modified_micro.
   Preferred width = card (56 photo + 2 * (space-sm + border)) + the action pill's right overhang (iconLg / 4) for pill-bearing variants.
   Like the Dart SizedBox, that width yields to the parent: add `is-fill` (props.fill) and the tile takes the cell width, the square card grows with it.
   Visual block, then a 3-line label, then an optional tag row. */
.cui-ingredient-tile { --_card: calc(var(--cui-img-sm-modify-tile-image) + 2 * (var(--cui-space-sm) + var(--cui-border-default)));
  --_pill: var(--cui-size-icon-lg); --_over: calc(var(--cui-size-icon-lg) / 4); --_head: calc(var(--cui-size-icon-lg) / 2); --_w: var(--_card);
  box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; width: var(--_w); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cui-ingredient-tile.has-pill, .cui-ingredient-tile.is-loading { --_w: calc(var(--_card) + var(--_over)); }
.cui-ingredient-tile.is-fill { width: 100%; }
.cui-ingredient-tile.is-loading { cursor: default; }
.cui-ingredient-tile__visual { position: relative; box-sizing: border-box; width: 100%; padding-top: var(--_head); flex: none; }
.cui-ingredient-tile__visual.has-over { padding-right: var(--_over); }
.cui-ingredient-tile__label { margin: var(--cui-space-xs) 0 0; width: 100%; color: var(--cui-color-text-default); overflow-wrap: anywhere;
  max-height: calc(3 * var(--cui-type-body-sm-semi-line)); overflow: hidden;
  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);
  letter-spacing: var(--cui-type-body-sm-semi-spacing); line-height: round(var(--cui-type-body-sm-semi-line), 1px); }
.cui-ingredient-tile__tags { display: flex; margin-top: var(--cui-space-2xs); max-width: 100%; }
.cui-ingredient-tile__title-tag { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; }

/* action pill: fixed iconLg circle, 16px glyph, 5/24 down from the stack top, flush with the trailing edge */
.cui-ingredient-tile__pill, .cui-ingredient-tile__pill-empty { box-sizing: border-box; position: absolute; top: calc(var(--_pill) * 5 / 24 + 0px); right: 0;
  width: var(--_pill); height: var(--_pill); border-radius: var(--cui-radius-pill); background: var(--cui-color-surface-bg-default); box-shadow: var(--cui-shadow-icon);
  display: flex; align-items: center; justify-content: center; padding: 0; }
.cui-ingredient-tile__pill { appearance: none; border: 0; margin: 0; cursor: pointer; outline: none; color: var(--cui-color-icon-default); }
.cui-ingredient-tile__pill:focus-visible { box-shadow: var(--cui-shadow-icon), 0 0 0 2px var(--cui-color-border-focus); }
.cui-ingredient-tile__pill .cui-icon { width: var(--cui-size-icon-sm); height: var(--cui-size-icon-sm); font-size: var(--cui-size-icon-sm); }
.cui-ingredient-tile__visual > .cui-image-card--fill { display: block; }

/* invalid: dashed danger outline (4 on / 3 off) stroked on the card edge, like the Dart painter */
.cui-ingredient-tile__invalid { position: relative; box-sizing: border-box; width: 100%; padding: calc(var(--cui-space-sm) + var(--cui-border-default));
  background: var(--cui-color-surface-bg-sunken); border-radius: var(--cui-radius-lg); }
.cui-ingredient-tile__invalid-img { width: 100%; aspect-ratio: 1; overflow: hidden; }
.cui-ingredient-tile__dash { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cui-ingredient-tile__dash rect { x: 0; y: 0; width: 100%; height: 100%; rx: var(--cui-radius-lg); fill: none;
  stroke: var(--cui-color-border-danger); stroke-width: var(--cui-border-default); stroke-dasharray: 4 3; }

/* shimmer: the design-provided animated WebP over the disabled base colour */
.cui-ingredient-tile__shimmer { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--cui-radius-lg);
  background: var(--cui-color-surface-bg-disabled) url('bg_shimmer.webp') center / cover no-repeat; }

/* show all / legacy add more: plain circle */
.cui-ingredient-tile__circle { box-sizing: border-box; display: grid; place-items: center; width: 100%; aspect-ratio: 1;
  border-radius: 50%; background: var(--cui-color-surface-bg-sunken); }
.cui-ingredient-tile__previews { display: flex; height: var(--cui-img-xs2); }
.cui-ingredient-tile__preview { width: var(--cui-img-xs2); height: var(--cui-img-xs2); border-radius: 50%; overflow: hidden; flex: none; background: var(--cui-color-surface-bg-disabled); }
.cui-ingredient-tile__preview + .cui-ingredient-tile__preview { margin-left: var(--cui-space-neg-sm); }
.cui-ingredient-tile__center-icon { display: flex; width: var(--cui-size-icon-lg); height: var(--cui-size-icon-lg); color: var(--cui-color-icon-default); }
.cui-ingredient-tile__center-icon .cui-icon { width: 100%; height: 100%; font-size: var(--cui-size-icon-lg); }

/* add more collage: 3 thumbs + plus in a 2x2 grid (24px, gutter 8) on a bordered sunken card; the border overlays, it does not add size */
.cui-ingredient-tile__collage { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1;
  background: var(--cui-color-surface-bg-sunken); border-radius: var(--cui-radius-lg);
  box-shadow: inset 0 0 0 var(--cui-border-default) var(--cui-color-border-subtle); }
.cui-ingredient-tile__collage-grid { display: grid; grid-template-columns: 24px 24px; grid-auto-rows: 24px; gap: 8px; }
.cui-ingredient-tile__thumb { width: 24px; height: 24px; border-radius: var(--cui-radius-xs); overflow: hidden; background: var(--cui-color-surface-bg-disabled); }
.cui-ingredient-tile__plus { width: 24px; height: 24px; color: var(--cui-color-icon-default); display: block; }

/* modified micro: 4-segment indicator + MODIFY label */
.cui-ingredient-tile__modify { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cui-space-2xs); max-width: 100%; }
.cui-ingredient-tile__segments { display: flex; gap: 1px; }
.cui-ingredient-tile__seg { width: calc((46px - 3px) / 4); height: 4px; background: #D9D9D9; }
.cui-ingredient-tile__seg.is-filled { background: var(--cui-color-surface-bg-brand); }
.cui-ingredient-tile__seg:first-child { border-radius: var(--cui-radius-pill) 0 0 var(--cui-radius-pill); }
.cui-ingredient-tile__seg:last-child { border-radius: 0 var(--cui-radius-pill) var(--cui-radius-pill) 0; }
.cui-ingredient-tile__modify-label { display: flex; align-items: center; gap: var(--cui-space-2xs); min-width: 0; color: var(--cui-color-text-subtle);
  font-family: var(--cui-type-code-sm-family); font-size: var(--cui-type-code-sm-size); font-weight: var(--cui-type-code-sm-weight);
  letter-spacing: var(--cui-type-code-sm-spacing); line-height: round(var(--cui-type-code-sm-line), 1px); }
.cui-ingredient-tile__modify-label > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cui-ingredient-tile__modify-label .cui-icon { width: var(--cui-size-icon-sm); height: var(--cui-size-icon-sm); font-size: var(--cui-size-icon-sm); color: var(--cui-color-icon-default); }