/* rating-input — @tokens: --rating-input-size, --rating-input-gap

   The accessible, keyboard-operable, form-submittable star-rating INPUT — a
   radio group styled as a row of stars. Sibling to the read-only `.hzo-rating`
   (static display stars); this is the WRITE version, so it lives on its own root
   with its own tokens (do NOT borrow `.hzo-rating`'s).

   Intended markup (the coordinator wires this into the kitchen-sink): five
   <input type="radio" name="…"> each immediately followed by its <label> star,
   emitted in DESCENDING value order (5→1). The container reverses them so DOM
   5→1 renders visually 1→5 left-to-right, which is what lets the pure-CSS sibling
   combinator fill a star + everything to its visual left:

     <span class="hzo-rating-input">
       <input type="radio" id="r5" name="demo-rating" value="5" class="hzo-rating-input__radio">
       <label for="r5" class="hzo-rating-input__star" aria-label="5 stars"><svg…/></label>
       …r4, r3, r2, r1…   (DESCENDING — 5 first, 1 last)
     </span>

   FILL DIRECTION (the fiddly part — verified): with row-reverse a later DOM
   sibling paints to the LEFT. A checked/hovered star at value N has later DOM
   siblings N-1…1, which render visually leftward = the lower values. So
   `:checked ~ __star` (plus the checked radio's own adjacent `+` label) fills
   value N and everything below it — the star + its leftward run. `:hover, :hover
   ~ __star` gives the same leftward preview run. This is exactly the star-rating
   convention (select 4 → stars 1–4 lit).

   Token-only: the star box has no semantic dimension token in the scale, so it's
   a component token with a literal fallback — the same dial pattern
   icon-button.css uses (`var(--icon-button-size, 40px)`). Empty stars read
   `--border`; filled stars read `--accent` (the engine's interactive brand-accent
   highlight; the display `.hzo-rating` uses `--warning` amber, but this control
   aligns to the accent). Everything else reads a semantic/L1 token. */
.hzo-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;   /* DOM 5→1 renders visually 1→5 */
    justify-content: flex-end;
    align-items: center;
    gap: var(--rating-input-gap, var(--space-2xs));
}

/* Radio — visually hidden but still focusable & form-submittable (sr-only). Never
   display:none — that removes it from the tab order and the submitted form. */
.hzo-rating-input__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    opacity: 0;
}

/* Star — the clickable <label> for its radio. Empty = --border. */
.hzo-rating-input__star {
    width: var(--rating-input-size, 28px);
    height: var(--rating-input-size, 28px);
    color: var(--border);
    cursor: pointer;
    transition: color var(--transition-base) ease;
}
.hzo-rating-input__star > svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Fill — a checked star and every star to its visual left light up. The checked
   radio's own label is the adjacent `+`; the lower-value stars are the later `~`
   siblings (leftward under row-reverse). */
.hzo-rating-input__radio:checked + .hzo-rating-input__star,
.hzo-rating-input__radio:checked ~ .hzo-rating-input__star {
    color: var(--accent);
}

/* Hover preview — same leftward run: the hovered star + its later `~` siblings
   (lower values, visually left). */
.hzo-rating-input__star:hover,
.hzo-rating-input__star:hover ~ .hzo-rating-input__star {
    color: var(--accent);
}

/* A11y — required. The radio is hidden, so the focus ring rides its label star. */
.hzo-rating-input__radio:focus-visible + .hzo-rating-input__star {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}
.hzo-rating-input__radio:disabled + .hzo-rating-input__star,
.hzo-rating-input.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-rating-input__star { transition: none; }
}