/* Five native radio inputs, with stars instead of framed numeric choices. */
.rating-picker{gap:2px;max-width:100%}
.rating-picker legend{margin-bottom:5px}
.rating-picker .rating-choice{flex:0 0 44px;width:44px;height:44px}
.rating-picker .rating-choice>span,.rating-picker .rating-choice input:checked+span{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;padding:4px;border:0;border-radius:0;background:none;color:#9c9a94;font-size:0}
.rating-picker .rating-choice svg{width:34px;height:34px;overflow:visible;fill:transparent;stroke:currentColor;stroke-width:1.35;stroke-linejoin:round;transition:color .12s ease,fill .12s ease}
.rating-picker .rating-choice:has(input:checked)>span,.rating-picker .rating-choice:has(~ .rating-choice input:checked)>span{color:var(--accent)}
.rating-picker .rating-choice:has(input:checked) svg,.rating-picker .rating-choice:has(~ .rating-choice input:checked) svg{fill:currentColor}
.rating-picker .rating-choice input:focus-visible+span{outline:none;text-decoration:none}
.rating-picker .rating-choice input:focus-visible+span svg{outline:2px dotted var(--accent);outline-offset:3px;border-radius:50%}
@media(hover:hover){
 .rating-picker:has(.rating-choice:hover) .rating-choice>span{color:#9c9a94}
 .rating-picker:has(.rating-choice:hover) .rating-choice svg{fill:transparent}
 .rating-picker:has(.rating-choice:hover) .rating-choice:is(:hover,:has(~ .rating-choice:hover))>span{color:var(--accent)}
 .rating-picker:has(.rating-choice:hover) .rating-choice:is(:hover,:has(~ .rating-choice:hover)) svg{fill:currentColor}
}
@media(prefers-reduced-motion:reduce){.rating-picker .rating-choice svg{transition:none}}