.rating {
    --rating-size: 1.75rem;
    --rating-gap: .15rem;
    --rating-empty: #d0d7de;
    --rating-full: #ffb400;
    --rating-hover: #ffd066;
    --rating-clear: #9aa2a9;
    --rating-clear-hover: #c43d3d;
    --rating-focus: rgba(0, 123, 255, .5);

    display: inline-flex;
    align-items: center;
    gap: 0; /*var(--rating-gap);*/
    flex-direction: row; /* so lowest star appears first (left-to-right ascending) */
    user-select: none;
}

/* Hide radios but keep them accessible */
.rating > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(50%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

/* Stars */
.rating > label.star {
    font-size: var(--rating-size);
    line-height: 1;
    padding: 0 var(--rating-gap);
    color: var(--rating-empty);
    cursor: pointer;
    transition: color .12s ease-in-out, transform .05s ease-in-out;
}

/* Hover preview: hovered star + all lower stars */
.rating > label.star:hover,
.rating > label.star:has(~ label.star:hover) {
    /*.rating > label.star:hover ~ label.star {*/
    color: var(--rating-hover);
}

/* Selected (when not hovering) */
/*.rating:not(:hover) > input:checked ~ label.star {*/
.rating:not(:hover) > input:checked + label.star,
.rating:not(:hover) > label.star:has(~ input:checked) {
    color: var(--rating-full);
}

/* Keyboard focus on the active radio highlights its star */
.rating > input:focus + label.star {
    outline: 2px solid var(--rating-focus);
    outline-offset: 2px;
    border-radius: .2rem;
}

/* Clear button (X) */
.rating > label.clear {
    font-size: calc(var(--rating-size) * 0.9);
    line-height: 1;
    color: var(--rating-clear);
    cursor: pointer;
    opacity: .9;
    margin-inline-start: .15rem;
    transition: color .12s ease-in-out, opacity .12s;
}

.rating > label.clear:hover {
    color: var(--rating-clear-hover);
    opacity: 1;
}

/* Disabled state */
.rating.rating--disabled > label {
    cursor: default;
    pointer-events: none;
    opacity: .8;
}