.lesson-chart-canvas { position:relative; }
.lesson-axis { font-size:11px; fill:#657283; }
.lesson-end-score { fill:#3157d8; font-size:13px; font-weight:800; paint-order:stroke; stroke:white; stroke-width:4px; }
.lesson-hit-zone { fill:transparent; pointer-events:all; cursor:pointer; outline:none; }
.lesson-hit-zone:focus-visible { fill:rgba(62,104,244,.07); stroke:#3e68f4; stroke-width:1px; }
.lesson-chart .parent-chart-line { stroke-width:2.5px; vector-effect:non-scaling-stroke; }
.lesson-chart .parent-chart-dot { stroke-width:1.5px; vector-effect:non-scaling-stroke; }
.lesson-chart .parent-chart-dot.is-selected { fill:#3e68f4; stroke:#1d3690; stroke-width:3px; }
.lesson-event-connector { stroke:#a9b9e9; stroke-width:1.25px; stroke-dasharray:3 4; stroke-linecap:round; opacity:.8; pointer-events:none; vector-effect:non-scaling-stroke; }
.lesson-event-connector[hidden] { display:none; }
.lesson-event-connector.is-selected { stroke:#6f88dc; opacity:1; }
.lesson-chart-events { position:absolute; inset:0 0 auto; height:46px; }
.lesson-event { position:absolute; top:3px; white-space:nowrap; font:11px 'Segoe UI',sans-serif; color:#526274; background:#f2f5fa; border:1px solid #dae2ed; border-radius:7px; padding:5px 7px; cursor:pointer; }
.lesson-event:focus-visible { outline:2px solid #3e68f4; }
.lesson-x-mobile { display:none; }
.lesson-chart-controls { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; color:#596575; }
.lesson-chart-controls label { white-space:nowrap; }
.lesson-chart-controls input { min-width:30px; width:100%; accent-color:#3e68f4; }
.lesson-chart-controls button { flex:0 0 36px; min-height:36px; border:1px solid #dce4ff; border-radius:8px; background:#f3f6ff; color:#3157d8; cursor:pointer; }
.lesson-tooltip-slot { min-height:145px; padding-top:12px; }
.lesson-tooltip { padding:12px 14px; border:1px solid #dce4ff; border-radius:12px; background:#f7f9ff; font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.lesson-tooltip p { margin:5px 0 0; }
.lesson-tooltip-slot .parent-section-note { text-align:left; max-width:none; }
.parent-topic-row { flex-wrap:wrap; }
.parent-topic-status { white-space:normal; }
@media(max-width:650px) {
 .lesson-x-desktop { display:none; } .lesson-x-mobile { display:block; }
 .lesson-axis { font-size:28px; } .lesson-end-score { font-size:28px; }
 .lesson-event { font-size:10px; padding:4px 5px; }
 .lesson-chart-canvas { padding-top:18px; }
 .lesson-chart-controls { flex-wrap:wrap; gap:6px; }
 .lesson-chart-controls label { flex:1; }
 .lesson-chart-controls input { flex:1 1 100%; order:2; min-height:32px; }
 .lesson-tooltip-slot { min-height:170px; }
}