/* CUITabBar - mirrors cui_tab_bar.dart: a category rail item (artwork above a label). Selected grows bold with a brand underline.
   Item is 80px wide (image.md), min 48 tap target. Transition 200ms easeInOut. Error replaces artwork with an alert badge. */
.cui-tab-bar {
  --_dur: calc(200ms / var(--cui-speed, 1)); --_ease: cubic-bezier(0.42, 0, 0.58, 1);
  --_pt: var(--cui-space-sm); --_pb: var(--cui-space-sm); --_icon: var(--cui-img-xs2);
  --_fg: var(--cui-color-text-muted); --_ul: 0;
  appearance: none; background: none; border: 0; margin: 0; font: inherit; cursor: pointer; color: var(--_fg);
  display: flex; flex-direction: column; align-items: center; flex: none;
  width: var(--cui-img-md); min-width: var(--cui-size-tab-min-width); min-height: 48px; box-sizing: border-box;
  padding: var(--_pt) 0 var(--_pb); -webkit-tap-highlight-color: transparent;
  transition: padding var(--_dur) var(--_ease);
}
.cui-tab-bar--selected { --_pt: var(--cui-space-xs); --_icon: var(--cui-img-xs3); --_fg: var(--cui-color-text-default); --_ul: 1; }
.cui-tab-bar:focus-visible, .cui-tab-bar.is-focused { outline: var(--cui-border-thick) solid var(--cui-color-border-focus); outline-offset: -2px; border-radius: var(--cui-radius-sm); }

.cui-tab-bar__icon { width: var(--_icon); height: var(--_icon); flex: none; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--_icon) * 0.75); line-height: 1; transition: width var(--_dur) var(--_ease), height var(--_dur) var(--_ease), font-size var(--_dur) var(--_ease); }
.cui-tab-bar__icon .cui-icon { width: 100%; height: 100%; }
.cui-tab-bar__label { margin-top: var(--cui-space-2xs); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--cui-type-caption-md-family); font-size: var(--cui-type-caption-md-size); font-weight: var(--cui-type-caption-md-weight);
  letter-spacing: var(--cui-type-caption-md-spacing); line-height: var(--cui-type-caption-md-line);
  transition: color var(--_dur) var(--_ease), font-size var(--_dur) var(--_ease), line-height var(--_dur) var(--_ease); }
.cui-tab-bar--selected .cui-tab-bar__label { 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: var(--cui-type-body-sm-semi-line); }

/* underline: box grows 0 -> (xs + thick), a 56x2 bar sits at its bottom, fades in */
.cui-tab-bar__underline { align-self: stretch; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  height: calc(var(--_ul) * (var(--cui-space-xs) + var(--cui-border-thick))); opacity: var(--_ul);
  transition: height var(--_dur) var(--_ease), opacity var(--_dur) var(--_ease); }
.cui-tab-bar__underline::after { content: ''; width: var(--cui-img-sm-modify-tile-image); height: var(--cui-border-thick); flex: none;
  background: var(--cui-color-border-brand); }

/* error badge replaces the artwork */
.cui-tab-bar__badge { box-sizing: border-box; width: 100%; height: 100%; padding: var(--cui-space-3xs); display: flex; align-items: center; justify-content: center;
  background: var(--cui-color-surface-bg-default); border-radius: var(--cui-radius-pill); color: var(--cui-color-icon-danger);
  font-family: var(--cui-type-body-sm-family); font-size: var(--cui-type-body-sm-size); font-weight: 600; line-height: 1;
  box-shadow: 4px 7px 3px rgba(0,0,0,.012), 2px 4px 3px rgba(0,0,0,.04), 1px 2px 2px rgba(0,0,0,.07), 0 0 1px rgba(0,0,0,.08); }

.cui-tab-bar-rail { display: flex; align-items: center; }