[data-fui-comp="ui-rating"] {
  --ui-rating-glyph: 24px;
  --ui-rating-cell: var(--spacing-touch-target, 44px);
  --ui-rating-color: var(--color-warning, #F59E0B);
  display: inline-flex;
  /* Flex-direction:row-reverse turns our reverse-DOM order back
     into 1..N visual order, while keeping the ~ sibling cascade. */
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}
[data-fui-comp="ui-rating"] .ui-rating__input {
  /* Visually hidden; clicking the label activates the input. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0,0,0,0);
  overflow: hidden;
  white-space: nowrap;
}
[data-fui-comp="ui-rating"] .ui-rating__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Block axis stays at the AAA touch-target floor; inline axis is
     driven by --ui-rating-cell which Gap variants can shrink for
     tighter density. */
  min-block-size: var(--spacing-touch-target, 44px);
  min-inline-size: var(--ui-rating-cell);
  color: var(--color-border, #E4E4E7);
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}
/* Glyph (svg) size is driven by a custom property so size variants
   only have to override the property, not duplicate the rule. */
[data-fui-comp="ui-rating"] .ui-rating__star svg {
  width: var(--ui-rating-glyph, 24px);
  height: var(--ui-rating-glyph, 24px);
}
[data-fui-comp="ui-rating"].ui-rating--small { --ui-rating-glyph: 16px; }
[data-fui-comp="ui-rating"].ui-rating--large { --ui-rating-glyph: 32px; }

/* Gap presets — independent of Size.
   Default keeps the WCAG 2.5.5 AAA tap-target floor (44×44 per star).
   Tight shrinks the inline tap zone to glyph+8px so adjacent glyphs
   actually touch — the block axis stays 44px and the inline zone
   stays ≥24px (WCAG 2.5.8 AA), but AAA is intentionally relaxed for
   dense inline ratings. */
[data-fui-comp="ui-rating"].ui-rating--gap-tight {
  --ui-rating-cell: max(24px, calc(var(--ui-rating-glyph) + 8px));
  gap: 0;
}
[data-fui-comp="ui-rating"].ui-rating--gap-loose { gap: 8px; }
[data-fui-comp="ui-rating"].ui-rating--gap-wide { gap: 20px; }
[data-fui-comp="ui-rating"] .ui-rating__star:hover {
  transform: scale(1.08);
}
[data-fui-comp="ui-rating"] .ui-rating__input:focus-visible + .ui-rating__star {
  outline: 2px solid var(--color-primary, #4F46E5);
  outline-offset: 2px;
  border-radius: var(--radii-sm, 4px);
}

/* Highlight: the checked input + every later (in DOM = earlier-in-
   reverse-order = smaller-value) sibling label lights up. Color is
   driven by --ui-rating-color so per-shape variants and per-instance
   overrides can recolor without writing new highlight rules. */
[data-fui-comp="ui-rating"] .ui-rating__input:checked ~ .ui-rating__star,
[data-fui-comp="ui-rating"]:not(.is-disabled) .ui-rating__star:hover,
[data-fui-comp="ui-rating"]:not(.is-disabled) .ui-rating__star:hover ~ .ui-rating__star {
  color: var(--ui-rating-color);
}

/* Per-shape color overrides — heart / fire feel red, thumb feels
   primary, diamond feels info. Star (default) and circle / square
   stay on the warning yellow. */
.ui-rating--heart   { --ui-rating-color: var(--color-danger, #DC2626); }
.ui-rating--fire    { --ui-rating-color: var(--color-danger, #DC2626); }
.ui-rating--thumb   { --ui-rating-color: var(--color-primary, #4F46E5); }
.ui-rating--diamond { --ui-rating-color: var(--color-info, #3B82F6); }

[data-fui-comp="ui-rating"].is-disabled .ui-rating__star {
  cursor: not-allowed;
  opacity: 0.6;
}