/* ============================================================
   section-index.css — the sticky "on this page" chip index
   Shared by points.html, privacy-policy.html and terms.html; the
   scroll-spy that marks the current chip is assets/js/section-index.js.
   Markup (section-index.js wraps the ul in .si-rail and adds the arrows):
     <nav class="si-index" aria-label="…">
       <div class="container"><ul class="si-chips">
         <li><a class="si-chip" href="#id">…</a></li> …
       </ul></div>
     </nav>
     <section class="si-section" id="id">…</section>
   Every colour, size and space comes from variables.css.
   ============================================================ */

/* style.css gives body overflow:hidden, which makes body the box a sticky element sticks to — and body
   never scrolls, so the index would not stick. clip keeps the horizontal guard without that side effect. */
body {
    overflow: visible;
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Anchored sections stop below the sticky index. */
.si-section {
    scroll-margin-top: var(--section-index-offset);
}

/* Only the index sticks; the header scrolls away. */
.si-index {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.si-chips {
    position: relative;
    list-style: none;
    margin: 0;
    padding: var(--space-3) 0;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
}

.si-chips::-webkit-scrollbar {
    display: none;
}

.si-chip,
.si-chip:visited {
    display: inline-flex;
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--ink-muted);
    font-family: var(--font-sans);
    font-size: var(--text-label-size);
    line-height: var(--text-label-line);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/* style.css turns every a:hover and a:active #ea9629 (orange). A pressed or dragged chip keeps its grey, and
   so does a chip a touch screen still counts as hovered after a tap. Real hover (accent, pointer devices only)
   and the current chip (white) come later and still win. */
.si-chip:hover,
.si-chip:active {
    color: var(--ink-muted);
}

.si-chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (hover: hover) {
    .si-chip:hover {
        color: var(--accent);
        border-color: var(--accent);
        text-decoration: none;
    }
}

/* ---- Arrows + drag: only with a mouse; touch screens swipe the row natively ----
   The arrows sit over the ends of the row, on a fade of the index surface, and only on a side that hides
   chips, so at rest the first chip keeps its place, aligned with the page. */
.si-rail {
    position: relative;
}

.si-arrow {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .si-arrow:not([hidden]) {
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        width: var(--section-index-arrow-zone);
        padding: 0;
        border: 0;
        color: var(--ink-muted);
        cursor: pointer;
        transition: color 0.3s ease-in-out;
    }

    .si-arrow--prev {
        left: 0;
        justify-content: flex-start;
        background: linear-gradient(to right, var(--surface) 60%, transparent);
    }

    .si-arrow--next {
        right: 0;
        justify-content: flex-end;
        background: linear-gradient(to left, var(--surface) 60%, transparent);
    }

    .si-arrow svg {
        box-sizing: content-box;
        padding: var(--space-1);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        background: var(--surface);
    }

    .si-arrow--next svg {
        transform: scaleX(-1);
    }

    .si-arrow:hover {
        color: var(--accent);
    }

    .si-chips {
        cursor: grab;
    }

    .si-chips--dragging {
        cursor: grabbing;
        user-select: none;
    }

    .si-chips--dragging .si-chip {
        pointer-events: none;
    }
}

/* Current section: same treatment as the header's current item. */
.si-chip.si-chip--active,
.si-chip.si-chip--active:visited,
.si-chip.si-chip--active:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

/* Below 992px the chip row runs edge to edge; the inset lives inside the scroller, so chips slide
   under the screen edges instead of being cut at the container margin. */
@media (max-width: 991px) {
    /* !important only because style.css forces .container { padding: 7% !important } below 576px */
    .si-index .container {
        max-width: none;
        padding: 0 !important;
    }

    .si-chips {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
        scroll-padding-left: var(--space-5);
        scroll-padding-right: var(--space-5);
    }
}

/* Phones: smaller chips (text and height) and a slimmer row. Tablet and desktop keep the sizes above;
   --section-index-offset follows the slimmer row (variables.css, section 21). */
@media (max-width: 767px) {
    .si-chips {
        padding-top: var(--space-2);
        padding-bottom: var(--space-2);
    }

    .si-chip,
    .si-chip:visited {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-caption-size);
        line-height: var(--text-caption-line);
    }
}