/**
 * PPF Pro Blueprint LMS v0.3.36 - Progress cluster styles.
 *
 * Component 3 of 6 (progress cluster): Up next card, learning record,
 * milestone track, momentum row. This file references the canonical
 * --ppfb-10k-* tokens only; it never redefines the token block. All
 * selectors are .ppfb-prog-* namespaced. iPhone-first: single column,
 * 390px layout via the 480px breakpoint. Content is fully present with
 * zero animation when JS fails; JS adds the staged reveal classes.
 */

/* ============ Shared ============ */
.ppfb-prog-eyebrow {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ppfb-10k-eyebrow);
    margin: 0 0 var(--ppfb-10k-space-4);
}

.ppfb-prog-title {
    font-family: var(--ppfb-10k-font-display);
    font-weight: 400;
    color: var(--ppfb-10k-ink);
    font-size: 1.375rem;
    line-height: 1.3;
    margin: 0 0 var(--ppfb-10k-space-4);
}

.ppfb-prog-body,
.ppfb-prog-caption {
    font-family: var(--ppfb-10k-font-body);
    color: var(--ppfb-10k-quiet);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 var(--ppfb-10k-space-4);
}

.ppfb-prog-body:last-child,
.ppfb-prog-caption:last-child {
    margin-bottom: 0;
}

/* The primary action of the state: Princess Blue fill, white text
   (Apple Button #0071E3 per the 2026-09-25 Apple-page palette order).
   Scoped to the dashboard CTA only; the course-wide --course-button-bg
   token now leads Princess Blue per the owner's 2026-09-19 all-buttons-
   site-wide ruling. The scoped dashboard override remains for its
   documented hover ratio. */
.ppfb-prog-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ppfb-10k-tap-min);
    min-width: var(--ppfb-10k-tap-min);
    padding: 0.75rem 1.75rem;
    margin: 0 0 var(--ppfb-10k-space-4);
    background: var(--course-button-bg, #0071E3);
    color: #FFFFFF;
    font-family: var(--ppfb-10k-font-ui);
    font-size: var(--ppfb-10k-text-ui);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: none;
    border-radius: var(--ppfb-10k-radius-btn);
    transition: background-color var(--ppfb-10k-dur-quick) ease;
}

.ppfb-prog-cta:hover,
.ppfb-prog-cta:focus-visible {
    background: #003965; /* brand navy per SS27 section 2a; white on it is 11.84:1 */
    color: #FFFFFF;
    text-decoration: none;
}

/* Quiet text links: wayfinding, never a second gold. */
.ppfb-prog-quiet {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 1rem;
    color: var(--ppfb-10k-ink);
    text-decoration: underline;
    text-underline-offset: var(--ppfb-10k-underline-offset);
    text-decoration-thickness: 1px;
}

.ppfb-prog-quiet:hover,
.ppfb-prog-quiet:focus-visible {
    color: var(--ppfb-10k-black);
}

/* ============ Up next card ============ */
.ppfb-prog-upnext {
    background: var(--ppfb-10k-card);
    border-radius: var(--ppfb-10k-radius-card);
    box-shadow: var(--ppfb-10k-shadow-1);
    padding: var(--ppfb-10k-space-6);
}

.ppfb-prog-module {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ppfb-10k-ink);
    margin: 0 0 var(--ppfb-10k-space-2);
}

.ppfb-prog-dur {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 1rem;
    font-weight: 400;
    color: var(--ppfb-10k-quiet);
    white-space: nowrap;
}

/* ============ Learning record ============ */
.ppfb-prog-record {
    padding: var(--ppfb-10k-space-2) 0;
}

.ppfb-prog-record-grid {
    display: flex;
    gap: var(--ppfb-10k-space-6);
    align-items: center;
    margin-bottom: var(--ppfb-10k-space-4);
}

.ppfb-prog-ring {
    flex: 0 0 auto;
    text-align: center;
}

.ppfb-prog-ring-svg {
    display: block;
    margin: 0 auto;
}

.ppfb-prog-ring-cap {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 0.875rem;
    color: var(--ppfb-10k-quiet);
    margin: var(--ppfb-10k-space-2) 0 0;
    white-space: nowrap;
}

.ppfb-prog-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ppfb-10k-space-4);
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
}

.ppfb-prog-stat {
    margin: 0;
}

.ppfb-prog-num {
    font-family: var(--ppfb-10k-font-display);
    font-size: 2.5rem; /* 40px record trio (locked) */
    line-height: 1.15;
    font-weight: 400;
    font-variant-numeric: var(--ppfb-10k-numeral);
    color: var(--ppfb-10k-ink);
    margin: 0 0 var(--ppfb-10k-space-2);
}

.ppfb-prog-label {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ppfb-10k-ink);
    margin: 0 0 var(--ppfb-10k-space-1);
}

.ppfb-prog-cap {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 0.8125rem;
    color: var(--ppfb-10k-quiet);
    margin: 0;
}

.ppfb-prog-explainer {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--ppfb-10k-quiet);
    margin: 0;
    max-width: var(--ppfb-10k-measure);
}

/* ============ Milestone track ============ */
.ppfb-prog-path {
    padding: var(--ppfb-10k-space-2) 0;
}

.ppfb-prog-stations {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ppfb-10k-space-4);
    margin: 0 0 var(--ppfb-10k-space-4);
    padding: 0;
}

.ppfb-prog-station {
    margin: 0;
    padding-top: var(--ppfb-10k-space-2);
}

.ppfb-prog-marker {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--ppfb-10k-ink);
    background: transparent;
    margin-bottom: var(--ppfb-10k-space-3);
}

.ppfb-prog-station.is-current .ppfb-prog-marker {
    background: var(--ppfb-10k-ink);
}

.ppfb-prog-station-name {
    display: block;
    font-family: var(--ppfb-10k-font-ui);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ppfb-10k-ink);
}

.ppfb-prog-station-meta,
.ppfb-prog-station-count,
.ppfb-prog-station-locked,
.ppfb-prog-station-state {
    display: block;
    font-family: var(--ppfb-10k-font-ui);
    font-size: 0.875rem;
    color: var(--ppfb-10k-quiet);
    margin-top: var(--ppfb-10k-space-1);
}

.ppfb-prog-station-state {
    color: var(--ppfb-10k-ink);
}

.ppfb-prog-note {
    font-family: var(--ppfb-10k-font-ui);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ppfb-10k-quiet);
    margin: 0;
}

/* v0.3.111: momentum row removed by owner order; its rules
   (.ppfb-prog-momentum, .ppfb-prog-chips, .ppfb-prog-chip) are gone. */

/* ============ Staged reveal (progressive enhancement) ============ */
/* Content is fully present by default. JS adds .ppfb-prog-js, which arms
   the reveal; .is-in completes it. Reduced motion: instant, no transition. */
.ppfb-prog-js [data-ppfb-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity var(--ppfb-10k-dur-slow) var(--ppfb-10k-ease-out),
        transform var(--ppfb-10k-dur-slow) var(--ppfb-10k-ease-out);
}

.ppfb-prog-js [data-ppfb-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
}

.ppfb-prog-reduced [data-ppfb-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .ppfb-prog-js [data-ppfb-reveal],
    .ppfb-prog-js [data-ppfb-reveal].is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ppfb-prog-cta {
        transition: none;
    }
}

/* ============ 390px: single column ============ */
@media (max-width: 480px) {
    .ppfb-prog-upnext {
        padding: var(--ppfb-10k-space-5);
    }

    .ppfb-prog-record-grid {
        flex-direction: column;
        align-items: stretch;
        gap: var(--ppfb-10k-space-5);
    }

    .ppfb-prog-ring {
        text-align: left;
    }

    .ppfb-prog-ring-svg {
        margin: 0;
    }

    .ppfb-prog-trio {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ppfb-prog-stat {
        padding: var(--ppfb-10k-space-4) 0;
        border-bottom: 1px solid var(--ppfb-10k-line);
    }

    .ppfb-prog-stat:first-child {
        border-top: 1px solid var(--ppfb-10k-line);
    }

    .ppfb-prog-stations {
        grid-template-columns: 1fr;
        gap: var(--ppfb-10k-space-5);
    }
}