/* Journey-only composition; shared tokens and al-btn own the design primitives. */
.al-lj{max-width:1120px;margin:0 auto;padding:40px 24px 80px;color:var(--al-color-text-ink);line-height:1.7}
.al-lj *{box-sizing:border-box}
.al-lj [hidden]{display:none!important}
.al-lj h1{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:8px 0 20px}
.al-lj h2{font-size:clamp(23px,3vw,30px);line-height:1.25;margin:12px 0 20px}
.al-lj h1,.al-lj h2{scroll-margin-top:calc(var(--al-header-h,64px) + 40px)}
.al-lj h3{font-size:18px;line-height:1.4;margin:24px 0 6px}
.al-lj p{margin:0 0 18px}
.al-lj a{color:var(--al-color-moss)}
.al-lj a.al-btn--primary{color:var(--al-color-text-inverse)}
.al-lj button,.al-lj a{touch-action:manipulation}
.al-lj :focus-visible{outline:3px solid var(--al-color-border-focus);outline-offset:4px}
.al-lj-intro{max-width:720px;margin-bottom:36px}
.al-lj-layout{display:grid;grid-template-columns:minmax(0,650px) minmax(220px,1fr);gap:36px;align-items:start}
.al-lj-side{position:sticky;top:calc(var(--al-header-h,64px) + 20px);max-height:calc(100dvh - var(--al-header-h,64px) - 40px);overflow-y:auto;border:1px solid var(--al-color-border-default);border-radius:var(--al-radius-panel);padding:24px}
.al-lj-side progress{width:100%;accent-color:var(--al-color-moss)}
.al-lj-side ol{padding-left:22px;margin:20px 0}
.al-lj-side li{margin-bottom:10px}
.al-lj-side label{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin-top:24px}
.al-lj-side input{margin-top:7px}
.al-lj-device{margin-top:22px;font-size:14px}
.al-lj-device summary{cursor:pointer;color:var(--al-color-moss);padding:6px 0}
.al-lj-stage{scroll-margin-top:calc(var(--al-header-h,64px) + 20px);margin-bottom:32px}
.al-lj-stage>header{background:var(--lj-stage,var(--al-color-deep-moss));color:var(--al-color-text-inverse);border-radius:var(--al-radius-panel);padding:24px 28px}
.al-lj-stage>header h2{color:inherit;margin:6px 0 8px}
.al-lj-stage>header p{margin:0;font-size:14px}
.al-lj-path{list-style:none;padding:28px 0 32px;margin:0;position:relative;isolation:isolate}
.al-lj-path>svg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.al-lj-path>svg path{fill:none;stroke:var(--al-color-border-strong);stroke-width:2;stroke-dasharray:5 7;vector-effect:non-scaling-stroke}
.al-lj-path li{min-height:156px;display:flex;justify-content:center;margin:0}
.al-lj-path li:nth-of-type(4n+1){padding-right:24%}
.al-lj-path li:nth-of-type(4n+2){padding-left:24%}
.al-lj-path li:nth-of-type(4n+3){padding-right:24%}
.al-lj-path li:nth-of-type(4n){padding-left:24%}
.al-lj-path li:last-child{padding-left:0;padding-right:0}
.al-lj-node{width:176px;display:flex;align-items:center;flex-direction:column;text-align:center;font-weight:600;line-height:1.4;gap:10px;text-decoration:none!important;color:var(--al-color-text-ink)!important}
.al-lj-node small{font-size:13px;color:var(--al-color-text-muted);font-weight:400}
.al-lj-node>span:not(.al-lj-disc),.al-lj-node>small{background:var(--al-color-surface-card);padding:2px 4px}
.al-lj-disc{width:78px;height:78px;display:grid;place-items:center;border:5px solid var(--al-color-border-default);border-radius:50%;background:var(--al-color-surface-subtle);font-size:25px;color:var(--al-color-text-muted);flex-shrink:0}
a.al-lj-node .al-lj-disc{background:var(--al-color-moss);color:white;border-color:var(--al-color-soft-aqua)}
.al-lj-node[aria-current="step"] .al-lj-disc{outline:3px solid var(--al-color-moss);outline-offset:4px}
.al-lj-station{max-width:760px;margin:0 auto}
.al-lj-nav{display:flex;gap:16px;justify-content:space-between;align-items:center;margin-bottom:28px;font-size:14px}
.al-lj-station progress{display:block;width:100%;height:7px;accent-color:var(--al-color-moss);margin:18px 0 32px}
.al-lj-phase{color:var(--al-color-text-muted);font-size:14px;margin-bottom:10px!important}
.al-lj-prose{font-size:17px;line-height:1.8}
.al-lj-prose dl{margin:24px 0}
.al-lj-prose dt{font-weight:600;margin-top:20px}
.al-lj-prose dd{margin:4px 0 16px;color:var(--al-color-text-muted)}
.al-lj-prose ol{padding-left:24px;margin:24px 0}
.al-lj-prose li{padding-left:6px;margin-bottom:20px}
.al-lj-prose li strong{display:block}
.al-lj-note{border-left:3px solid var(--al-color-moss);padding-left:18px;margin:28px 0!important;color:var(--al-color-text-muted)}
.al-lj-options{display:grid;gap:12px;margin:24px 0}
/* Explicit scoped states prevent theme button hover/focus colors leaking into answers. */
#alLearningJourney button.al-lj-option{--lj-answer-bg:var(--al-color-surface-card);--lj-answer-border:var(--al-color-border-control);font:inherit;text-align:left;border:2px solid var(--lj-answer-border);background:var(--lj-answer-bg);color:var(--al-color-text-ink);border-radius:var(--al-radius-control);min-height:52px;padding:14px 16px;cursor:pointer;width:100%;line-height:1.6;box-shadow:none;opacity:1;text-shadow:none}
#alLearningJourney button.al-lj-option:is(:hover,:focus,:active){background:var(--lj-answer-bg);color:var(--al-color-text-ink);border-color:var(--lj-answer-border);box-shadow:none}
@media(hover:hover){#alLearningJourney button.al-lj-option:not(:disabled):hover{--lj-answer-border:var(--al-color-moss);outline:1px solid var(--al-color-moss);outline-offset:1px}}
#alLearningJourney button.al-lj-option:focus-visible{outline:3px solid var(--al-color-border-focus);outline-offset:3px}
#alLearningJourney button.al-lj-option[aria-pressed="true"]{--lj-answer-border:var(--al-color-moss);--lj-answer-bg:var(--al-color-success-soft)}
#alLearningJourney button.al-lj-option.is-correct{--lj-answer-border:var(--al-color-success);--lj-answer-bg:var(--al-color-success-soft)}
#alLearningJourney button.al-lj-option.is-incorrect{--lj-answer-border:var(--al-color-danger);--lj-answer-bg:var(--al-color-danger-soft)}
#alLearningJourney button.al-lj-option:disabled{cursor:default}
.al-lj-answer-state{display:block;font-size:14px;font-weight:600;margin-top:6px;color:var(--al-color-success-text)}
.is-incorrect .al-lj-answer-state{color:var(--al-color-danger-text)}
.al-lj-feedback{margin:22px 0;padding:16px 18px;border-left:3px solid var(--al-color-moss);background:var(--al-color-success-soft)}
.al-lj-feedback.is-retry{border-color:var(--al-color-danger);background:var(--al-color-danger-soft);color:var(--al-color-danger-text)}
.al-lj-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid var(--al-color-border-default)}
.al-lj-order-number{display:inline-block;min-width:1.4em;margin-right:8px;font-weight:700}
.al-lj-complete{max-width:720px;margin:30px auto}
.al-lj-deeper{margin-top:40px;padding-top:24px;border-top:1px solid var(--al-color-border-default)}
#alLJStatus{max-width:760px;margin:24px auto;color:var(--al-color-text-muted)}
@media(max-width:760px){.al-lj{padding:28px 16px 56px}.al-lj-layout{display:flex;flex-direction:column;gap:24px}.al-lj-side{position:static;max-height:none;overflow:visible;order:-1;width:100%;padding:18px}.al-lj-side nav{display:none}.al-lj-map{width:100%}.al-lj-node{width:156px}.al-lj-stage>header{padding:20px}.al-lj-prose{font-size:16px}.al-lj-nav{align-items:flex-start}.al-lj-actions .al-btn{min-height:44px;white-space:normal}.al-lj-path li{min-height:162px}}
@media(prefers-reduced-motion:reduce){.al-lj *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Distinct restrained stage accents; text/status labels remain authoritative. */
.al-lj [data-stage="S01"]{--lj-stage:#183f2d}
.al-lj [data-stage="S02"]{--lj-stage:#315c70}
.al-lj [data-stage="S03"]{--lj-stage:#695627}
.al-lj [data-stage="S04"]{--lj-stage:#3f6159}
.al-lj [data-stage="S05"]{--lj-stage:#4e6335}
.al-lj [data-stage="S06"]{--lj-stage:#70523f}
.al-lj [data-stage="S07"]{--lj-stage:#65506b}
.al-lj [data-stage="S08"]{--lj-stage:#35596b}
.al-lj [data-stage="S09"]{--lj-stage:#675d48}
.al-lj [data-stage="S10"]{--lj-stage:#3e4769}
.al-lj-stage .al-lj-disc{border-color:color-mix(in srgb,var(--lj-stage) 30%,white);background:color-mix(in srgb,var(--lj-stage) 8%,white)}
.al-lj-stage a.al-lj-node .al-lj-disc{background:var(--lj-stage);color:white}
.al-lj-stage .al-lj-node[aria-current="step"] .al-lj-disc{outline-color:var(--lj-stage)}
.al-lj-retention{margin-top:28px;padding-top:16px;border-top:1px solid var(--al-color-border-default)}
.al-lj-retention h3{margin-top:0}
.al-lj-retention p{font-size:14px}

/* Lesson pages are a viewport workspace, with just the teaching pane scrolling. */
html:has(#alLearningJourney.is-lesson),body:has(#alLearningJourney.is-lesson){overflow:hidden}
#alLearningJourney.is-lesson{position:fixed;inset:var(--lj-site-top,64px) 0 0;z-index:40;max-width:none;width:auto;margin:0;padding:0;background:var(--al-color-surface-card);display:grid;grid-template-rows:minmax(0,1fr) auto}
.is-lesson #alLJView{min-height:0;height:100%}
#alLearningJourney .al-lj-frame{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:100%;max-width:850px;height:100%;min-height:0;margin:0 auto;padding:0}
.al-lj-frame-head{padding:18px 32px 12px;border-bottom:1px solid var(--al-color-border-default);background:var(--al-color-surface-card)}
.al-lj-frame-head .al-lj-nav{margin:0 0 10px}
.al-lj-frame-head h1{font-size:clamp(22px,3vw,30px);margin:0 0 12px;line-height:1.2}
.al-lj-frame-head progress{margin:0;height:6px}
.al-lj-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:24px 32px 32px;scroll-behavior:auto}
.al-lj-scroll h2{scroll-margin:16px}
#alLearningJourney .al-lj-frame>.al-lj-actions{position:static;margin:0;padding:14px 32px max(14px,env(safe-area-inset-bottom,0px));min-height:76px;background:var(--al-color-surface-card);box-shadow:none;border-top:1px solid var(--al-color-border-default)}
.is-lesson #alLJStatus:empty{display:none}
.is-lesson #alLJStatus:not(:empty){padding:8px 24px;margin:0 auto;max-height:20dvh;overflow:auto;background:var(--al-color-surface-subtle);width:100%;font-size:14px}
body:has(#alLearningJourney.is-lesson) #ast-scroll-top{display:none!important}
body:has(#alLearningJourney.is-lesson) .al-global-footer-shell,body:has(#alLearningJourney.is-lesson) #colophon{display:none}
/* Use the shared ghost tokens even when theme button focus/hover rules apply. */
#alLearningJourney .al-btn--ghost{background:var(--al-btn-bg);color:var(--al-btn-color);border-color:var(--al-btn-border);box-shadow:none}
#alLearningJourney .al-btn--ghost:is(:hover,:focus){background:var(--al-btn-bg-hover);color:var(--al-btn-color);border-color:var(--al-btn-border-hover);box-shadow:none}
#alLearningJourney .al-btn--ghost:active{background:var(--al-btn-bg-active);color:var(--al-btn-color)}
.al-lj-multi-hint{display:flex;flex-wrap:wrap;gap:6px 20px;padding:12px 0;border-block:1px solid var(--al-color-border-default);color:var(--al-color-deep-moss);font-size:15px}
.al-lj-multi-hint span{color:var(--al-color-text-muted)}
#alLearningJourney .is-multiple .al-lj-option{position:relative;padding-left:50px}
.al-lj-checkbox{position:absolute;left:16px;top:17px;width:20px;height:20px;border:2px solid var(--al-color-border-control);border-radius:3px;display:grid;place-items:center;line-height:1;font-size:16px;font-weight:700;color:var(--al-color-text-inverse)}
[aria-pressed="true"] .al-lj-checkbox{background:var(--al-color-moss);border-color:var(--al-color-moss)}
.al-lj-celebrate{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--al-color-success-soft);color:var(--al-color-moss);font-size:30px;margin:0 0 18px}
.al-lj-milestone{font-weight:600;color:var(--al-color-moss)}
.al-lj-complete .al-lj-deeper{margin-top:24px;padding:20px 0;border-block:1px solid var(--al-color-border-default)}
.al-lj-complete .al-lj-deeper h3{margin:0 0 8px}
.al-lj-complete .al-lj-deeper p{margin-bottom:8px}
.al-lj-complete .al-lj-deeper a{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.al-lj-complete .al-lj-retention{border:0;margin-top:20px;padding-top:0}
@media(max-width:760px){
 .al-lj-frame-head{padding:12px 16px 10px}
 .al-lj-frame-head .al-lj-nav{font-size:13px;gap:8px}
 .al-lj-frame-head h1{font-size:22px;margin-bottom:10px}
 .al-lj-scroll{padding:18px 16px 24px}
 #alLearningJourney .al-lj-frame>.al-lj-actions{padding-inline:16px;gap:12px}
 .al-lj-frame>.al-lj-actions>a:not(.al-btn){font-size:14px}
}
@media(max-height:500px){.al-lj-frame-head{padding-block:6px}.al-lj-frame-head .al-lj-nav{margin-bottom:4px}.al-lj-frame-head h1{font-size:18px;margin-bottom:6px}.al-lj-frame-head progress{height:4px}#alLearningJourney .al-lj-frame>.al-lj-actions{min-height:58px;padding-block:7px}}