/* Learning pages: the simulator's bank markup and style.css supply the track. */
body.learning-page { padding-bottom:0; scroll-padding-bottom:0; overflow-x:visible; --yellow:#ffd43b; }
.learning-page .content > .back-link { margin-bottom:18px; }
.learning-page .section { scroll-margin-top:150px; }
.learning-page h1 { overflow-wrap:anywhere; }
.diagram-rules ul { padding-left:1.2em; }
.glossary-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.glossary-index h2 { font-size:16px; margin:0 0 8px; }
.term-links,.related-terms { display:flex; flex-wrap:wrap; gap:8px; }
.term-links a,.related-terms a { display:inline-flex; align-items:center; min-height:44px; padding:5px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); text-decoration:none; }
.glossary-term h2 { flex-wrap:wrap; gap:12px; }
.glossary-term h2 small { color:var(--muted); font-size:13px; font-weight:400; }
.glossary-term .term-definition { font-size:18px; font-weight:700; color:#fff; }
.lesson-frames { display:grid; grid-template-columns:minmax(0,440px); gap:16px; margin:18px 0 10px; }
.lesson-frames.has-sequence { grid-template-columns:repeat(2,minmax(0,1fr)); }
.lesson-figure { margin:0; min-width:0; }
.lesson-figure .lesson-bank { container-type:inline-size; --lesson-rider-size:clamp(15px,5.5cqw,22px); width:100%; margin:0; --yellow:#f6cc00; --white:#fff; touch-action:auto; user-select:auto; border:0; }
.lesson-bank .rider { width:var(--lesson-rider-size); height:var(--lesson-rider-size); font-size:clamp(12px,4.2cqw,14px); border-width:1px; cursor:default; pointer-events:none; transition:none; }
.lesson-bank .bank-watermark { font-size:clamp(9px,2.8vw,18px); letter-spacing:1px; }
.lesson-direction { position:absolute; left:50%; transform:translateX(-50%); z-index:20; padding:1px 6px; border-radius:6px; background:#153825; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; line-height:1.6; }
.lesson-back { top:34%; }
.lesson-home { bottom:34%; }
.lesson-figure figcaption { margin-top:8px; font-size:13px; color:#d9e8f7; }
.learning-page .lesson-caption { font-size:14px; }
.related-terms { align-items:center; margin-top:16px; font-size:13px; }
.related-terms > span { color:var(--muted); }
.learning-page .term-source { font-size:12px; margin-top:16px; }
.learning-card { display:grid; gap:10px; padding:20px; border:1px solid #00b0ff; border-radius:14px; background:#123b68; text-decoration:none; color:#e6f3ff; }
.learning-card .label { justify-self:start; margin:0; }
.learning-card strong { font-size:23px; color:#fff; }
.learning-card b { color:#83d2ff; }
.learning-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.learning-plans h3 { margin:0; }
.learning-page a:focus-visible { outline:3px solid #00b0ff; outline-offset:3px; }
@media(max-width:720px) {
 .glossary-index { grid-template-columns:1fr; gap:14px; }
 .lesson-frames.has-sequence,.learning-plans { grid-template-columns:1fr; }
 .learning-page .section { scroll-margin-top:100px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.lesson-timing { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:20; padding:2px 6px; border-radius:5px; background:#153825; color:#fff; font-size:11px; font-weight:700; white-space:nowrap; }
.lesson-timing.is-red { background:#a51b1b; }

.lesson-finish-label { position:absolute; left:69.1466%; top:58%; transform:translateX(-50%); z-index:20; padding:1px 5px; background:#153825; color:#fff; border-radius:4px; font-size:11px; line-height:1.4; white-space:nowrap; }

/* One diameter between centers makes following markers touch at every bank width.
   Different lines/single riders have a visible gap; outward movement uses the same unit. */