/* ============================================================
   SECTION NAV — styles for js/section-nav.js
   ------------------------------------------------------------
   .snav-side  wide screens: sticky sidebar beside the sections
   .snav-deck  narrow screens: one card at a time, strip on top
   Paints only from design-system tokens, so both themes follow.
   ============================================================ */

/* Marker colour per kind of section. Decorative only: the label
   beside each marker names the kind. */
.snav-link[data-kind="question"] { --snav-kind: var(--warning-500); }
.snav-link[data-kind="learn"]    { --snav-kind: var(--accent); }
.snav-link[data-kind="practice"] { --snav-kind: var(--success-500); }
.snav-link[data-kind="apply"]    { --snav-kind: var(--text-secondary); }
.snav-link[data-kind="deeper"]   { --snav-kind: var(--text-tertiary); }

/* Hidden until the script picks a mode, and inside the Facilitator
   Hub runner on a narrow frame. */
.snav,
.snav-pager { display: none; }

.snav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.snav-link {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-decoration: none;
    color: var(--text-secondary);
}

.snav-link:focus-visible,
.snav-pager-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.snav-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--snav-kind, var(--border-strong));
    border-radius: 50%;
    font: var(--fw-medium) 11px/1 var(--font-mono);
    color: var(--text-secondary);
}

.snav-link[aria-current] .snav-num {
    background: var(--snav-kind, var(--accent));
    color: var(--bg-base);
}

.snav-text { display: grid; gap: 2px; min-width: 0; }

.snav-label {
    font: var(--fw-medium) 10px/1.3 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.snav-title {
    font-size: var(--text-body-sm);
    line-height: 1.4;
}

.snav-link[aria-current] .snav-label { color: var(--text-accent); }
.snav-link[aria-current] .snav-title { color: var(--text-primary); font-weight: var(--fw-medium); }

.snav-heading,
.snav-count {
    margin: 0 0 12px;
    font: var(--fw-medium) 11px/1.2 var(--font-mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.snav-progress {
    height: 3px;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.snav-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 0.25s ease;
}

/* ---------- Wide: sticky sidebar ---------- */
@media (min-width: 1100px) {
    main.snav-side {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        column-gap: 44px;
        width: min(1400px, calc(100% - 48px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    main.snav-side > * { grid-column: 2; }
    main.snav-side > .snav-cover { grid-column: 1 / -1; }

    /* Spans every row after the hero, so sticky has the whole page to travel. */
    main.snav-side > .snav {
        display: block;
        grid-column: 1;
        grid-row: var(--snav-row, 2) / span 60;
        align-self: start;
        position: sticky;
        top: 24px;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: 4px 4px 4px 0;
    }

    main.snav-side > section { scroll-margin-top: 24px; }
    main.snav-side .snav-count { display: none; }

    main.snav-side .snav-list {
        display: grid;
        gap: 6px;
        margin-bottom: 20px;
    }

    main.snav-side .snav-link {
        align-items: center;
        padding: 10px 12px;
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: background-color 0.15s ease, border-color 0.15s ease;
    }

    /* Plain words, not a mono tag, so each entry reads as a link. */
    main.snav-side .snav-label {
        font: var(--fw-medium) var(--text-body-sm)/1.35 var(--font-sans);
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }

    main.snav-side .snav-title { display: none; }
    main.snav-side .snav-link[aria-current] { align-items: flex-start; }
    main.snav-side .snav-link[aria-current] .snav-title {
        display: block;
        margin-top: 2px;
        font-weight: var(--fw-regular, 400);
        font-size: var(--text-caption);
        color: var(--text-secondary);
    }

    main.snav-side .snav-link:hover { background: var(--surface-1); border-color: var(--border-default); }
    main.snav-side .snav-link:hover .snav-label { color: var(--text-primary); }
    main.snav-side .snav-link[aria-current] { background: var(--surface-1); border-color: var(--border-default); box-shadow: inset 3px 0 0 var(--snav-kind, var(--accent)); }
    main.snav-side .snav-link[aria-current] .snav-label { color: var(--text-primary); }
}

/* ---------- Narrow: a deck of cards ---------- */
main.snav-deck > .snav {
    display: block;
    position: sticky;
    top: var(--snav-top, 0px);
    z-index: 20;
    padding: 10px 0 0;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-subtle);
}

main.snav-deck .snav-heading { display: none; }
main.snav-deck .snav-count { margin: 0 0 8px; }

main.snav-deck .snav-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 32px 12px 12px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 40px), transparent);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

main.snav-deck .snav-list::-webkit-scrollbar { display: none; }

main.snav-deck .snav-list li { flex: 0 0 auto; scroll-snap-align: center; }

main.snav-deck .snav-link {
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface-1);
    min-height: 44px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

main.snav-deck .snav-link:active { transform: translateY(1px); }

main.snav-deck .snav-link[aria-current] {
    border-color: var(--snav-kind, var(--accent));
    background: var(--surface-2);
}

main.snav-deck .snav-link.is-done .snav-num { background: var(--surface-3); }
main.snav-deck .snav-title { display: none; }
main.snav-deck .snav-label { max-width: 15em; overflow: hidden; text-overflow: ellipsis; font: var(--fw-medium) var(--text-body-sm)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--text-primary); }
main.snav-deck .snav-progress { border-radius: 0; height: 2px; }

/* One card at a time. A class, not [hidden]: section classes set display. */
main.snav-deck > .snav-off { display: none !important; }
main.snav-deck > section { margin-top: 24px; }


main.snav-deck > section.snav-enter { animation: snav-in 0.22s ease-out; }

@keyframes snav-in {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

/* One bar, pinned to the bottom of the screen while a card is on it. */
main.snav-deck > .snav-pager {
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 24px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-base);
    border-top: 1px solid var(--border-subtle);
}

.snav-pager-btn[hidden] { display: none; }

.snav-pager-btn {
    min-width: 0;
    min-height: 56px;
    border-radius: var(--radius-md);
    font: inherit;
    cursor: pointer;
}

.snav-pager-btn.snav-prev {
    flex: 0 0 56px;
    border: 1px solid var(--border-strong);
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 20px;
}

.snav-pager-btn.snav-next {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    padding: 8px 18px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--text-on-accent);
    text-align: left;
}

.snav-pager-btn.snav-next:hover:not(:disabled) { filter: brightness(1.08); }
.snav-pager-btn.snav-next:disabled {
    border-color: var(--border-default);
    background: var(--surface-2);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* A card the page has not revealed yet (it waits on the opening question). */
.snav-link.is-locked { opacity: 0.45; cursor: not-allowed; }
.snav-link.is-locked .snav-num { border-style: dashed; }
.snav-pager-btn.snav-prev:hover { border-color: var(--border-accent); }

.snav-pager-dir {
    font: var(--fw-medium) 10px/1.3 var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}

.snav-pager-label { font-weight: var(--fw-semibold); line-height: 1.3; overflow-wrap: anywhere; }

/* Lift the floating theme switch above the bar. */
html.snav-deck-on .global-theme-toggle { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Swipeable rows of cards (deck only, phone widths) ---------- */
.snav-carousel-meta { display: none; }

@media (max-width: 760px) {
    main.snav-deck [data-nav-carousel] {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        align-items: flex-start;
        overscroll-behavior-x: contain;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    main.snav-deck [data-nav-carousel]::-webkit-scrollbar { display: none; }

    /* Each card takes most of the width, so the next one peeks in. */
    main.snav-deck [data-nav-carousel] > * {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }

    main.snav-deck .snav-carousel-meta {
        display: block;
        margin: 16px 0 8px;
        text-align: right;
        font-size: var(--text-caption);
        color: var(--text-tertiary);
    }
}

@media (prefers-reduced-motion: reduce) {
    main.snav-deck > section.snav-enter { animation: none; }
    .snav-progress span { transition: none; }
}

@media print {
    .snav,
    .snav-pager { display: none !important; }
}