.ln-narration{margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--stroke,#dfe4eb);color:var(--text,#202f47)}
.ln-narration-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.ln-narration-heading strong{display:flex;align-items:center;gap:8px;font-size:15px}
.ln-narration svg{width:19px;height:19px;flex:none}
.ln-narration-heading>span{color:var(--muted,#5d6c83);font-size:12px;font-variant-numeric:tabular-nums}
.ln-narration-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ln-narration-controls button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:9px;border:0;border-radius:12px;background:var(--panel2,#edf1f6);color:inherit;cursor:pointer;font:inherit;font-size:14px;font-weight:650;touch-action:manipulation}
.ln-narration-controls .ln-narration-play{min-width:118px;padding-inline:15px;background:var(--dd-gold,#ffd17b);color:var(--dd-gold-ink,#202f47)}
.ln-narration-controls button:hover:not(:disabled){filter:brightness(.94)}
.ln-narration-controls button:disabled{opacity:.5;cursor:default}
.ln-narration-controls :is(button,select):focus-visible,.ln-narration-transcript summary:focus-visible{outline:3px solid var(--brand2,#327fba);outline-offset:3px}
.ln-narration-rate{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px}
.ln-narration-rate select{min-height:44px;max-width:85px;border:1px solid var(--stroke,#dfe4eb);border-radius:10px;padding:6px;background:var(--panel,#fff);color:inherit;font:inherit;font-size:13px}
.ln-narration-status{min-height:2.8em;margin:10px 0;color:var(--muted,#5d6c83);font-size:13px;line-height:1.45}
.ln-narration-status.is-error{color:var(--text,#202f47)}
.ln-narration-transcript summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:650;text-decoration:underline;text-underline-offset:3px}
.ln-narration-transcript summary::before{content:'+';font-size:18px;text-decoration:none}
.ln-narration-transcript[open] summary::before{content:'−'}
.ln-narration-transcript p{max-width:70ch;font-size:15px;line-height:1.75;margin:14px 0}
.ln-narration-transcript p.is-current{background:var(--panel2,#edf1f6);border-radius:8px;outline:5px solid var(--panel2,#edf1f6)}
.ln-narration+.ln-card{position:relative}
.ln-narration-focus{position:absolute;inset:0;z-index:3;pointer-events:none!important;overflow:visible;color:var(--dd-navy,#254671)}
.ln-narration-focus path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.7}
[data-theme="dark"] .ln-narration-focus{color:#ffd17b}
[data-theme="dark"] .ln-narration-controls .ln-narration-play{background:#ffd17b;color:#202f47}
@media(max-width:370px){.ln-narration-controls{gap:4px}.ln-narration-controls .ln-narration-play{min-width:103px}.ln-narration-rate{margin-left:0}.ln-narration-heading{align-items:flex-start}}
@media(forced-colors:active){.ln-narration-controls button{border:1px solid ButtonText}.ln-narration-focus{color:Highlight}.ln-narration-transcript p.is-current{outline:2px solid Highlight}}

/* The miniature belongs to the current lesson card. Its own row leaves
   the annotation-bound reading canvas at full width and free of overlays. */
.ln-card-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;margin-bottom:12px}
.ln-card-intro>.ln-card-label{flex:1;min-width:0;margin:0;overflow-wrap:anywhere}
.ln-card-teacher{flex:0 0 104px;width:104px;margin:0 0 0 auto;align-self:flex-end}
.ln-card-teacher mendeleyev-avatar{display:block;width:100%}
@media(max-width:480px){.ln-card-intro{gap:12px;margin-bottom:8px}.ln-card-teacher{flex-basis:92px;width:92px}}

/* Recording controls and pointer live outside the annotation canvas. */
.ln-audio-timeline{display:flex;align-items:center;gap:12px;margin:12px 0 2px}
.ln-audio-timeline input{min-width:0;flex:1;accent-color:var(--dd-gold,#e4aa3d);height:28px;cursor:pointer}
.ln-audio-timeline span{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted,#5d6c83)}
.ln-narration--recorded[data-state="thinking"] .ln-narration-status{font-weight:650;color:var(--text,#202f47)}
.ln-narration-focus .ln-narration-pointer{stroke-width:3.5;opacity:1;stroke:var(--brand2,#327fba)}
.ln-narration-focus .ln-narration-dot{fill:#ffd17b80;stroke:var(--brand2,#327fba);stroke-width:2}
@media(prefers-reduced-motion:reduce){.ln-narration-pointer{transition:none}}

/* Keep the teacher in a separate sticky topic row. The reading canvas keeps
   its full width; cue scrolling reserves this row above the selected text. */
.ln-card--recorded>.ln-card-intro{position:sticky;top:var(--narration-dock-top,72px);z-index:5;isolation:isolate;background:inherit;padding:8px 0 10px;border-bottom:1px solid var(--stroke,#dfe4eb);margin-bottom:16px}
.ln-card--recorded>.ln-card-intro>.ln-card-teacher{flex-basis:84px;width:84px;align-self:center}
.ln-card-topic{flex:1;min-width:0;overflow-wrap:anywhere}
.ln-card-topic>.ln-card-label{margin:0 0 12px}
.ln-narration-compact{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;max-width:100%;border:1px solid var(--stroke,#dfe4eb);border-radius:11px;padding:8px 11px;background:var(--panel2,#edf1f6);color:var(--text,#202f47);font:inherit;font-size:13px;font-weight:650;cursor:pointer;touch-action:manipulation}
.ln-narration-compact svg{width:17px;height:17px;flex:none}
.ln-narration-compact:focus-visible{outline:3px solid var(--brand2,#327fba);outline-offset:3px}
.ln-narration-compact:disabled{opacity:.5;cursor:default}
.ln-card--recorded [data-narration-block]{scroll-margin-top:var(--narration-focus-top,260px);scroll-margin-bottom:96px}
@media(max-width:480px){.ln-card--recorded>.ln-card-intro>.ln-card-teacher{flex-basis:72px;width:72px}.ln-card--recorded>.ln-card-intro{gap:12px;padding-block:6px 8px;margin-bottom:12px}}