/* Unified Learn route: one level navigator, one real lesson list. */
#page-learn { --canal-forest:#123a34; --canal-green:#155f52; --canal-gold:#bd9654; --canal-sage:#e7ece7; --canal-paper:#fffdf8; }
/* Repeated landmarks give each level an identity without relying on colour alone. */
#page-learn :is([data-canal-stop=A1],.canal-nav [data-canal-jump=A1]) { --level-ink:#315e4a; --level-tint:#edf3ed; --level-line:#b7ccb9; }
#page-learn :is([data-canal-stop=A2],.canal-nav [data-canal-jump=A2]) { --level-ink:#7a5a25; --level-tint:#f7f0e2; --level-line:#d8c49e; }
#page-learn :is([data-canal-stop=B1],.canal-nav [data-canal-jump=B1]) { --level-ink:#435e71; --level-tint:#edf2f5; --level-line:#b5c9d4; }
#page-learn :is([data-canal-stop=B2],.canal-nav [data-canal-jump=B2]) { --level-ink:#81523d; --level-tint:#f6eee7; --level-line:#d7bca9; }
#page-learn .canal-landmark { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; flex:none; }
#page-learn .canal-calm { display:flex; align-items:center; gap:9px; min-height:44px; padding:9px 12px; background:#f0f4ef; border:1px solid #cbd8ce; border-radius:13px; color:#315a49; font-size:12px; font-weight:700; }
#page-learn .canal-calm > svg { width:17px; height:17px; stroke:currentColor; stroke-width:2; fill:none; }
#page-learn .canal-calm i { width:28px; height:17px; padding:3px; background:#94a69a; border-radius:20px; flex:none; }
#page-learn .canal-calm i::after { content:''; display:block; width:11px; height:11px; background:white; border-radius:50%; }
#page-learn .canal-calm[aria-checked=true] i { background:var(--canal-green); }
#page-learn .canal-calm[aria-checked=true] i::after { margin-inline-start:11px; }
#page-learn .canal-calm:disabled { cursor:default; opacity:.8; }
#page-learn .canal-scene-art { width:100%; height:auto; display:block; overflow:visible; }
#page-learn .canal-scene-art .ink { fill:none; stroke:var(--canal-forest); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
#page-learn .canal-scene-art .water { fill:#e6eee7; }
#page-learn .canal-scene-art .warm { fill:#eee0c9; }
#page-learn .canal-scene-art .brick { fill:#ece0d6; }
#page-learn .canal-scene-art .light { fill:#c7973e; }
#page-learn .canal-scene-art :is(.wheel,.signal) { transform-box:fill-box; transform-origin:center; }
#page-learn .canal-scene-art .trace { stroke-dasharray:1; stroke-dashoffset:0; }
#page-learn .canal-play { position:absolute; inset-inline-end:0; bottom:0; display:grid; place-items:center; width:44px; height:44px; border:1px solid #b5cbbd; border-radius:50%; color:var(--canal-green); background:var(--canal-paper); box-shadow:0 3px 8px #123a3405; }
#page-learn .canal-play svg { width:21px; height:21px; stroke:currentColor; stroke-width:1.5; fill:none; }
#page-learn .canal-play[aria-pressed=true] { background:var(--canal-paper); color:var(--canal-green); border-color:var(--canal-gold); }
#page-learn .canal-play:disabled { opacity:.5; cursor:default; }
#page-learn .lesson-trail .trail-bank { fill:none; stroke:#e5ebe4; stroke-width:12; stroke-linecap:round; }
#page-learn .lesson-trail .trail-earned { fill:none; stroke:#54816a; stroke-width:2.5; stroke-linecap:round; }
#page-learn .lesson-row:active .lesson-node { background:#cfdfd5; }
#page-learn .canal-journey { margin:20px 0 26px; color:var(--canal-forest); }
#page-learn #canal-journey-summary { display:flex; align-items:center; gap:12px; padding:8px 2px 14px; }
#page-learn #canal-journey-title { flex:1; font-family:var(--font-body,system-ui,sans-serif); font-size:18px; line-height:1.3; margin:0; }
#page-learn .canal-summary-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#e4ebe4; }
#page-learn .canal-summary-icon svg { width:19px; height:19px; }
#page-learn .canal-summary-ring { display:grid; place-items:center; padding:3px; border-radius:50%; background:conic-gradient(var(--canal-green) var(--canal-earned),#dfe7de 0); width:42px; height:42px; flex:none; }
#page-learn .canal-summary-ring b { display:grid; place-items:center; background:var(--canal-paper); border-radius:50%; width:100%; height:100%; font-size:12px; }
#page-learn .canal-nav { position:sticky; top:76px; z-index:5; display:flex; gap:5px; padding:6px; border:1px solid #cbd8cf; border-radius:16px; background:var(--canal-paper); box-shadow:0 4px 12px #123a3409; }
#page-learn .canal-nav button { flex:1; min-width:0; display:grid; grid-template-columns:auto auto; gap:5px 7px; align-items:center; justify-content:center; padding:10px 5px; min-height:49px; background:var(--level-tint); color:var(--level-ink); border-radius:11px; font-size:13px; border:1px solid transparent; }
#page-learn .canal-nav button[aria-pressed=true] { border-color:var(--level-ink); box-shadow:inset 0 -3px var(--level-ink); }
#page-learn .canal-nav i { grid-column:1/-1; width:100%; height:3px; border-radius:4px; background:linear-gradient(to right,var(--level-ink) var(--canal-earned),var(--level-line) 0); }
#page-learn .canal-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:10px 1px 4px; }
#page-learn .canal-calm { background:transparent; border-color:transparent; padding-inline:4px; font-size:11px; }
#page-learn .canal-map { position:relative; isolation:isolate; padding:0; }
#page-learn .canal-river { position:absolute; inset:0; height:100%; width:100%; pointer-events:none; z-index:-1; overflow:visible; }
#page-learn .river-bank { stroke:#e2e9df; stroke-width:12; stroke-linecap:round; fill:none; }
#page-learn .river-line { stroke:#b5c9ba; stroke-width:1.5; fill:none; }
#page-learn .canal-stop { position:relative; padding:24px 0 14px; scroll-margin-top:146px; }
#page-learn .canal-marker { position:absolute; inset-inline-start:0; top:42px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--level-tint); color:var(--level-ink); border:1px solid var(--level-line); font-size:10px; font-weight:850; }
#page-learn .canal-stop.is-current .canal-marker { background:var(--canal-green); color:white; border-color:var(--canal-green); box-shadow:0 0 0 4px #f5f5ef; }
#page-learn .canal-marker { visibility:hidden; } /* The large level badge replaces this duplicate; retain rail geometry. */
#page-learn .canal-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 108px; gap:8px 16px; padding:22px; margin:0; border:1px solid var(--level-ink); border-radius:22px 22px 8px 8px; background:var(--level-ink); color:var(--canal-paper); min-width:0; }
#page-learn .canal-stop.is-selected .canal-card { box-shadow:0 5px 0 var(--level-line); }
#page-learn .canal-level-title { min-width:0; align-self:center; }
#page-learn .canal-level { display:inline-flex; align-items:center; gap:10px; padding:0; background:transparent; font-size:34px; line-height:1.1; font-weight:850; letter-spacing:-.035em; color:var(--canal-paper); }
#page-learn .canal-level .canal-landmark { width:26px; height:26px; }
#page-learn .canal-card h3 { font-family:var(--font-display,Georgia,serif); font-size:clamp(22px,3.3vw,28px); line-height:1.15; letter-spacing:-.02em; color:var(--canal-paper); margin:9px 0 7px; overflow-wrap:anywhere; }
#page-learn .canal-state { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:750; color:var(--canal-paper); }
#page-learn .canal-state svg { width:18px; height:18px; }
#page-learn .canal-scene { position:relative; width:100%; align-self:center; margin:0; padding:5px 2px 26px; border-radius:50% 50% 12px 12px; background:var(--canal-paper); }
#page-learn .canal-scene .canal-play { inset-inline-end:6px; bottom:5px; }
#page-learn .canal-play { width:36px; height:36px; }
#page-learn .canal-play::before { content:''; position:absolute; inset:-5px; }
#page-learn .canal-count { grid-column:1/-1; display:flex; justify-content:space-between; gap:10px; font-size:11px; line-height:1.4; color:var(--canal-paper); margin-top:9px; }
#page-learn .canal-count strong { color:var(--canal-paper); white-space:nowrap; }
#page-learn .canal-card progress { grid-column:1/-1; display:block; width:100%; height:5px; margin:1px 0 3px; border:0; border-radius:4px; background:#ffffff40; accent-color:#f3dab1; }
#page-learn .canal-card progress::-webkit-progress-bar { background:#ffffff40; border-radius:4px; }
#page-learn .canal-card progress::-webkit-progress-value { background:#f3dab1; border-radius:4px; }
#page-learn .canal-card progress::-moz-progress-bar { background:#f3dab1; border-radius:4px; }
#page-learn .canal-credit { grid-column:1/-1; font-size:11px; color:var(--canal-paper); }
#page-learn .canal-open-level { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:44px; margin-top:3px; padding:10px 12px; border:1px solid var(--level-line); border-radius:8px; background:transparent; font-size:12px; font-weight:750; color:var(--canal-paper); text-align:start; }
#page-learn .canal-open-level svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#page-learn .canal-open-level[aria-expanded=true] { background:var(--level-tint); color:var(--level-ink); }
#page-learn .canal-stage-lessons { padding-top:22px; padding-bottom:12px; }
#page-learn .canal-stage-lessons[hidden] { display:none; }
#page-learn .canal-stage-lessons .lesson-path { margin:0; padding:0; }
#page-learn .canal-stage-lessons .lesson-path-items { background:transparent; border-radius:0; }
#page-learn .canal-stage-lessons .lesson-trail :is(.trail-bank,.trail-line,.trail-earned) { display:none; }
#page-learn .canal-stage-lessons .curriculum-stage-header { grid-template-columns:26px minmax(0,1fr) auto; margin:24px 0 10px; padding:0 0 10px; gap:9px; border:0; border-radius:0; background:transparent; box-shadow:none; }
#page-learn .canal-stage-lessons .curriculum-stage-header:first-of-type { margin-top:0; }
#page-learn .canal-stage-lessons .curriculum-stage-header > span { width:26px; height:30px; border-radius:0; background:transparent; color:var(--level-ink); font-size:17px; }
#page-learn .canal-stage-lessons .curriculum-stage-header h3 { font-family:var(--font-body,system-ui,sans-serif); font-size:16px; line-height:1.35; margin:0; }
#page-learn .canal-stage-lessons .curriculum-stage-header small { display:none; }
#page-learn .canal-stage-lessons .curriculum-stage-header > strong { min-width:0; padding:0; color:var(--level-ink); background:none; font-size:11px; }
#page-learn .canal-stage-lessons .lesson-unit { margin:8px 0 12px; padding:5px 0 9px; border:0; border-bottom:1px solid var(--level-line); border-radius:0; background:transparent; box-shadow:none; }
#page-learn .canal-stage-lessons .lesson-unit > strong { font-size:10px; }
#page-learn .canal-stage-lessons .lesson-row { border-radius:12px; background:var(--canal-paper); }
#page-learn .canal-stage-lessons .lesson-row:not(.locked) { grid-template-columns:44px minmax(0,1fr) 28px; gap:10px; }
#page-learn .canal-stage-lessons .lesson-row:not(.locked) .lesson-node { width:44px; }
#page-learn .canal-stage-lessons .lesson-row.current:not(.locked) { background:#f0f7ed; border-inline-start:4px solid var(--canal-green); }
#page-learn .canal-stage-lessons .lesson-row.locked { background:#f1f4ef; border:1px solid #dce3df; }
#page-learn .lesson-open-cue { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:var(--canal-green); background:#e7efe9; }
#page-learn .lesson-open-cue svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#page-learn .lesson-row.current:not(.locked) .lesson-open-cue { color:white; background:var(--canal-green); }
#page-learn .canal-stage-lessons .path-navigation { margin-inline-start:36px; margin-block:6px 14px; }
#page-learn .canal-explanation { margin:8px 0 8px 36px; margin-inline:36px 0; color:#5c7060; font-size:12px; }
#page-learn .canal-explanation summary { min-height:44px; padding:12px 0; cursor:pointer; }
#page-learn .canal-explanation p { font-size:12px; line-height:1.6; }
#page-learn .canal-journey :is(button,summary):focus-visible { outline:3px solid #b58035; outline-offset:3px; }
#page-learn .canal-stop:focus { outline:none; }
#page-learn .canal-stop:focus-visible .canal-card { outline:3px solid #b58035; outline-offset:3px; }
#page-learn #learn-focus { padding:18px 20px; margin-bottom:8px; }
#page-learn #learn-focus h2 { font-size:23px; margin:14px 0; }
#page-learn #learn-focus > .learn-evidence { display:none; }
#page-learn #learn-focus > details { margin-top:12px; }
@media(max-width:360px) {
 #page-learn .canal-card { grid-template-columns:minmax(0,1fr) 84px; padding:18px; gap:8px 12px; }
 #page-learn .canal-card h3 { font-size:22px; }
 #page-learn .canal-stage-lessons .lesson-row:not(.locked) { grid-template-columns:36px minmax(0,1fr) 24px; gap:8px; }
 #page-learn .canal-stage-lessons .lesson-row:not(.locked) .lesson-node { width:36px; }
 #page-learn .lesson-open-cue { width:24px; height:24px; }
 #page-learn .canal-summary-icon { display:none; }
}
html.high-contrast #page-learn :is(.canal-card,.canal-nav,.canal-open-level) { border:2px solid currentColor; }
html[data-text-scale=extra-large] #page-learn .canal-count { flex-wrap:wrap; }
html[data-text-scale=extra-large] #page-learn .canal-card { grid-template-columns:minmax(0,1fr) 76px; }
@media(prefers-reduced-motion:no-preference) {
 html:not(.calm-mode) #page-learn .canal-play:active { transform:scale(.96); }
 html:not(.calm-mode) #page-learn .canal-open-level:active { background:var(--level-tint); color:var(--level-ink); }
}