/* Scroll Spy — shared navigation component
   Extracted from grant-page.css. Use gc-spy prefix.
   Desktop-only (hidden below 1520px — see the threshold note on the media query below).
   Layout: labels right-aligned on left, dots on right with vertical line through them. */

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

/* ── Visibility threshold: 1520px (raised from 1200px, 2026-07-31) ────────────
   The rail is position:fixed at right:32px. Every page that pairs it with the
   1120px content column overlapped its own body text between 1200 and ~1500px —
   three independent QA agents hit this, and five pages had shipped their own
   page-scoped `body .gc-spy { display:none }` patch at 1499/1519px. Fixed here
   once so the behaviour has a single owner; those page patches were removed.

   The arithmetic. Content is centred, so its right edge sits at (W + 1120) / 2.
   The rail's left edge sits at W − 32 − railWidth. No-overlap requires

       W − 32 − railWidth − gap  >=  (W + 1120) / 2
       W  >=  1120 + 64 + 2·railWidth + 2·gap

   Measured rail widths at 1700px (widest label set wins): sred-claim-guide 150px,
   e-commerce 147px, youth 122px, technology 116px, alberta 95px. Taking the
   worst case railWidth = 150 and a 18px breathing gap:

       W >= 1120 + 64 + 300 + 36 = 1520px

   At exactly 1520 the content right edge is 1320 and the rail left edge is 1338.
   Raise this again if a page ever ships a wider column or longer section labels. */
@media (min-width: 1520px) {
    .gc-spy {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) translateX(8px);
        transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s ease;
    }
    .gc-spy[data-visible="true"] {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gc-spy { transition: opacity 0.15s ease, visibility 0.15s; }
    .gc-spy[data-visible="true"] { transform: translateY(-50%); }
}

.gc-spy__items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

/* Vertical line running through the dots on the right edge */
.gc-spy__items::after {
    content: '';
    position: absolute;
    right: 4px; /* center of 10px dot */
    top: 14px; /* align with first dot center */
    bottom: 14px; /* align with last dot center */
    width: 2px;
    background: var(--spy-line, rgba(0,0,0,0.12));
}

.gc-spy__item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    flex-direction: row; /* name first (left), dot second (right) */
}

.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);
    order: 1; /* name on left */
}

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

.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);
    order: 2; /* dot on right */
    position: relative;
    z-index: 1; /* above the vertical line */
}

/* State: past */
.gc-spy__item[data-state="past"] .gc-spy__dot {
    background: var(--spy-active, #C4532B);
    border-color: var(--spy-active, #C4532B);
}
.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, #C4532B);
    border-color: var(--spy-active, #C4532B);
    box-shadow: 0 0 0 4px rgba(196, 83, 43, 0.22);
}
.gc-spy__item[data-state="active"] .gc-spy__name {
    color: var(--spy-active, #C4532B);
    font-weight: 700;
}