/* Lesson page: a heading that places the lesson on its path, the article,
 * and an action rail (sticky beside the article on wide screens). Path
 * lessons carry their stage tone; other lessons use the accent colour. */
.lesson-head{display:grid;gap:10px;margin:8px 0 28px;padding-bottom:24px;border-bottom:1px solid var(--color-rule)}
.lesson-head h1{margin:0;max-width:30ch;font-size:clamp(26px,3.4vw,40px);line-height:1.2;letter-spacing:-.02em}
.lesson-lead{margin:0;max-width:70ch;color:var(--color-muted);font-size:15px;line-height:1.6}
.lesson-place{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:12px;color:var(--color-muted)}
.lesson-kind{padding:4px 10px;border-radius:99px;background:var(--tone-soft,var(--color-paper-2));color:var(--tone-text,var(--tone-edge,var(--color-ink)));font-weight:600}
.lesson-facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0}
.lesson-facts li{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-pill);background:var(--color-paper-2);font-size:12px;color:var(--color-ink)}
.lesson-facts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--color-muted)}
.lesson-facts .is-done{background:var(--tone-soft,var(--color-paper-2));color:var(--tone-text,var(--tone-edge,var(--color-ink)));font-weight:500}
.lesson-facts .is-done svg{color:inherit}

.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
.lesson-main{min-width:0}
.lesson-rail{position:sticky;top:calc(var(--sticky-top) + 20px);display:grid;gap:14px;padding:20px;border-radius:var(--radius-surface);background:var(--color-surface)}
.lesson-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;font-size:12px;color:var(--color-muted)}
.lesson-progress strong{color:var(--color-ink);font-variant-numeric:tabular-nums}
.lesson-progress progress{grid-column:1/-1;width:100%;height:8px;accent-color:var(--tone,var(--color-accent))}
.lesson-layout .lesson-rail .lesson-actions{display:grid;gap:8px;margin:0}
.lesson-layout .lesson-rail .lesson-actions form{margin:0}
.lesson-layout .lesson-rail .lesson-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0}
.lesson-layout .lesson-rail .lesson-actions .btn svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lesson-layout[class*=tone-] .lesson-actions .btn:not(.secondary):not(.success){background:var(--tone);border-color:var(--tone)}
.lesson-layout[class*=tone-] .lesson-actions .btn:not(.secondary):not(.success):hover{background:var(--tone-edge)}
.lesson-rail-hint{margin:0;font-size:12px;line-height:1.5;color:var(--color-muted)}

.lesson-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px 0 8px}
.lesson-pager-link{display:grid;gap:4px;min-width:0;padding:16px 20px;border-radius:var(--radius-control);border:1px solid var(--color-transparent);background:var(--color-surface);color:var(--color-ink);text-decoration:none}
.lesson-pager-link small{font-size:12px;color:var(--color-muted)}
.lesson-pager-link span{font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.lesson-pager-link:hover{border-color:var(--tone,var(--color-accent))}
.lesson-pager-link.is-next{grid-column:2;text-align:right}

@media (max-width:1023px){
 .lesson-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 .lesson-rail{position:static}
}
@media (max-width:600px){
 .lesson-head{margin-bottom:20px;padding-bottom:18px}
 .lesson-lead{font-size:14px}
 .lesson-pager{grid-template-columns:minmax(0,1fr)}
 .lesson-pager-link.is-next{grid-column:auto}
}