/* One learning journey UI for every course (assets/journey.mjs reshapes the rendered page).
   Same look as the rebuilt courses (assets/rebuilt/stages.css), coloured by the subject. */
main.tgo-journey-page { display: block !important; grid-template-columns: none !important; }
main.tgo-journey-page > :not(.tgo-stagebar):not(.division-module-bar) { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
main.tgo-journey-page > .division-module-bar { display: none !important; }

/* ---------- stage bar ---------- */
nav.division-module-nav.tgo-stagebar { position: relative; container-type: inline-size; display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; gap: 8px; width: auto !important; max-width: 1120px; height: auto !important; margin: 0 auto 22px !important; padding: 10px !important; border-radius: 30px !important; background: #ffffff !important; border: 1px solid #efe9f7 !important; box-shadow: 0 12px 32px rgba(60, 40, 90, .07) !important; position: relative !important; top: auto !important; inset: auto !important; }
nav.tgo-stagebar::before { content: ''; position: absolute; left: 7%; right: 7%; top: 50%; border-top: 3px dashed #e6def3; z-index: 0; }
nav.tgo-stagebar > button { position: relative; z-index: 1; display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 10px; width: 100% !important; min-height: 0 !important; height: 100%; margin: 0 !important; padding: 10px 12px !important; border-radius: 22px !important; border: 2px solid transparent !important; background: #ffffff !important; box-shadow: none !important; color: #23202a !important; text-align: left; font: inherit; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; animation: rbs-in .45s ease both; animation-delay: calc(var(--k, 0) * 60ms); }
nav.tgo-stagebar > button::before, nav.tgo-stagebar > button::after { display: none !important; }
nav.tgo-stagebar > button:hover { transform: translateY(-2px); border-color: #e6def3 !important; box-shadow: 0 8px 18px rgba(60, 40, 90, .08) !important; }
nav.tgo-stagebar .rbs-art { --rbs-c: var(--subject-dominant, #8b5cf6); flex: none; width: 46px; height: 46px; transition: transform .25s ease; }
nav.tgo-stagebar > button:hover .rbs-art { transform: rotate(-6deg) scale(1.06); }
nav.tgo-stagebar .rbs-text { display: grid !important; min-width: 0; line-height: 1.1; background: none !important; }
nav.tgo-stagebar .rbs-text small { font-size: 11px !important; font-weight: 900; letter-spacing: .1em; color: var(--subject-dominant, #8b5cf6) !important; }
nav.tgo-stagebar .rbs-text strong { font-size: 15px !important; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #23202a !important; }
nav.tgo-stagebar .rbs-text em { font-style: normal; font-size: 12px !important; font-weight: 700; color: #8f889c !important; }
nav.tgo-stagebar > button:is(.is-current, [aria-current="page"]) { background: var(--subject-support, #f2ebff) !important; border-color: var(--subject-dominant, #8b5cf6) !important; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(60, 40, 90, .12) !important; }
nav.tgo-stagebar > button:is(.is-current, [aria-current="page"]) .rbs-art { animation: rbs-bob 2.6s ease-in-out infinite; }
nav.tgo-stagebar .rbs-spark { transform-origin: 50px 14px; animation: rbs-twinkle 2.4s ease-in-out infinite; }
nav.tgo-stagebar .rbs-bubble { animation: rbs-rise 2.2s ease-in infinite; }
nav.tgo-stagebar .rbs-b2 { animation-delay: .7s; } nav.tgo-stagebar .rbs-b3 { animation-delay: 1.3s; }
nav.tgo-stagebar .rbs-heart { transform-box: fill-box; transform-origin: center; animation: rbs-beat 1.8s ease-in-out infinite; }
nav.tgo-stagebar .rbs-stamp { transform-box: fill-box; transform-origin: center; }
nav.tgo-stagebar > button:is(.is-current, [aria-current="page"]) .rbs-stamp { animation: rbs-stamp 2.4s ease-in-out infinite; }
@container (max-width: 980px) { nav.tgo-stagebar > button:not(.is-current):not([aria-current="page"]) .rbs-text em { display: none; } nav.tgo-stagebar .rbs-art { width: 38px; height: 38px; } }
@container (max-width: 760px) { nav.tgo-stagebar > button { flex-direction: column !important; text-align: center; gap: 6px; padding: 10px 4px !important; } nav.tgo-stagebar .rbs-text strong { font-size: 13px !important; } nav.tgo-stagebar .rbs-text em { display: none; } }
@container (max-width: 560px) { nav.division-module-nav.tgo-stagebar { gap: 4px; padding: 8px !important; } nav.tgo-stagebar .rbs-text { display: none !important; } nav.tgo-stagebar .rbs-art { width: 36px; height: 36px; } nav.tgo-stagebar > button { padding: 8px 2px !important; border-radius: 16px !important; } }

/* ---------- trail (lesson cards, Lab questions, memory cards) ---------- */
.tgo-trail { container-type: inline-size; display: flex !important; align-items: center; gap: 18px; margin: 0 0 20px !important; padding: 12px 18px !important; border-radius: 26px !important; background: #ffffff !important; border: 1px solid #efe9f7 !important; box-shadow: 0 8px 22px rgba(60, 40, 90, .05) !important; }
.tgo-trail ol { position: relative; flex: 1; min-width: 0; list-style: none; margin: 0 !important; padding: 6px 4px !important; display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-between; gap: 6px !important; overflow-x: auto; scrollbar-width: none; background: linear-gradient(90deg, #b6f400, var(--subject-dominant, #8b5cf6)) left center / calc(var(--fill, 0) * 1%) 6px no-repeat, linear-gradient(#efe9f7, #efe9f7) center / calc(100% - 36px) 6px no-repeat !important; }
.tgo-trail li { flex: none; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.tgo-trail li::before, .tgo-trail li::after { display: none !important; }
.tgo-trail li button { display: grid !important; place-items: center; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; border: 2px solid #e2daef !important; background: #ffffff !important; box-shadow: none !important; color: #8f889c !important; font: 800 12px/1 var(--font-body, system-ui) !important; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.tgo-trail li button * { font-size: inherit !important; color: inherit !important; background: none !important; }
.tgo-trail li button:hover { transform: scale(1.15); border-color: var(--subject-dominant, #8b5cf6) !important; }
.tgo-trail li:is(.is-done, .is-visited) button { background: #eaf8c8 !important; border-color: #c3e88a !important; color: #3f6b00 !important; font-weight: 900 !important; }
.tgo-trail li.is-current button, .tgo-trail li button[aria-current] { width: 48px !important; height: 48px !important; border: 0 !important; background: var(--subject-dominant, #8b5cf6) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 900 !important; box-shadow: 0 0 0 6px var(--subject-support, #f2ebff), 0 8px 18px rgba(60, 40, 90, .22) !important; }
.tgo-trail > p { flex: none; display: flex !important; align-items: baseline; gap: 6px; margin: 0 !important; }
.tgo-trail > p strong { font-size: 32px !important; font-weight: 900; letter-spacing: -.03em; color: var(--subject-dominant, #8b5cf6) !important; }
.tgo-trail > p span { font-size: 14px !important; font-weight: 800; color: #8f889c !important; }
@container (max-width: 520px) {
  .tgo-trail ol { overflow: visible; gap: 3px !important; background: none !important; padding: 4px 0 !important; }
  .tgo-trail li { flex: 1 1 0; min-width: 0; }
  .tgo-trail li button, .tgo-trail li.is-current button, .tgo-trail li button[aria-current], .tgo-trail li:is(.is-done, .is-visited) button { width: 100% !important; height: 10px !important; border: 0 !important; border-radius: 6px !important; font-size: 0 !important; background: #efe9f7 !important; box-shadow: none !important; }
  .tgo-trail li:is(.is-done, .is-visited) button { background: #b6e05a !important; }
  .tgo-trail li.is-current button, .tgo-trail li button[aria-current] { height: 18px !important; background: var(--subject-dominant, #8b5cf6) !important; }
}

@keyframes rbs-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rbs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) rotate(-3deg); } }
@keyframes rbs-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.6) rotate(45deg); opacity: .6; } }
@keyframes rbs-rise { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes rbs-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes rbs-stamp { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(4deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { nav.tgo-stagebar *, .tgo-trail * { animation: none !important; } }

/* The shared lesson shell (assets/lesson-shell.css, verifier-locked) lays the stage menu out as a
   left column on wide screens. Once a page carries the journey bar, the bar sits on top instead. */
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main.tgo-journey-page:has(> .division-module-nav) { display: block !important; grid-template-columns: none !important; }
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main.tgo-journey-page > .division-module-nav.tgo-stagebar { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; grid-template-rows: none !important; width: auto !important; max-width: 1120px; margin: 0 auto 22px !important; }
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main.tgo-journey-page > .division-module-nav.tgo-stagebar::before { top: 50% !important; bottom: auto !important; left: 7% !important; right: 7% !important; width: auto !important; height: 0 !important; border-radius: 0 !important; background: none !important; border-top: 3px dashed #e6def3 !important; }
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main.tgo-journey-page > .division-module-nav.tgo-stagebar button > span { white-space: nowrap; }
body.final-brand.lesson-on:has(.app-shell-navigation--lesson) #app > main.tgo-journey-page > :not(.division-module-nav):not(.division-module-bar) { max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
body.final-brand.lesson-on #app > main.tgo-journey-page > nav.division-module-nav.tgo-stagebar > button { background: #ffffff !important; border-color: transparent !important; color: #23202a !important; text-transform: none !important; }
body.final-brand.lesson-on #app > main.tgo-journey-page > nav.division-module-nav.tgo-stagebar > button:is(.is-current, [aria-current="page"]) { background: var(--subject-support, #f2ebff) !important; border-color: var(--subject-dominant, #8b5cf6) !important; }
body.final-brand.lesson-on #app > main.tgo-journey-page > nav.division-module-nav.tgo-stagebar > button .rbs-text strong { text-transform: none !important; letter-spacing: 0 !important; }
.tgo-trail li button * { border: 0 !important; box-shadow: none !important; outline: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; position: static !important; transform: none !important; border-radius: 0 !important; display: inline !important; }
.tgo-trail li button::before, .tgo-trail li button::after { display: none !important; }
@container (max-width: 1040px) { nav.tgo-stagebar > button { flex-direction: column !important; text-align: center; gap: 4px; padding: 8px 4px !important; } nav.tgo-stagebar .rbs-text strong { font-size: 13px !important; overflow: visible; } nav.tgo-stagebar .rbs-text em { display: none; } }