/**
 * PPF Pro Blueprint LMS - Dashboard component 4 of 7: module trajectory.
 *
 * Styles for region 9 of the $10,000 dashboard (spec v0.3.36, section 8).
 * References the --ppfb-10k-* tokens; defines none of them.
 *
 * Progressive enhancement: the accordion panels are visible when JS is
 * absent. JS adds the ppfb-traj-js class to <html>; only then do collapsed
 * panels hide, so a JS failure leaves the full content present.
 * Reduced motion: every transition has an instant branch.
 */

.ppfb-traj {
    font-family: var(--ppfb-10k-font-ui);
    color: var(--ppfb-10k-ink);
}

/* Group sections (spec v0.3.56 module grouping): Technical, Business,
 * Advanced, Bonus. Structural wrappers only; module rows keep their own
 * rules unchanged. */
.ppfb-traj-group {
    /* No chrome of its own; exists to carry the section wrapper and
       the data-group attribute. */
}

/* v0.3.115 theme guard: the active theme gives every <section> 96px of
 * vertical padding. The trajectory is built from nested sections and
 * carries its own rhythm, so that leak opens a dead gap above and below
 * every group. Reset it here, in the component's own stylesheet. */
section.ppfb-traj,
section.ppfb-traj-group {
    padding: 0;
}

.ppfb-traj-group-title {
    margin: 0;
    padding: var(--ppfb-10k-space-5) 0 var(--ppfb-10k-space-2);
    font-size: 0.875rem;
    font-weight: var(--ppfb-10k-weight-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ppfb-10k-quiet);
    line-height: var(--ppfb-10k-leading-snug);
}

/* Open module rows. */
.ppfb-traj-module {
    border-bottom: 1px solid var(--ppfb-10k-line);
}

.ppfb-traj-module-head {
    display: block;
    width: 100%;
    padding: var(--ppfb-10k-space-35) 0;
    min-height: 44px;
    background: none;
    border: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ppfb-traj-module-head:focus-visible {
    outline: 2px solid var(--ppfb-10k-gold-700);
    outline-offset: 2px;
}

.ppfb-traj-module-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: var(--ppfb-10k-weight-semibold);
    line-height: var(--ppfb-10k-leading-snug);
    padding-right: 1.75rem;
}

.ppfb-traj-module-meta {
    display: flex;
    gap: var(--ppfb-10k-space-3);
    align-items: baseline;
    margin-top: var(--ppfb-10k-space-1);
    font-size: var(--ppfb-10k-text-14px);
    color: var(--ppfb-10k-quiet);
}

.ppfb-traj-module-status--done {
    color: var(--ppfb-10k-pass);
}

/* 8px progress track. Fill animates via scaleX from the left origin, never width. */
.ppfb-traj-track {
    display: block;
    height: 8px;
    margin-top: var(--ppfb-10k-space-2);
    background: var(--ppfb-10k-line);
    border-radius: 4px;
    overflow: hidden;
}

.ppfb-traj-track-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--ppfb-10k-ink);
    transform-origin: left center;
}

/* Track reveals run only when JS stages them; reduced motion skips the JS. */
.ppfb-traj-js .ppfb-traj-track-fill {
    transition: transform 240ms ease;
}

/* Chevron affordance for the accordion toggle. */
.ppfb-traj-module-head {
    position: relative;
}

.ppfb-traj-chevron {
    position: absolute;
    top: var(--ppfb-10k-space-45);
    right: var(--ppfb-10k-space-1);
    width: 0.625rem;
    height: 0.625rem;
    border-right: 2px solid var(--ppfb-10k-quiet);
    border-bottom: 2px solid var(--ppfb-10k-quiet);
    transform: rotate(45deg);
    transition: transform 180ms ease;
}

.ppfb-traj-module-head[aria-expanded="true"] .ppfb-traj-chevron {
    transform: rotate(225deg);
}

/* Lesson panels. Hidden only when JS is present to drive the accordion. */
.ppfb-traj-js .ppfb-traj-module-head[aria-expanded="false"] + .ppfb-traj-lessons {
    display: none;
}

.ppfb-traj-lesson {
    display: block;
    padding: var(--ppfb-10k-space-24) 0;
    min-height: 44px;
    border-top: 1px solid var(--ppfb-10k-line);
    color: inherit;
    text-decoration: none;
}

a.ppfb-traj-lesson:focus-visible {
    outline: 2px solid var(--ppfb-10k-gold-700);
    outline-offset: 2px;
}

.ppfb-traj-lesson-title {
    display: block;
    font-size: 1rem;
    line-height: var(--ppfb-10k-leading-ui);
}

a.ppfb-traj-lesson .ppfb-traj-lesson-title {
    text-decoration: underline;
    text-decoration-color: var(--ppfb-10k-line);
    text-underline-offset: 3px;
}

.ppfb-traj-lesson-meta {
    display: flex;
    gap: var(--ppfb-10k-space-3);
    margin-top: 2px;
    font-size: var(--ppfb-10k-text-14px);
    color: var(--ppfb-10k-quiet);
}

.ppfb-traj-lesson-status--done {
    color: var(--ppfb-10k-pass);
}

/* Locked rows: compact, text only, zero links. */
.ppfb-traj-locked,
.ppfb-traj-drip {
    padding: var(--ppfb-10k-space-3) 0;
    border-bottom: 1px solid var(--ppfb-10k-line);
}

.ppfb-traj-locked-title,
.ppfb-traj-drip-title {
    display: block;
    font-size: 1rem;
    font-weight: var(--ppfb-10k-weight-semibold);
    line-height: var(--ppfb-10k-leading-snug);
}

.ppfb-traj-locked-status,
.ppfb-traj-locked-line,
.ppfb-traj-drip-status,
.ppfb-traj-drip-line {
    display: block;
    margin-top: 2px;
    font-size: var(--ppfb-10k-text-14px);
    color: var(--ppfb-10k-quiet);
    line-height: var(--ppfb-10k-leading-ui);
}

/* The single upgrade pass card. Quiet: no gold, one text CTA. */
.ppfb-traj-pass {
    margin-top: var(--ppfb-10k-space-5);
    padding: var(--ppfb-10k-card-padding);
    background: var(--ppfb-10k-card);
    border: 1px solid var(--ppfb-10k-line);
    border-radius: 8px;
}

.ppfb-traj-pass-eyebrow {
    margin: 0 0 var(--ppfb-10k-space-2);
    font-size: 0.75rem;
    font-weight: var(--ppfb-10k-weight-extrabold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ppfb-10k-eyebrow);
}

.ppfb-traj-pass-title {
    margin: 0 0 var(--ppfb-10k-space-2);
    font-family: var(--ppfb-10k-font-display);
    font-size: 1.375rem;
    line-height: var(--ppfb-10k-leading-snug);
    color: var(--ppfb-10k-ink);
}

.ppfb-traj-pass-body {
    margin: 0 0 var(--ppfb-10k-space-3);
    font-size: var(--ppfb-10k-text-17px);
    line-height: 1.65;
    color: var(--ppfb-10k-ink);
}

.ppfb-traj-pass-cta {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    color: var(--ppfb-10k-ink);
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ppfb-traj-pass-cta:focus-visible {
    outline: 2px solid var(--ppfb-10k-gold-700);
    outline-offset: 2px;
}

/* Reduced motion: instant, complete states. */
@media (prefers-reduced-motion: reduce) {
    .ppfb-traj-chevron,
    .ppfb-traj-js .ppfb-traj-track-fill {
        transition: none;
    }
}