/* ── Learning Paths: hub + path page + article floating bar ─────────────────
   Extends the .guide-card / .guides-grid / .lyx-guide language from main.css.
   Reveal animations enhance an already-visible default (JS adds the
   pre-reveal class only after checking IntersectionObserver support), so
   content is never hidden from no-JS users or crawlers. */

/* ── Hub: path cards ──────────────────────────────────────────────────────── */
.path-card { position: relative; }
.path-card .guide-ico { margin-bottom: 0; }
.path-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.path-card-meta { font-size: .78rem; color: var(--text-tertiary); margin: 0 0 .8rem; font-family: 'JetBrains Mono', monospace; }
.path-card-cta { display: block; margin-top: .9rem; font-size: .82rem; color: var(--primary); font-weight: 600; }
.path-card.is-complete { border-color: var(--border-focus); }

.path-ring { width: 44px; height: 44px; flex-shrink: 0; }
.path-ring circle { fill: none; stroke-width: 3; }
.path-ring .path-ring-track { stroke: var(--border-subtle); }
.path-ring .path-ring-fill {
    stroke: var(--primary);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1);
}
.path-ring-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    fill: var(--text-secondary);
    text-anchor: middle;
    dominant-baseline: central;
}
.path-card.is-complete .path-ring-fill { stroke: var(--primary); }
.path-card.is-complete .path-ring-label { fill: var(--primary); }

#pathContinue {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(80, 210, 193, .06);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius-lg);
    padding: .9rem 1.2rem;
    margin: 1.5rem 0 0;
    font-size: .88rem;
    color: var(--text-secondary);
}
#pathContinue.visible { display: flex; }
#pathContinue a { color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
#pathContinue a:hover { opacity: .85; }
@media (max-width: 560px) { #pathContinue { flex-direction: column; align-items: flex-start; } }

/* ── Path page: hero ──────────────────────────────────────────────────────── */
.lyx-path { max-width: 720px; }
.path-hero { margin-bottom: 3rem; }
.path-hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.path-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: .74rem;
    color: var(--text-tertiary);
    background: rgba(80, 210, 193, .06);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: .3rem .75rem;
}
.path-progress-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(80, 210, 193, .1);
    overflow: hidden;
}
.path-progress-fill {
    height: 100%;
    width: var(--path-pct, 0%);
    background: var(--gradient-brand);
    border-radius: 3px;
    transition: width .7s cubic-bezier(.22, 1, .36, 1);
}
.path-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: .8rem;
    color: var(--text-tertiary);
    margin-top: .55rem;
}
.path-progress-text strong { color: var(--primary); font-family: 'JetBrains Mono', monospace; }
.path-hero.is-complete .path-progress-text strong { color: var(--primary); }
.path-hype { font-size: .82rem; color: var(--text-tertiary); margin: .6rem 0 0; }
.path-hero.is-complete .path-hype { color: var(--primary); font-weight: 600; }

/* ── Timeline: chapters ───────────────────────────────────────────────────── */
/* Restrained: real-contrast solid card surfaces (var(--bg-card), not washed-out
   teal tints), thin hairline dividers instead of decoration, state conveyed by
   color/opacity rather than motion loops or bevels. */
.path-timeline { list-style: none; margin: 0; padding: 0; }

.path-stage { margin-bottom: 3rem; }
.path-stage + .path-stage { padding-top: 3rem; border-top: 1px solid var(--border-subtle); }

.path-stage-hd { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.path-stage-node {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1.5px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: .82rem;
    color: var(--text-tertiary);
    transition: border-color .15s, color .15s, background .15s;
}
.path-stage-hd-text { min-width: 0; }
.path-stage-hd-text h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.path-stage-blurb { font-size: .86rem; color: var(--text-tertiary); margin: 0; }

/* A chapter's index marker fills in once every step inside it is done. */
.path-stage.is-stage-complete .path-stage-node {
    background: rgba(80, 210, 193, .1);
    border-color: var(--primary);
    color: var(--primary);
}

.path-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.path-step { position: relative; display: flex; align-items: stretch; gap: .9rem; }

/* Reveal: visible by default; JS opts elements into the pre-reveal state only
   when it can guarantee the observer will fire, so no-JS / crawler renders
   are always fully visible. */
.path-step.js-pre-reveal { opacity: 0; transform: translateY(8px); transition: opacity .35s ease-out, transform .35s ease-out; }
.path-step.js-pre-reveal.in-view { opacity: 1; transform: translateY(0); }

.path-check {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: .1rem;
    border-radius: 50%;
    border: 1.5px solid var(--border-subtle);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s, background .15s;
    z-index: 1;
}
.path-check:hover { border-color: var(--border-focus); }
.path-check svg { width: 14px; height: 14px; stroke: var(--primary); stroke-width: 2.5; fill: none; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .2s ease-out; }
.path-step.is-done .path-check { background: var(--primary); border-color: var(--primary); }
.path-step.is-done .path-check svg { stroke: #04302b; stroke-dashoffset: 0; }

/* Up-next is conveyed by a brighter border, not a pulsing animation. */
.path-step.is-up-next .path-check { border-color: var(--primary); }
.path-step.is-up-next .path-step-card { border-color: var(--border-focus); }
.path-step.is-later { opacity: .6; }

.path-step-card {
    flex: 1;
    min-width: 0;
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: .95rem 1.1rem;
    transition: border-color .15s, background .15s;
}
/* Beats .lyx-guide a:not(.lyx-guide-btn)'s underline rule in main.css: same
   0-2-1 specificity, later source order wins since roadmap.css loads after. */
.lyx-guide a.path-step-card, .lyx-guide a.path-step-card:hover { text-decoration: none; }
a.path-step-card:hover { border-color: var(--border-focus); background: var(--bg-card-hover); }
.path-step.is-done .path-step-card { opacity: .68; }
.path-step-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.path-step-icon { width: 24px; height: 24px; border-radius: var(--radius-sm); background: rgba(80, 210, 193, .1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.path-step-icon svg { width: 14px; height: 14px; }
.path-step-card h3 { flex: 1 1 auto; min-width: 100px; font-family: var(--font-heading); font-size: .95rem; color: var(--text-primary); margin: 0; letter-spacing: -.01em; }
.path-step.is-done .path-step-card h3 { color: var(--text-secondary); }
.path-step-desc { font-size: .83rem; color: var(--text-tertiary); margin: 0 0 0 2.7rem; line-height: 1.5; }
.path-step-time { font-size: .73rem; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; margin-left: auto; white-space: nowrap; }
.path-step-up-next-tag { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); margin-left: auto; }

.path-checkpoint-card { border-color: rgba(255, 180, 84, .22); }
.path-checkpoint-card:hover { border-color: rgba(255, 180, 84, .38); }
.path-checkpoint-card .path-step-icon { background: rgba(255, 180, 84, .12); }
.path-checkpoint-card .path-step-icon svg { stroke: var(--accent); }
.quiz-count-badge { font-size: .71rem; color: var(--accent); font-family: 'JetBrains Mono', monospace; margin-left: auto; white-space: nowrap; }
.quiz-blurb { margin-bottom: .9rem !important; }
/* Fallback content for no-JS / crawlers only — the interactive quiz replaces it visually. */
.path-checkpoint-items { list-style: none; margin: .6rem 0 0 2.7rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.path-checkpoint-items li { font-size: .84rem; color: var(--text-secondary); position: relative; padding-left: 1.1rem; }
.path-checkpoint-items li::before { content: '?'; position: absolute; left: 0; color: var(--accent); font-weight: 700; font-family: 'JetBrains Mono', monospace; }

/* ── Chapter quizzes ──────────────────────────────────────────────────────── */
.quiz-status { display: flex; align-items: center; gap: .7rem; margin-left: 2.7rem; }
.quiz-status:empty { display: none; }
.quiz-status-badge { font-size: .82rem; font-weight: 700; color: var(--primary); }
.quiz-retake {
    font-size: .78rem; color: var(--text-tertiary); background: none; border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill); padding: .3rem .7rem; cursor: pointer; transition: border-color .2s, color .2s;
}
.quiz-retake:hover { border-color: var(--border-focus); color: var(--text-primary); }

.quiz-body { margin-left: 2.7rem; margin-top: .6rem; }
.quiz-question { display: flex; flex-direction: column; gap: .8rem; }

.quiz-progress { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.quiz-dots { display: flex; gap: .35rem; }
.quiz-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 180, 84, .25); transition: background .25s, transform .25s; }
.quiz-dot.is-past { background: var(--accent); }
.quiz-dot.is-current { background: var(--accent); transform: scale(1.6); }
.quiz-progress-text { font-size: .72rem; color: var(--text-tertiary); font-family: 'JetBrains Mono', monospace; }

.quiz-prompt { font-family: var(--font-heading); font-size: 1.02rem; color: var(--text-primary); margin: 0; line-height: 1.4; letter-spacing: -.005em; }

.quiz-options { display: flex; flex-direction: column; gap: .55rem; }
.quiz-option {
    text-align: left;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: .75rem .95rem;
    font-size: .88rem;
    color: var(--text-secondary);
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color .18s, background .18s, transform .12s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--accent); background: rgba(255, 180, 84, .05); }
.quiz-option:disabled { cursor: default; }
.quiz-options.is-answered .quiz-option:not(.is-correct):not(.is-wrong):not(.is-correct-reveal) { opacity: .5; }
.quiz-option.is-correct, .quiz-option.is-correct-reveal {
    border-color: var(--success); background: var(--success-bg); color: var(--text-primary); opacity: 1 !important;
}
.quiz-option.is-wrong { border-color: var(--danger); background: var(--danger-bg); color: var(--text-primary); opacity: 1 !important; }
.quiz-option.quiz-shake { animation: quizShake .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes quizShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

.quiz-explain {
    font-size: .84rem; line-height: 1.55; margin: 0; padding: .7rem .9rem; border-radius: 10px;
    background: rgba(80, 210, 193, .06); color: var(--text-secondary);
}
.quiz-explain.is-correct { background: var(--success-bg); }
.quiz-explain.is-wrong { background: var(--danger-bg); }

.quiz-next {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--gradient-brand); border: none; border-radius: var(--radius-pill);
    padding: .6rem 1.2rem; color: #04302b; font-weight: 700; font-size: .84rem;
    cursor: pointer; transition: transform .15s, opacity .15s;
}
.quiz-next:hover { opacity: .9; }

.quiz-result { text-align: center; padding: 1.1rem 1rem; }
.quiz-result-score {
    font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700; color: var(--primary); line-height: 1;
}
.quiz-result-score span { font-size: 1.2rem; color: var(--text-tertiary); font-weight: 400; }
.quiz-result-text { font-size: .88rem; color: var(--text-secondary); margin: .6rem 0 0; }
.quiz-result-great .quiz-result-score { color: var(--primary); }
.quiz-result-good .quiz-result-score { color: var(--accent); }
.quiz-result-retry .quiz-result-score { color: var(--text-secondary); }

/* ── Finish: the destination at the end of the path ───────────────────────── */
.path-finish {
    position: relative;
    text-align: center;
    margin-top: 3rem;
    padding: 2.2rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}
.path-finish-node {
    width: 56px; height: 56px; border-radius: 50%;
    margin: 0 auto 1.1rem;
    background: var(--bg-secondary); border: 1.5px solid var(--border-subtle);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, border-color .2s;
}
.path-finish-node svg { width: 24px; height: 24px; stroke: var(--text-tertiary); transition: stroke .2s; }
.lyx-path.is-complete .path-finish-node { background: rgba(80, 210, 193, .1); border-color: var(--primary); }
.lyx-path.is-complete .path-finish-node svg { stroke: var(--primary); }
.lyx-path.is-complete .path-finish { border-color: var(--border-focus); }
.path-finish-body h2 { margin: 0 0 .4rem; }
.path-finish-body p { font-size: .9rem; color: var(--text-tertiary); margin: 0 auto 1.1rem; max-width: 46ch; }
.lyx-path.is-complete .path-finish-body p { color: var(--text-secondary); }
.path-finish-body .lyx-guide-btns { justify-content: center !important; }

.path-confetti { position: absolute; left: 50%; top: 54px; width: 0; height: 0; pointer-events: none; }
.path-confetti i {
    position: absolute; left: 0; top: 0; width: 6px; height: 10px; opacity: 0;
    background: var(--primary); border-radius: 1px;
}
.path-confetti.is-firing i { animation: pathConfetti .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.path-confetti i:nth-child(3n)   { background: var(--accent); }
.path-confetti i:nth-child(5n)   { background: #fff; }
@keyframes pathConfetti {
    0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--cx, 40px), var(--cy, -60px)) rotate(var(--cr, 200deg)); }
}

/* ── Article floating bar (_roadmap_bar.html) ────────────────────────────── */
.path-bar {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 90; width: min(640px, calc(100% - 32px));
    display: flex; align-items: center; gap: 1rem;
    background: rgba(8, 22, 22, .92);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius-pill);
    padding: .7rem .8rem .7rem 1.2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
[data-theme="light"] .path-bar { background: rgba(255, 255, 255, .96); }
.path-bar-info { flex: 1; min-width: 0; font-size: .82rem; color: var(--text-secondary); }
.path-bar-info a { color: var(--text-tertiary); text-decoration: none; }
.path-bar-info a:hover { color: var(--primary); }
.path-bar-title { display: block; color: var(--text-primary); font-weight: 600; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-bar-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.path-bar-next {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--gradient-brand); border: none; border-radius: var(--radius-pill);
    padding: .55rem 1.1rem; color: #04302b; font-weight: 700; font-size: .82rem;
    cursor: pointer; white-space: nowrap; transition: transform .15s, opacity .15s;
}
.path-bar-next:hover { transform: translateY(-1px); opacity: .92; }
.path-bar-close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: .4rem; line-height: 0; }
.path-bar-close:hover { color: var(--text-primary); }
body.has-path-bar { padding-bottom: 76px; }
@media print { .path-bar { display: none; } }
@media (max-width: 560px) {
    .path-bar { bottom: 10px; padding: .6rem .6rem .6rem 1rem; }
    .path-bar-title { max-width: 140px; }
}

@media (max-width: 480px) {
    .path-step-time, .path-step-up-next-tag, .quiz-count-badge { flex: 0 0 100%; margin-left: 2.7rem; margin-top: -.15rem; }
    .quiz-body, .quiz-status { margin-left: 0; }
    .quiz-result-score { font-size: 2rem; }
    .path-stage, .path-stage + .path-stage { margin-bottom: 2.25rem; padding-top: 2.25rem; }
}

/* ── Reduced motion: silence the choreography-specific bits the global
   transition-duration:.01ms rule in main.css doesn't fully cover
   (transition-delay stagger, looping animations). ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .path-step.js-pre-reveal { transition-delay: 0ms !important; }
    .path-step.is-up-next .path-check { animation: none; }
    .path-confetti.is-firing i { animation: none; opacity: 0; }
    .quiz-option.quiz-shake { animation: none; }
    .quiz-dot { transition: none; }
}