.lesson-rating { max-width: 24rem; }
.lesson-rating-segments { display: flex; gap: 0.25rem; margin: 0.5rem 0; }
.lesson-rating-segment { flex: 1; position: relative; cursor: pointer; }
.lesson-rating-segment input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.lesson-rating-segment span { display: block; text-align: center; border: 1px solid #64748b; border-radius: 0.25rem; background: white; color: #334155; padding: 0.5rem; }
.lesson-rating-segment:has(input:checked) span,
.lesson-rating-segment:has(~ .lesson-rating-segment input:checked) span { background: #4338ca; color: white; }
.lesson-rating-segment:has(input:focus-visible) span { outline: 3px solid #4338ca; outline-offset: 2px; }
.lesson-rating fieldset:disabled { opacity: 0.6; }

.lesson-rating-controls { display: flex; align-items: center; gap: 0.5rem; }
.lesson-rating-controls fieldset { flex: 1; min-width: 0; }
.lesson-rating-feedback { flex: 0 0 1.5rem; }
.lesson-rating-success { color: #047857; }
.lesson-rating-saving { color: #4338ca; }
.lesson-rating-saving svg { animation: lesson-rating-spin 1s linear infinite; }
.lesson-rating-retry { display: block; padding: 0; border: 0; background: none; color: #b91c1c; cursor: pointer; }
.lesson-rating-retry[hidden] { display: none; }
.lesson-rating-retry:focus-visible { outline: 2px solid #b91c1c; outline-offset: 3px; border-radius: 50%; }
@keyframes lesson-rating-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lesson-rating-saving svg { animation: none; }
}