/* Platform-wide star-rating atom. `.global-star-rating` is the canonical READ-ONLY
   score display (partial-fill stars) and `.global-star-rating-input` is the canonical
   INTERACTIVE 1-5 picker. One home for both halves so a rating never gets hand-rolled
   again.

       <span class="global-star-rating global-star-rating--sm">
         <span class="global-star-rating__value">4.7</span>
         <span class="global-star-rating__stars">
           <span class="global-star-rating__star" style="--fill: 100%"></span>…
         </span>
         <span class="global-star-rating__count">(23)</span>
       </span>

   Partial fill is driven by the per-star `--fill` custom property (0-100%): the
   server sets it with the `star_fill_percent` filter, Alpine sets it with the
   matching `starFill()` helper in worker-skills.js. Both halves are token-only —
   the gold is `--color-warning`, the empty track is `--color-border`. */

.global-star-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xsm);
    font-size: var(--font-size-md);
    line-height: 1;
}

.global-star-rating__value {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.global-star-rating__stars {
    display: inline-flex;
    gap: var(--spacing-2xs);
}

/* One star box. The glyph is drawn TWICE — ::before is the empty track, ::after is
   the gold overlay clipped to `--fill` — which is what makes a 3.5 read as half a
   star instead of rounding. */
.global-star-rating__star {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--font-size-base);
}

.global-star-rating__star::before {
    content: "\2605";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-border);
}

.global-star-rating__star::after {
    content: "\2605";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-warning);
    clip-path: inset(0 calc(100% - var(--fill, 0%)) 0 0);
}

.global-star-rating__count {
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
}

/* ── Display size variants ── the block scales its text, the stars scale with it. */
.global-star-rating--sm {
    font-size: var(--font-size-xs);
}

.global-star-rating--sm .global-star-rating__star {
    font-size: var(--font-size-md);
}

.global-star-rating--lg {
    font-size: var(--font-size-base);
}

.global-star-rating--lg .global-star-rating__star {
    font-size: var(--font-size-xl);
}

/* ── Input ── five buttons + a live "n / 5" label. State comes from Alpine, which
   toggles `.is-active` (committed) and `.is-hover` (preview) on each button. */
.global-star-rating-input {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.global-star-rating-input__btn {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-border);
    transition: color 0.15s ease, transform 0.15s ease;
    background: none;
    border: none;
    padding: var(--spacing-2xs);
    line-height: 1;
}

.global-star-rating-input__btn:hover {
    transform: scale(1.15);
}

.global-star-rating-input__btn:focus {
    outline: none;
}

.global-star-rating-input__btn:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.global-star-rating-input__btn.is-active,
.global-star-rating-input__btn.is-hover {
    color: var(--color-warning);
}

/* Hover preview sits a shade lighter than a committed star (--color-warning) so the
   two read apart mid-pick. There is no lighter-gold token, so the literal is kept and
   COUNTED in the css-standards baseline — never hidden behind a color-mix with the
   `white` keyword, which the hex ratchet can't see. */
.global-star-rating-input__btn.is-hover:not(.is-active) {
    color: #fcd34d;
}

.global-star-rating-input__btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.global-star-rating-input__label {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-md);
    color: var(--color-text-light);
}

.global-star-rating-input--sm .global-star-rating-input__btn {
    font-size: var(--font-size-xl);
}

.global-star-rating-input--lg .global-star-rating-input__btn {
    font-size: 2rem;
}

/* Rating-card avatar — DELETED. It was a brand-fill modifier on top of the old
   `.avatar` base; rating cards now use the atom's own fill:
   `.global-avatar .global-avatar--md|--lg .global-avatar--ink`. */

/* Skill pill hover state. The SHAPE is .global-chip now (components/chip.css) —
   the styleguide's adoption sweep names .workers-skill-pill as one of the hand-rolled
   tags that component exists to absorb — so this class kept only the job the
   chip deliberately does not do: mark this tag as a hover target, because
   hovering it opens the competency tooltip.

   The hover fill is one step down the grey ramp from the chip's own
   --color-surface-subtle. It was #e2e8f0 !important: a blue-grey off the brand
   ramp, and the bang existed to beat the Bootstrap .bg-light this pill used to
   carry. Both went with that class — .workers-skill-pill:hover already outweighs
   .global-chip on specificity, so the fill lands without forcing it. */
.workers-skill-pill {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.workers-skill-pill:hover {
    background-color: var(--color-grey-200);
}

/* The pill's tone: what the profile card's standing badge spells out, said in
   colour instead (skill_pill.html) — amber for Incomplete, red for Expired,
   and a Qualified holding stays the plain chip, so the one coloured chip on
   a row IS the signal. The tones are the badge's own (badge.css, the
   --status-* pairs), so the card and the roster agree; red is the colour
   tokens.css reserves for a genuine failure, and a lapsed cert keeps a person
   off the work, which is exactly that — so red alone also gets a faint edge,
   and the one failure reads first even beside amber. The word is still in the
   chip for a screen reader (.visually-hidden), and the hover says it in full.

   Doubled class on purpose: this sheet loads before chip.css, so a lone
   modifier at .global-chip's own specificity would lose the fill to it.
   Each tone names its own hover a step deeper for the same reason — the
   grey hover above would otherwise wipe the tint on the way in. */
.workers-skill-pill.workers-skill-pill--incomplete {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.workers-skill-pill.workers-skill-pill--incomplete:hover {
    background: color-mix(in srgb, var(--color-warning) 18%, transparent);
}

.workers-skill-pill.workers-skill-pill--expired {
    background: var(--status-danger-bg);
    color: var(--color-error);
    border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}

.workers-skill-pill.workers-skill-pill--expired:hover {
    background: color-mix(in srgb, var(--color-error) 18%, transparent);
}

/* Skill-rating tooltip panel: see .global-tooltip--rich in
   components/global-tooltip.css. */