/* Scroll Spy — shared navigation component
   Extracted from grant-page.css. Use gc-spy prefix.
   Desktop-only (hidden below 1200px). */

.gc-spy {
    display: none;
    position: fixed;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
}

@media (min-width: 1200px) {
    .gc-spy { display: block; }
}

.gc-spy__items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-image: linear-gradient(
        to bottom,
        transparent 14px,
        var(--spy-line, rgba(0,0,0,0.08)) 14px,
        var(--spy-line, rgba(0,0,0,0.08)) calc(100% - 14px),
        transparent calc(100% - 14px)
    );
    background-size: 2px calc(100% - 28px);
    background-repeat: no-repeat;
    background-position: right 4px top 0;
}

.gc-spy__item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
}

.gc-spy__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--spy-muted, #6b6b6b);
    text-align: right;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gc-spy__item:hover .gc-spy__name {
    color: var(--spy-active, #2d6a4f);
}

.gc-spy__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--spy-muted, #8a8a8a);
    background: var(--spy-bg, #fffdf5);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* State: past */
.gc-spy__item[data-state="past"] .gc-spy__dot {
    background: var(--spy-active, #2d6a4f);
    border-color: var(--spy-active, #2d6a4f);
}
.gc-spy__item[data-state="past"] .gc-spy__name {
    color: var(--spy-muted, #6b6b6b);
}

/* State: active */
.gc-spy__item[data-state="active"] .gc-spy__dot {
    background: var(--spy-active, #2d6a4f);
    border-color: var(--spy-active, #2d6a4f);
    box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.22);
}
.gc-spy__item[data-state="active"] .gc-spy__name {
    color: var(--spy-active, #2d6a4f);
    font-weight: 700;
}