/* A learner-facing picker. Completion keeps the same one-page deck. */
.lesson-step-menu { min-height:44px; padding:0 20px; border:1px solid #303033; border-radius:24px; background:#18181a; color:#f2f2f4; font:inherit; cursor:pointer; pointer-events:auto; }
.lesson-step-menu:disabled { opacity:.45; cursor:default; }
body:not(.lesson-started) .lesson-step-menu { display:none; }
.lesson-started .lesson-page-hint { display:none; }
.lesson-step-menu:focus-visible, .lesson-step-dialog button:focus-visible { outline:2px solid #49a5ff; outline-offset:3px; }
.lesson-step-dialog { width:min(36rem,calc(100vw - 24px)); max-height:calc(100dvh - 32px); box-sizing:border-box; padding:24px; color:#f2f2f4; background:#141416; border:1px solid #3a3a3d; border-radius:20px; overflow:auto; }
.lesson-step-dialog::backdrop { background:rgb(0 0 0 / .72); }
.lesson-step-dialog h2 { font-size:1.35rem; margin:0; }
.lesson-step-dialog .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lesson-step-dialog .player-icon { width:44px; height:44px; flex:none; }
#lesson-step-note, #lesson-step-status { color:#b8b8bf; font-size:14px; line-height:1.55; }
.lesson-step-group { padding:12px 0; border-top:1px solid #303033; }
.lesson-step-choice { width:100%; min-height:48px; padding:10px 12px; text-align:left; font:inherit; color:inherit; border:1px solid #424246; border-radius:10px; background:#222225; cursor:pointer; }
.lesson-step-choice[aria-current="step"] { border-color:#49a5ff; }
.lesson-step-choice:disabled { color:#99999f; cursor:default; background:#19191b; }
.lesson-clip-list { display:grid; gap:4px; margin-top:6px; }
.lesson-clip-choice { min-height:44px; padding:8px 12px; text-align:left; color:#c4c4cc; background:transparent; border:0; border-radius:8px; font:inherit; font-size:14px; cursor:pointer; }
.lesson-clip-choice:hover { background:#262629; }
html.lesson-review-unlocked [data-step] button:disabled { cursor:default; }
@media(max-width:480px) { .lesson-step-dialog { padding:16px; } }