/* The lesson journey (stages.mjs): the stage bar across the top and the one-line trail.
   The lesson keeps the whole width; both components stay compact on a phone. */
main.rb-course.division-module-page { display: block !important; grid-template-columns: none !important; }
main.rb-course > .division-module-nav { display: none !important; }
main.rb-course > .rb-stage { max-width: 1120px; margin: 0 auto; }

/* ---------- stage bar ---------- */
main.rb-course .rb-stagebar { container-type: inline-size; max-width: 1120px; margin: 0 auto 22px; }
main.rb-course .rb-stagebar ol { position: relative; list-style: none; margin: 0; padding: 10px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; border-radius: 30px; background: #ffffff; border: 1px solid #efe9f7; box-shadow: 0 12px 32px rgba(60, 40, 90, .07); }
main.rb-course .rb-stagebar ol::before { content: ''; position: absolute; left: 7%; right: 7%; top: 50%; border-top: 3px dashed #e6def3; z-index: 0; }
main.rb-course .rb-stagebar li { position: relative; z-index: 1; animation: rbs-in .45s ease both; animation-delay: calc(var(--k) * 60ms); }
main.rb-course .rb-stagebar button { position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 22px; border: 2px solid transparent; background: #ffffff; text-align: left; font: inherit; color: #23202a; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
main.rb-course .rb-stagebar button:hover { transform: translateY(-2px); border-color: #e6def3; box-shadow: 0 8px 18px rgba(60, 40, 90, .08); }
main.rb-course .rb-stagebar .rbs-art { --rbs-c: var(--rb-dominant); flex: none; width: 46px; height: 46px; transition: transform .25s ease; }
main.rb-course .rb-stagebar button:hover .rbs-art { transform: rotate(-6deg) scale(1.06); }
main.rb-course .rb-stagebar .rbs-text { display: grid; min-width: 0; line-height: 1.1; }
main.rb-course .rb-stagebar .rbs-text small { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--rb-dominant); }
main.rb-course .rb-stagebar .rbs-text strong { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
main.rb-course .rb-stagebar .rbs-text em { font-style: normal; font-size: 12px; font-weight: 700; color: #8f889c; }
main.rb-course .rb-stagebar li.is-current button { background: var(--rb-support); border-color: var(--rb-dominant); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(60, 40, 90, .12); }
main.rb-course .rb-stagebar li.is-current .rbs-art { animation: rbs-bob 2.6s ease-in-out infinite; }
main.rb-course .rb-stagebar li.is-current .rbs-text em { color: var(--rb-deep); }
main.rb-course .rb-stagebar .rbs-tick { position: absolute; top: -7px; right: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #18a058; color: #ffffff; font-size: 12px; font-weight: 900; box-shadow: 0 0 0 3px #ffffff; }
main.rb-course .rb-stagebar .rbs-spark { transform-origin: 50px 14px; animation: rbs-twinkle 2.4s ease-in-out infinite; }
main.rb-course .rb-stagebar .rbs-bubble { animation: rbs-rise 2.2s ease-in infinite; }
main.rb-course .rb-stagebar .rbs-b2 { animation-delay: .7s; }
main.rb-course .rb-stagebar .rbs-b3 { animation-delay: 1.3s; }
main.rb-course .rb-stagebar .rbs-heart { transform-box: fill-box; transform-origin: center; animation: rbs-beat 1.8s ease-in-out infinite; }
main.rb-course .rb-stagebar .rbs-stamp { transform-box: fill-box; transform-origin: center; }
main.rb-course .rb-stagebar li.is-current .rbs-stamp { animation: rbs-stamp 2.4s ease-in-out infinite; }
/* medium: the verb hides except on the current stage */
@container (max-width: 980px) { main.rb-course .rb-stagebar li:not(.is-current) .rbs-text em { display: none; } main.rb-course .rb-stagebar .rbs-art { width: 38px; height: 38px; } }
/* narrow: one scrolling row, illustrations above the names */
@container (max-width: 760px) {
  main.rb-course .rb-stagebar ol { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  main.rb-course .rb-stagebar li { scroll-snap-align: center; }
  main.rb-course .rb-stagebar button { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; }
  main.rb-course .rb-stagebar .rbs-text strong { font-size: 13px; }
  main.rb-course .rb-stagebar .rbs-text em { display: none; }
}

/* ---------- trail ---------- */
main.rb-course .rb-trail { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; padding: 12px 18px; border-radius: 26px; background: #ffffff; border: 1px solid #efe9f7; box-shadow: 0 8px 22px rgba(60, 40, 90, .05); }
main.rb-course .rb-trail__road { position: relative; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 6px 4px; }
main.rb-course .rb-trail__track, main.rb-course .rb-trail__fill { position: absolute; left: 18px; top: 50%; height: 6px; margin-top: -3px; border-radius: 6px; }
main.rb-course .rb-trail__track { right: 18px; background: #efe9f7; }
main.rb-course .rb-trail__fill { width: calc((100% - 36px) * var(--fill) / 100); background: linear-gradient(90deg, #b6f400, var(--rb-dominant)); transition: width .5s ease; }
main.rb-course .rb-trail ol { position: relative; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: max-content; width: 100%; }
main.rb-course .rb-trail button { display: grid; place-items: center; width: 30px; height: 30px; min-height: 0 !important; padding: 0; border-radius: 50%; border: 2px solid #e2daef; background: #ffffff; color: #8f889c; font: 800 12px/1 var(--font-body, system-ui); cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
main.rb-course .rb-trail button:hover { transform: scale(1.15); border-color: var(--rb-dominant); color: var(--rb-deep); }
main.rb-course .rb-trail li.is-done button { background: #eaf8c8; border-color: #c3e88a; color: #3f6b00; font-size: 14px; font-weight: 900; }
main.rb-course .rb-trail li.is-current button { width: 48px; height: 48px; border: 0; background: var(--rb-dominant); color: #ffffff; font-size: 16px; font-weight: 900; box-shadow: 0 0 0 6px var(--rb-support), 0 8px 18px rgba(60, 40, 90, .22); animation: rbs-pulse 2.4s ease-in-out infinite; }
main.rb-course .rb-trail__count { flex: none; display: flex; align-items: baseline; gap: 6px; margin: 0; }
main.rb-course .rb-trail__count strong { font-size: 32px; font-weight: 900; letter-spacing: -.03em; color: var(--rb-dominant); font-variant-numeric: tabular-nums; }
main.rb-course .rb-trail__count span { font-size: 14px; font-weight: 800; color: #8f889c; }
@media (max-width: 560px) { main.rb-course .rb-trail { gap: 10px; padding: 10px 12px; } main.rb-course .rb-trail__count strong { font-size: 24px; } }

@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); } }
@keyframes rbs-pulse { 0%, 100% { box-shadow: 0 0 0 6px var(--rb-support), 0 8px 18px rgba(60, 40, 90, .22); } 50% { box-shadow: 0 0 0 11px var(--rb-support), 0 8px 18px rgba(60, 40, 90, .22); } }
@media (prefers-reduced-motion: reduce) { main.rb-course .rb-stagebar *, main.rb-course .rb-trail * { animation: none !important; } }

/* phone: the trail becomes a segmented bar that always fits; the stage bar shows its six pictures */
main.rb-course .rb-trail { container-type: inline-size; }
@container (max-width: 520px) {
  main.rb-course .rb-trail__track, main.rb-course .rb-trail__fill { display: none; }
  main.rb-course .rb-trail__road { overflow: visible; padding: 4px 0; }
  main.rb-course .rb-trail ol { min-width: 0; gap: 3px; }
  main.rb-course .rb-trail li { flex: 1 1 0; min-width: 0; }
  main.rb-course .rb-trail button, main.rb-course .rb-trail li.is-done button, main.rb-course .rb-trail li.is-current button { width: 100%; height: 10px; min-height: 0 !important; border: 0; border-radius: 6px; font-size: 0; background: #efe9f7; box-shadow: none; animation: none; }
  main.rb-course .rb-trail li.is-done button { background: #b6e05a; }
  main.rb-course .rb-trail li.is-current button { height: 18px; background: var(--rb-dominant); }
}
@container (max-width: 560px) {
  main.rb-course .rb-stagebar ol { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 8px; gap: 4px; }
  main.rb-course .rb-stagebar button { padding: 8px 2px; border-radius: 16px; }
  main.rb-course .rb-stagebar .rbs-text { display: none; }
  main.rb-course .rb-stagebar .rbs-art { width: 36px; height: 36px; }
  main.rb-course .rb-stagebar .rbs-tick { width: 18px; height: 18px; font-size: 10px; top: -5px; right: -2px; }
}
/* medium widths: picture above the name so names never get cut */
@container (max-width: 1040px) { main.rb-course .rb-stagebar button { flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; } main.rb-course .rb-stagebar .rbs-text strong { font-size: 13px; overflow: visible; } main.rb-course .rb-stagebar .rbs-text em { display: none; } }