/* Classroom layout: exercise canvas with a right-hand learning rail. */
.classroom-app .class-header{background:#7740cb;height:58px;border:0}
.classroom-app .class-header-inner{max-width:1320px;margin:auto;height:58px;padding:0 20px}
.classroom-app .class-exit{height:58px;background:#6734b6}
.classroom-app .class-logo strong{color:#ddc5ff}
.classroom-app .class-main,.classroom-app.menu-collapsed .class-main,.live-classroom .class-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;margin:58px auto 0;max-width:1320px;padding:28px 20px 50px;min-height:calc(100vh - 58px);background:#f5f2f9}
.classroom-app{background:#f5f2f9!important}
.classroom-app .class-content{min-width:0}
.classroom-app .class-context,.live-classroom .class-context{display:block;position:sticky;top:78px;max-height:calc(100vh - 98px);overflow:auto;min-width:0;align-self:start;scrollbar-width:thin}
.classroom-app .lesson-sidebar{position:static;display:flex;width:auto;padding:0;margin-top:16px;background:#fff;color:#5b4f69;border:1px solid #e8dff1;border-radius:16px;overflow:hidden;box-shadow:0 5px 22px #4a236305}
.classroom-app .lesson-tabs{background:#fff;border-radius:0;border-bottom:1px solid #e6d9f2;padding:0;gap:0;display:flex}
.classroom-app .lesson-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;padding:16px 8px;border-radius:0;background:#fff;color:#79678e;font-size:11px;border-bottom:2px solid transparent}
.classroom-app .lesson-tabs button[aria-selected=true]{background:#faf5ff;color:#7138b6;border-bottom-color:#9c59e7}.classroom-app .lesson-tabs .ui-icon{width:19px;height:19px}
.classroom-app .lesson-nav-caption{color:#9b8aa9;font-size:10px;padding:19px 20px 8px;letter-spacing:1.5px;margin:0}
.classroom-app .lesson-step-nav{padding:0 12px}
.classroom-app .step-link{color:#71627e;font-size:13px;padding:10px 10px;line-height:1.5;min-height:39px;gap:13px;position:relative;border-left:0;font-weight:500}
.classroom-app .step-link .step-dot{background:#d7cadd;width:7px;height:7px;flex-shrink:0;z-index:1}
.classroom-app .step-link:not(:last-child):after{content:'';position:absolute;left:13px;top:22px;bottom:-18px;width:1px;background:#e5daee}
.classroom-app .step-link[aria-current=step]{background:#f1e5ff;color:#7932bb;border-left:0;font-weight:700}
.classroom-app .step-link[aria-current=step] .step-dot{background:#a358e9;box-shadow:0 0 0 4px #e8d2ff}
.classroom-app .step-link:hover{background:#effdf5;color:#346c4f;box-shadow:inset 0 0 0 1px #65e6a670}
.classroom-app .step-done{margin-left:auto}.classroom-app .lesson-sidebar-bottom{color:#a38dac;padding:20px;font-size:10px}
.classroom-app .context-card{padding:19px 20px;background:#eee7f6;border:1px dashed #cbb8df;border-radius:14px;box-shadow:none}
.classroom-app .context-card h2{font-size:17px;margin:9px 0}.classroom-app .context-card>p{font-size:12px;margin-bottom:12px}.classroom-app .context-progress{border:0;margin:0;padding:0}.classroom-app .context-progress>span{font-size:20px}.classroom-app .context-progress small{font-size:11px}
.classroom-app .context-link{font-size:11px;padding:10px 12px;display:flex;gap:8px}.classroom-app .context-link .ui-icon{width:16px;height:16px}
.classroom-app .exercise-card{border-radius:16px;border-color:#e9e0f1;box-shadow:0 6px 26px #562b7905}
.classroom-app .lesson-breadcrumb{margin-bottom:15px}.classroom-app .exercise-body h2{font-size:24px;line-height:1.35}
.classroom-app .lesson-picker{top:51px;width:355px;max-height:540px;padding:6px;overflow:auto;border:1px solid #e4d7ee;border-radius:12px}
.classroom-app .lesson-picker>a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;border-bottom:0}.picker-thumbnail{width:53px;height:46px;object-fit:cover;border-radius:7px;flex-shrink:0}.lesson-picker>a>span{min-width:0}.lesson-picker strong{display:block;font-size:12px;font-weight:600;white-space:normal;line-height:1.5}.lesson-picker small{display:block;font-size:10px;color:#8a7a97;margin-top:4px}
.classroom-app.menu-collapsed .class-main{grid-template-columns:minmax(0,1fr)}.classroom-app.menu-collapsed .class-context{display:none}
.dialogue-stage{background:#eee3fc;margin:10px 30px 24px;border:1px solid #dcc5f5;border-radius:18px;padding:20px}
.dialogue-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.dialogue-tools label{display:flex;align-items:center;gap:10px;font-size:12px;color:#6f5487}.dialogue-tools select{max-width:130px;padding:8px;font-size:12px}.dialogue-tools .button{font-size:11px;padding:10px 12px}
.dialogue-lines{display:grid;gap:17px}.dialogue-line{max-width:82%;justify-self:start}.dialogue-right{justify-self:end;text-align:right}.dialogue-speaker{font-size:12px;color:#8354ab;margin:0 10px 5px;display:block}.dialogue-bubble{border-radius:16px 16px 16px 4px;background:#fff;padding:14px 18px;color:#382b44;box-shadow:0 3px 10px #69379508;font-size:17px;line-height:1.6;text-align:left}.dialogue-right .dialogue-bubble{background:#f7fffb;border-radius:16px 16px 4px 16px;border:1px solid #d7efdf}.dialogue-reveal{background:#f2e8ff;border:1px dashed #bba1d7;color:#754d98;padding:7px 14px;border-radius:8px;cursor:pointer}.dialogue-hint{font-size:11px;color:#7c6590;margin:20px 0 0}
.photo-strip{position:relative}.photo-numbers{display:flex;position:absolute;bottom:9px;left:0;width:100%;pointer-events:none}.photo-numbers b{margin-left:10px;width:calc(33.333% - 10px);font-size:22px;color:#fff;text-shadow:0 1px 5px #000}
.word-bank{display:flex;flex-wrap:wrap;gap:10px;padding:0 30px 20px}.word-bank button{border:1px solid #ddccec;border-radius:10px;background:#f6efff;color:#633c84;padding:12px 16px;font-weight:600;cursor:grab}.word-bank button[aria-pressed=true]{background:#7c3aed;color:#fff;border-color:#7c3aed}.word-bank button:hover{border-color:#65e6a6;box-shadow:0 0 0 3px #65e6a62b}
.place-word{font-size:11px;color:#7949a0;background:none;border:0;text-decoration:underline;text-underline-offset:3px;padding:8px 0;cursor:pointer}.answer-row:has(.place-word){background:#faf7ff;border:1px solid #e5d7f0;border-radius:12px;padding:14px;gap:8px}.answer-row.correct{border-color:#59b47d}.answer-row.incorrect{border-color:#d97777}
.classroom-app .exercise-body{overflow-x:auto}.classroom-app .exercise-body table{font-size:13px;min-width:430px}.classroom-app .vocab-details .prose{overflow-x:auto}
@media(max-width:1100px) and (min-width:801px){.classroom-app .class-main,.live-classroom .class-main{grid-template-columns:minmax(0,1fr) 265px;gap:18px;padding-left:18px;padding-right:18px}.dialogue-stage{margin-left:20px;margin-right:20px}}
@media(max-width:800px){.classroom-app .class-main,.classroom-app.menu-collapsed .class-main,.live-classroom .class-main{display:block;margin:58px 0 0;padding:20px 16px;max-width:none}.classroom-app .class-context,.classroom-app.menu-collapsed .class-context,.live-classroom .class-context{display:block;position:static;max-height:none;overflow:visible}.classroom-app .class-context>.context-card,.classroom-app .class-context>.context-link{display:none}.classroom-app .lesson-sidebar,.classroom-app.menu-collapsed .lesson-sidebar{display:none;position:fixed;top:58px;right:0;left:auto;bottom:0;width:min(320px,88vw);margin:0;border-radius:0;z-index:75;overflow-y:auto;padding-bottom:25px}.classroom-app.menu-open .lesson-sidebar,.classroom-app.menu-open.menu-collapsed .lesson-sidebar{display:flex}.classroom-app #lesson-menu-backdrop{position:fixed;inset:58px 0 0;z-index:70;background:#2f193a66}.classroom-app .class-header-inner{padding:0 12px}.classroom-app .lesson-switcher{min-width:0;max-width:calc(100vw - 145px)}.classroom-app .class-header-actions{gap:0}.classroom-app .lesson-picker{position:fixed;left:12px;right:12px;top:62px;width:auto;max-height:70vh}.classroom-app .class-logo{display:none}.classroom-app .live-heading{margin-top:24px}.dialogue-stage{margin:6px 18px 20px;padding:16px}.dialogue-line{max-width:94%}.dialogue-bubble{font-size:15px;padding:12px 14px}.dialogue-tools{align-items:flex-start;flex-direction:column;gap:12px}.word-bank{padding:0 18px 18px}.word-bank button{font-size:12px;padding:10px}.classroom-app .exercise-body h2{font-size:21px}.classroom-app .class-exit span{display:none}.classroom-app .class-exit{padding:10px}.classroom-app .lesson-header-actions{margin-left:auto}}
.classroom-app .lesson-tabs .ui-icon{filter:none;opacity:.6}.dialogue-tools label{white-space:nowrap;flex-shrink:0;width:auto}.dialogue-tools{margin-bottom:16px}.dialogue-lines{gap:10px}.dialogue-bubble{padding:10px 16px;line-height:1.5}.dialogue-speaker{margin-bottom:3px}.dialogue-hint{line-height:1.6}.classroom-app .exercise-body:has(+.dialogue-stage){padding-bottom:5px}.classroom-app .exercise-body:has(+.dialogue-stage) h2{margin:5px 0 12px}
@media(min-width:801px){.classroom-app.live-classroom.menu-collapsed .class-main{grid-template-columns:minmax(0,1fr) 300px}.classroom-app.live-classroom.menu-collapsed .class-context{display:block}.classroom-app.live-classroom.menu-collapsed .lesson-sidebar{display:none}}

/* Lesson sequences and progressive disclosure for read-aloud activities. */
.lesson-meta { color: #624787; font-size: .85rem; }
.lesson-prerequisite { display: block; font-size: .85rem; margin: 12px 0; color: #6d28d9; }
.teacher-notes { border-top: 1px solid #e8ddf7; margin-top: 14px; padding-top: 12px; }
.teacher-notes summary { cursor: pointer; color: #6d28d9; font-size: .85rem; }
.teacher-notes p { white-space: pre-line; font-size: .85rem; line-height: 1.6; }
.listening-script { margin-top: 24px; border: 1px solid #ddd0f2; border-radius: 16px; padding: 18px; background: #faf7ff; }
.listening-script summary { cursor: pointer; color: #6d28d9; font-weight: 600; }
.listening-script summary:hover { color: #256a4d; }
.vocabulary-table { overflow-x: auto; }
/* A draft is visually distinct and never writes learner progress. */
.classroom-app .preview-banner{margin-top:58px;padding:14px 24px;background:#e9fff1;color:#234632;text-align:center;border-bottom:1px solid #b5e5c7}
.classroom-app .preview-banner+.class-main{margin-top:0}