/* Star Rating edit control — pure CSS, theme-aware (--pp-* tokens). */
.pp-stars {
    display: inline-flex;
    flex-direction: row-reverse;   /* DOM is high→low; display low→high */
    align-items: center;
    gap: 2px;
    line-height: 1;
}
.pp-stars .pp-star-in,
.pp-stars .pp-star-clear-in {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;                    /* visually hidden but still focusable */
    overflow: hidden;
    pointer-events: none;
}
.pp-stars .pp-star {
    color: var(--pp-border, #cbd5e1);
    cursor: pointer;
    transition: color .12s ease, transform .08s ease;
    user-select: none;
}
.pp-stars.is-sm .pp-star { font-size: 1.15rem; }
.pp-stars.is-md .pp-star { font-size: 1.55rem; }
.pp-stars.is-lg .pp-star { font-size: 2.1rem; }

/* Selected star + all lower ones (they follow in the reversed source). */
.pp-stars .pp-star-in:checked ~ .pp-star {
    color: var(--pp-warning, #f59e0b);
}
/* While hovering the row, drop the checked highlight so hover can preview. */
.pp-stars:hover .pp-star-in:checked ~ .pp-star {
    color: var(--pp-border, #cbd5e1);
}
/* Hovered star + all lower ones win during hover. */
.pp-stars .pp-star:hover,
.pp-stars .pp-star:hover ~ .pp-star {
    color: var(--pp-warning, #f59e0b);
}
.pp-stars .pp-star:hover { transform: scale(1.12); }

/* Keyboard focus ring (radios are natively arrow-key navigable). */
.pp-stars .pp-star-in:focus-visible + .pp-star {
    outline: 2px solid var(--pp-accent, #4f46e5);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Optional clear (×) sits to the far left; excluded from the star highlight. */
.pp-stars .pp-star-clear {
    color: var(--pp-text-muted, #94a3b8);
    cursor: pointer;
    margin-inline-start: .45rem;
    font-size: 1.1rem;
    user-select: none;
}
.pp-stars .pp-star-clear:hover { color: var(--pp-danger, #dc2626); }
.pp-stars .pp-star-clear-in:focus-visible + .pp-star-clear {
    outline: 2px solid var(--pp-accent, #4f46e5);
    outline-offset: 2px; border-radius: 3px;
}
