/* github-star.css — header "rate us" star button + 5-star popup. */

/* No box — just the star glyph, sitting tight after "Start here". The negative
   margins claw back the 12px nav gap + edge padding so it doesn't float in space. */
.gh-star-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 -4px 0 -6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-2, #95a1ad);
    cursor: pointer;
    transition: color 140ms ease, transform 120ms ease;
}
.gh-star-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.gh-star-btn:hover { color: #ffd166; transform: scale(1.14); }
.gh-star-btn:active { transform: scale(0.94); }

.gh-star-pop {
    position: fixed;
    z-index: 1300;
    width: 244px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 209, 102, 0.22);
    background: linear-gradient(180deg, rgba(12, 14, 22, 0.98), rgba(7, 9, 16, 0.99));
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 22px rgba(255, 209, 102, 0.08);
    color: var(--ink-0, #eaf2f6);
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    transition: opacity 130ms ease, transform 130ms ease;
}
.gh-star-pop[data-open="1"] { opacity: 1; transform: translateY(0) scale(1); }

.gh-star-pop__title { font-weight: 700; font-size: 13.5px; }
.gh-star-pop__sub { margin-top: 2px; font-size: 11px; color: var(--ink-2, #95a1ad); line-height: 1.35; }
.gh-star-pop__thanks { font-size: 13.5px; font-weight: 700; color: #ffd166; text-align: center; padding: 4px 0 2px; }
.gh-star-pop__link { display: block; text-align: center; margin-top: 6px; font-size: 11.5px; color: var(--acc-cyan, #06b6d4); text-decoration: none; }
.gh-star-pop__link:hover { text-decoration: underline; }

.gh-star-pop__stars { display: flex; gap: 4px; justify-content: center; margin: 11px 0 4px; }
.gh-star-pop__star {
    width: 36px; height: 36px; padding: 4px;
    border: 0; background: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.22);
    transition: color 90ms ease, transform 90ms ease;
}
.gh-star-pop__star svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.gh-star-pop__star:hover { transform: scale(1.14); }
.gh-star-pop__star.is-filled { color: #ffd166; filter: drop-shadow(0 0 6px rgba(255, 209, 102, 0.45)); }

.gh-star-pop__hint { min-height: 14px; margin-top: 4px; font-size: 11px; text-align: center; color: var(--ink-2, #95a1ad); }