@font-face { font-family: 'Roobert Mono'; font-weight: 500; src: url('../../fonts/RoobertMono-Medium.ttf') format('truetype'); }
/* CUITag - mirrors cui_tag.dart. Types: pill (missing, cookedCt, optional, qty), vertical banner (xDays, important, rating), swap.
   Code-sm label, centred. Pill radius = radius-md; banners and swap are square. */
.cui-tag { -webkit-font-smoothing: auto; --_bg: var(--cui-color-surface-bg-disabled); --_fg: var(--cui-color-text-subtle);
  box-sizing: border-box; background: var(--_bg); color: var(--_fg);
  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: 0; line-height: round(nearest, var(--cui-type-code-sm-line), 1px); }
.cui-tag__content { display: flex; align-items: center; justify-content: center; text-align: start; }
.cui-tag__content .cui-icon { width: var(--cui-size-icon-sm); height: var(--cui-size-icon-sm); font-size: var(--cui-size-icon-sm); margin-right: var(--cui-space-xs); }
.cui-tag__label { transform: translateY(.5px); min-width: 0; overflow-wrap: anywhere; }

/* colours per type */
.cui-tag--missing   { --_bg: var(--cui-color-surface-bg-danger-muted);  --_fg: var(--cui-color-text-danger); }
.cui-tag--cooked-ct { --_bg: var(--cui-color-surface-bg-success-muted); --_fg: var(--cui-color-text-success); }
.cui-tag--optional  { --_bg: var(--cui-color-surface-bg-disabled);      --_fg: var(--cui-color-text-subtle); }
.cui-tag--qty       { --_bg: var(--cui-color-surface-bg-warning-muted); --_fg: var(--cui-color-text-warning); }
.cui-tag--x-days    { --_bg: var(--cui-color-surface-bg-disabled);      --_fg: var(--cui-color-text-subtle); }
.cui-tag--important { --_bg: var(--cui-color-surface-bg-danger-subtle); --_fg: var(--cui-color-text-danger); }
.cui-tag--rating    { --_bg: var(--cui-color-surface-bg-warning-subtle); --_fg: var(--cui-color-text-warning); }
.cui-tag--swap      { --_bg: var(--cui-color-surface-bg-disabled);      --_fg: var(--cui-color-text-subtle); }

/* pill: padding top 2 / bottom 4 / sides 8 */
.cui-tag--pill { display: inline-block; vertical-align: top; max-width: 100%; border-radius: var(--cui-radius-md);
  padding: var(--cui-space-3xs) var(--cui-space-xs) var(--cui-space-2xs); }
/* vertical banner: full width, square */
.cui-tag--banner { display: block; width: 100%; }
.cui-tag--banner-lg { padding: var(--cui-space-xs) var(--cui-space-2xs) var(--cui-space-md); }
.cui-tag--banner-sm { padding: var(--cui-space-2xs); }
/* swap: 90% opacity (Opacity 0.9), fills the width like the Dart Center, 4px all round, square */
.cui-tag--swap-layout { display: block; width: 100%; opacity: .9; padding: var(--cui-space-2xs); }