/* ══════════════════════════════════════════════════════════════
   PATTERN — Feedback rating
   1–5 (or N) rating widget using radio buttons + labeled boxes.
   The native radio is visually hidden; the box is the click target,
   styled via :checked sibling selector. JS-free.

   Markup:
     <div class="feedback-rating" role="radiogroup" aria-label="Rating">
       {% for n in range(1, 6) %}
       <label class="feedback-rating-option">
         <input type="radio" name="rating" value="{{ n }}">
         <span class="feedback-rating-label">{{ n }}</span>
       </label>
       {% endfor %}
     </div>

   Used by: STRATEGIANALYS (anonymous feedback widget)
   Candidates: any app collecting Likert-style or 1-5 ratings.
   ══════════════════════════════════════════════════════════════ */

.feedback-rating {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.feedback-rating-option {
    cursor: pointer;
}

.feedback-rating-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.feedback-rating-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--border);
    font-size: 1.125rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.feedback-rating-label:hover {
    border-color: var(--muted);
}

.feedback-rating-option input[type="radio"]:checked + .feedback-rating-label {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}
.feedback-rating-option input[type="radio"]:focus-visible + .feedback-rating-label {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
}