/* rating.css — public 5-star rating widget (#223, parent epic #219)
 *
 * BEM blocks/elements/modifiers:
 *   .rating-widget
 *   .rating-widget--compact     small variant for list-view cards
 *   .rating-widget--empty       no votes yet → show "Be the first to rate"
 *   .rating-widget--has-vote    visitor has already rated this entity
 *   .rating-widget--submitting  in-flight POST → cursor + dim
 *   .rating-widget--error       brief flash after a failed POST
 *
 *   .rating-widget__stars       the 5-button star group
 *   .rating-widget__star        one button (default: outlined, low contrast)
 *   .rating-widget__star--filled one button in the active fill state
 *   .rating-widget__average     "4.2"
 *   .rating-widget__count       "(87)"
 *   .rating-widget__prompt      "Be the first to rate"
 *
 * Theme: matches the homepage terminal aesthetic — filled stars use the same
 * green (#dce775) as the visitorbadge.io footer counter.
 */

.rating-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

.rating-widget__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.rating-widget__star {
  appearance: none;
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.18);
  transition: color 0.12s ease, transform 0.08s ease, text-shadow 0.12s ease;
}

.rating-widget__star:hover,
.rating-widget__star:focus-visible {
  outline: none;
  transform: scale(1.08);
}

.rating-widget__star--filled {
  color: #dce775; /* terminal green — matches visitorbadge.io countColor */
  text-shadow: 0 0 6px rgba(220, 231, 117, 0.45);
}

.rating-widget__average {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-left: 4px;
}

.rating-widget__count {
  color: rgba(255, 255, 255, 0.45);
}

.rating-widget__prompt {
  display: none;
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 4px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */

.rating-widget--empty .rating-widget__average,
.rating-widget--empty .rating-widget__count {
  display: none;
}

.rating-widget--empty .rating-widget__prompt {
  display: inline;
}

/* ── In-flight + error states ────────────────────────────────────────────── */

.rating-widget--submitting .rating-widget__star {
  cursor: progress;
  opacity: 0.85;
}

.rating-widget--error .rating-widget__star--filled {
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255, 107, 107, 0.5);
}

/* ── Compact variant for list-view cards ─────────────────────────────────── */

.rating-widget--compact {
  font-size: 11px;
  gap: 4px;
}

.rating-widget--compact .rating-widget__star {
  font-size: 13px;
  padding: 1px;
}

.rating-widget--compact .rating-widget__average {
  margin-left: 2px;
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .rating-widget__star {
    transition: none;
  }
  .rating-widget__star:hover,
  .rating-widget__star:focus-visible {
    transform: none;
  }
}