/* UX01: Keep the current lesson prominent and routine management quiet. */
:root { --app-header-height:78px; }
html { scroll-padding-top:calc(var(--app-header-height) + 20px); }
main:focus { outline:none; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; padding:12px 18px; border-radius:10px; background:var(--primary-deep); color:white; }
.skip-link:focus { top:12px; }
.app-footer { text-align:center; padding:24px 16px; font-size:13px; color:var(--ink-soft); }
.app-footer a { display:inline-block; padding:12px; color:inherit; text-underline-offset:4px; }
button,a,input,select,textarea,summary,[tabindex="0"] { scroll-margin-block:calc(var(--app-header-height) + 16px) 24px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
body:not([data-screen="role"]) .topbar { background:#fff; }
body:not([data-screen="role"]) .brand small { font-size:11px; letter-spacing:.03em; }
body:not([data-screen="role"]) main { padding-bottom:48px; }
body[data-screen="teacher-dashboard"] .classroom-heading { align-items:center; gap:24px; padding-bottom:24px; margin-bottom:0; border:0; }
.classroom-heading h1 { font-size:clamp(24px,3vw,34px); line-height:1.5; overflow-wrap:anywhere; }
.classroom-heading .ui-eyebrow { margin:0 0 6px; }
.classroom-heading p:last-child { font-size:14px; line-height:1.8; margin:8px 0 0; }
.classroom-heading>.ui-button { flex-shrink:0; min-height:50px; margin:0; padding:14px 22px; }
.classroom-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; padding:0 0 18px; margin:0 0 28px; border-bottom:1px solid var(--line); }
.classroom-nav a { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; padding:8px 0; color:var(--ink-soft); font-size:14px; font-weight:700; text-decoration:none; text-underline-offset:7px; }
.classroom-nav a:hover { color:var(--primary-deep); text-decoration:underline; }
.pending-count { display:inline-block; padding:3px 9px; border-radius:6px; background:var(--accent-wash); color:#805116; font-size:12px; white-space:nowrap; }
.classroom-section { min-width:0; scroll-margin-top:calc(var(--app-header-height) + 20px); }
.classroom-section:empty { display:none; }
.classroom-section h2 { font-size:22px; line-height:1.6; }
.classroom-section .dashboard-empty { padding:32px 24px; margin:0 0 24px; border:1px dashed #bed4d8; border-radius:16px; background:#f0f7f8; text-align:left; }
.classroom-section .dashboard-empty>.ui-icon { display:none; }
.classroom-section .dashboard-empty h2 { font-size:23px; margin:0 0 10px; }
.classroom-section .dashboard-empty p { font-size:14px; line-height:1.9; margin:0; }
.classroom-section .live-session { margin:24px 0; }
.classroom-management { margin:28px 0; border:1px solid var(--line); border-radius:16px; background:#fff; scroll-margin-top:calc(var(--app-header-height) + 20px); }
.classroom-management>summary { display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px; cursor:pointer; padding:20px 24px; font-size:16px; font-weight:700; list-style:none; }
.classroom-management>summary::-webkit-details-marker { display:none; }
.classroom-management>summary::after { content:'＋'; margin-left:auto; color:var(--primary); font-size:20px; }
.classroom-management[open]>summary::after { content:'−'; }
.classroom-management-meta { color:var(--ink-soft); font-size:13px; font-weight:400; }
.classroom-management-body { border-top:1px solid var(--line); padding:24px; }
.classroom-management-body .class-share { margin:0 0 20px; padding:20px; border-radius:12px; }
.classroom-management-body .pin-management { margin:0; padding:0; border:0; box-shadow:none; background:none; }
.classroom-management-body .pin-management h2 { font-size:18px; margin:0 0 12px; }
.classroom-management-body .pin-management>p { font-size:14px; line-height:1.8; }
.classroom-management-body .pin-management [role="status"]:empty { display:none; }
.classroom-history { margin-top:36px; border-top:1px solid var(--line); padding-top:24px; }
.classroom-history h2 { font-size:20px; margin:0 0 12px; }
.classroom-history .list-item { padding:18px 16px; margin:10px 0; border:1px solid var(--line); border-radius:12px; background:#fff; gap:12px; }
.classroom-history .list-item:hover { border-color:#99bfc4; }
.classroom-history .list-item .grow { min-width:0; overflow-wrap:anywhere; font-weight:700; }
.classroom-history-empty p { color:var(--ink-soft); font-size:14px; }
.prepared-lessons { margin:0 0 28px; }
.prepared-lessons>h2 { margin:0 0 8px; }
.prepared-lessons>.ui-small { font-size:14px; line-height:1.8; }
.prepared-lesson-card { border-left:4px solid var(--primary); padding:24px; }
.prepared-lesson-card h3 { font-size:21px; line-height:1.7; margin:12px 0; }
.prepared-lesson-card .lesson-plan-total { color:var(--primary); font-weight:700; margin:8px 0 12px; }
.prepared-lesson-card .lesson-live-controls { margin-top:20px; }
.prepared-lesson-card .lesson-live-controls button { min-height:48px; }
.prepared-lesson-card [role="status"]:empty { display:none; }
.lesson-library-dialog { box-sizing:border-box; width:min(720px,calc(100vw - 24px)); max-height:min(84vh,800px); padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--paper); color:var(--ink); overflow:auto; }
.lesson-library-dialog::backdrop { background:rgba(15,35,39,.5); }
.lesson-library-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.lesson-library-header h2 { margin:0; }
.lesson-library-controls { display:grid; grid-template-columns:2fr 1fr 1fr; gap:10px; margin:20px 0 12px; }
.lesson-library-controls input,.lesson-library-controls select { min-width:0; min-height:48px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.lesson-library-list { display:grid; gap:10px; min-width:0; }
.lesson-library-item { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.lesson-library-item h3 { font-size:18px; line-height:1.5; margin:10px 0 6px; overflow-wrap:anywhere; }
.lesson-library-item p { margin:6px 0; }
.lesson-library-item button { margin-top:8px; }
.lesson-library-activities { color:var(--ink-soft); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lesson-library-empty { padding:24px 12px; text-align:center; color:var(--ink-soft); }
.lesson-template-list { max-width:900px; margin:0 auto; }
.lesson-template-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.lesson-template-header h1 { margin:0; }
.lesson-template-search { box-sizing:border-box; width:100%; min-height:48px; margin:12px 0; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
.lesson-template-cards { display:grid; gap:12px; margin-bottom:20px; }
.lesson-template-card { padding:18px; }
.lesson-template-card h2 { margin:0 0 8px; font-size:20px; }
.lesson-template-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.lesson-builder { padding:4px 0 32px; scroll-margin-top:calc(var(--app-header-height) + 16px); }
.lesson-builder h1 { margin:8px 0 24px; }
.lesson-build-steps { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; gap:8px; margin:0 0 28px; counter-reset:none; }
.lesson-build-steps li { display:flex; align-items:center; gap:10px; border-bottom:3px solid var(--line); padding:12px 8px; font-size:14px; line-height:1.6; }
.build-step-number { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; background:#e8eff1; font-size:13px; font-weight:700; }
.lesson-build-steps [aria-current="step"] { border-color:var(--primary); color:var(--primary-deep); }
.lesson-build-steps [aria-current="step"] .build-step-number { background:var(--primary); color:#fff; }
.lesson-build-steps .is-complete { border-color:#aed3d3; color:var(--primary-deep); }
.lesson-builder>.card { border:1px solid var(--line); padding:28px; box-shadow:none; }
.lesson-builder>.card>h2 { margin:0 0 24px; font-size:24px; line-height:1.6; }
.lesson-builder label { line-height:1.7; }
.lesson-builder .ui-small { font-size:13px; line-height:1.8; }
.lesson-builder select,.lesson-builder textarea,.lesson-builder input[type="number"] { min-height:48px; font-size:16px; background:#fff; color:var(--ink); }
.lesson-builder .lesson-check { padding:6px 0; margin:14px 0; cursor:pointer; }
.lesson-check input { flex:none; accent-color:var(--primary); }
.lesson-build-nav { position:sticky; bottom:0; z-index:8; align-items:center; padding:16px 0 max(16px,env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--line); gap:16px; margin:24px 0 0; }
.lesson-build-nav button { min-height:48px; margin:0; }
.lesson-build-nav .ui-primary { min-width:180px; }
.lesson-builder .ui-form-error:empty,.video-question-mix [role="status"]:empty { display:none; }
.lesson-builder .lesson-check[hidden],.video-question-mix>[hidden] { display:none; }
.lesson-builder [role="alert"]:not(:empty) { padding:14px; background:#fff0eb; border-radius:10px; color:#8f352c; }
.pin-page>h1 { line-height:1.6; overflow-wrap:anywhere; }
.pin-page>p,.pin-page>div>p { font-size:14px; line-height:1.8; }
.pin-form { gap:16px; }
.pin-form label { font-size:15px; line-height:1.7; }
.pin-form input { letter-spacing:.25em; }
.pin-form select { font-size:16px; color:var(--ink); background:white; }
.pin-form .ui-form-error:empty { display:none; }
.pin-form .ui-form-error:not(:empty) { margin:0; border-radius:10px; padding:12px; background:#fff0eb; color:#8f352c; }
.pin-form [aria-invalid="true"] { border-color:#b34a3f; }
.pin-form>.ui-primary { width:100%; min-height:52px; }
.pin-nav { align-items:center; gap:8px; border-top:1px solid var(--line); padding-top:20px; }
.pin-nav p { width:100%; font-size:13px; color:var(--ink-soft); margin:4px 0; }
body[data-screen="watch"] .watch-workspace .watch-stage { top:calc(var(--app-header-height) + 12px); }
body[data-screen="watch"] .watch-workspace { scroll-margin-top:calc(var(--app-header-height) + 12px); }
body[data-student-watch="true"] .topbar { display:none; }
body[data-student-watch="true"] .watch-workspace .watch-stage { top:8px; }
body[data-student-watch="true"] .watch-workspace.has-question .watch-stage { top:auto; }
body[data-student-watch="true"] .watch-workspace { scroll-margin-top:8px; }
body[data-student-watch="true"] main { padding-top:12px; }
@media(max-width:680px) {
 .lesson-library-dialog { padding:18px; }
 .lesson-library-controls { grid-template-columns:1fr; }
 .lesson-library-item button { width:100%; }
 .lesson-template-actions button,.lesson-template-header button { width:100%; }
  body:not([data-screen="role"]) .topbar { gap:10px; padding:12px 16px; flex-wrap:wrap; }
  body:not([data-screen="role"]) .brand { font-size:14px; }
  body:not([data-screen="role"]) .brand small { font-size:10px; }
  body:not([data-screen="role"]) #topbar-right { margin-left:auto; }
  body:not([data-screen="role"]) #topbar-right button,body:not([data-screen="role"]) .account-menu summary { min-height:44px; display:inline-flex; align-items:center; font-size:12px; }
  body:not([data-screen="role"]) main { padding:24px 16px 40px; }
  body[data-screen="teacher-dashboard"] .classroom-heading { flex-direction:column; align-items:stretch; gap:18px; }
  .classroom-heading>.ui-button { width:100%; justify-content:center; }
  .classroom-heading p:last-child { font-size:14px; }
  .classroom-nav { gap:6px 18px; margin-bottom:24px; }
  .classroom-nav a { font-size:13px; min-height:44px; }
  .classroom-management>summary { padding:18px 16px; gap:8px; }
  .classroom-management-meta { order:3; flex-basis:100%; font-size:12px; }
  .classroom-management-body { padding:18px 16px; }
  .classroom-management-body .class-share { padding:16px; }
  .classroom-management-body .share-code { min-width:0; }
  .classroom-management-body .share-label span { font-size:12px; }
  .classroom-management-body .share-actions .ui-button { font-size:13px; min-height:44px; }
  .classroom-history .list-item { flex-wrap:wrap; }
  .classroom-history .list-item .grow { flex-basis:75%; }
  .prepared-lesson-card { padding:20px; }
  .prepared-lesson-card .lesson-live-controls { display:grid; grid-template-columns:1fr 1fr; }
  .prepared-lesson-card .lesson-live-controls button { font-size:14px; padding:12px; }
  .lesson-builder { padding:0 0 24px; }
  .lesson-builder h1 { font-size:27px; }
  .lesson-build-steps { gap:6px; }
  .lesson-build-steps li { flex-direction:column; align-items:flex-start; padding:10px 2px; font-size:12px; gap:8px; }
  .lesson-builder>.card { padding:20px 16px; }
  .lesson-builder>.card>h2 { font-size:21px; }
  .lesson-build-nav { gap:10px; }
  .lesson-build-nav button { flex:1; font-size:14px; padding:12px 8px; }
  .lesson-build-nav .ui-primary { min-width:0; }
  .pin-page { padding:24px 20px; }
  .pin-nav { display:grid; grid-template-columns:1fr; }
  .pin-nav button { width:100%; }
  .pin-controls { align-items:stretch; }
  .pin-controls button { flex:1 1 100%; }
  .pin-student-list li { gap:8px; }
  .pin-student-list li>span { flex-basis:100%; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
.class-open { width:100%; margin:18px 0 8px; justify-content:center; }
.teacher-workspace-top { margin:12px 0 24px; }
.teacher-workspace-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:5px; border:1px solid var(--line); border-radius:14px; background:#f3f8f7; }
.teacher-workspace-tab { min-height:48px; border:0; border-radius:10px; background:transparent; color:var(--ink-soft); font:inherit; font-weight:700; cursor:pointer; }
.teacher-workspace-tab[aria-current="page"] { background:#fff; color:var(--primary-deep); box-shadow:0 1px 6px #163e421a; }
.teacher-workspace-tab:focus-visible { outline:3px solid var(--primary); outline-offset:2px; }
.lesson-library.is-records .lesson-library-controls { grid-template-columns:2fr 1fr; }
.teacher-active-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding:12px 16px; border:1px solid #9dcac4; border-radius:12px; background:#e8f4f2; color:var(--primary-deep); font-weight:700; }
.teacher-active-banner span { overflow-wrap:anywhere; }
.teacher-active-banner button { flex:none; min-height:44px; }
.teacher-settings-card { display:grid; gap:12px; margin:16px 0; }
.teacher-settings-card h2,.teacher-settings-card p { margin:0; }
.teacher-settings-card .ui-button { justify-self:start; }
.classroom-extra-action { display:inline-block; margin-left:8px; }
.classroom-extra-action summary { cursor:pointer; color:var(--ink-soft); min-height:44px; padding:10px 0; }
.classroom-extra-action .ui-button { margin-top:8px; }
.prepared-lesson-activities { color:var(--ink-soft); }
.prepared-lesson-details { margin:8px 0 16px; }
.prepared-lesson-details summary { min-height:44px; padding:10px 0; color:var(--primary-deep); font-weight:700; cursor:pointer; }
.prepared-lesson-details p { margin:0 0 12px; color:var(--ink-soft); line-height:1.7; }
@media(max-width:680px) { .teacher-workspace-nav { gap:2px; padding:4px; }.teacher-workspace-tab { min-height:48px; font-size:14px; }.teacher-active-banner { align-items:stretch; flex-direction:column; }.teacher-active-banner button { width:100%; }.lesson-library.is-records .lesson-library-controls { grid-template-columns:1fr; } }
.class-card-settings { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.class-card-settings>summary { cursor:pointer; font-size:13px; color:var(--ink-soft); min-height:36px; padding:6px 0; }
.classroom-section .lesson-live { padding:24px; margin:20px 0; }
.classroom-section .lesson-live>h2 { font-size:24px; }
.lesson-live [role="status"]:empty { display:none; }
.lesson-confirmed-notice { margin:16px 0; padding:14px 16px; border:1px solid #9bc9b6; border-radius:12px; background:#edf8f1; color:#205a43; font-weight:700; line-height:1.7; }
.lesson-activity-page .ui-button[hidden] { display:none; }
.lesson-activity-page textarea[readonly] { background:#f7faf9; color:var(--ink); }
.lesson-review { margin:16px 0; }
.lesson-review-panel { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; border:0; overflow:auto; padding:20px max(20px,calc((100vw - 900px)/2)) 60px; background:var(--paper); color:var(--ink); }
.lesson-review-header { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; z-index:1; padding:16px 0; background:var(--paper); }
.lesson-review-header h2 { margin:0; font-size:22px; }
.lesson-review-media video,.lesson-review-media img { display:block; width:100%; max-height:48vh; object-fit:contain; background:#123; border-radius:12px; }
.lesson-review-demo-note { padding:28px; border-radius:12px; background:var(--primary-wash); }
.lesson-review-answers { display:grid; gap:10px; padding-left:24px; }
.lesson-review-answer { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; overflow-wrap:anywhere; }
.lesson-review-answer p { margin:8px 0; white-space:pre-wrap; }
.lesson-review-result { color:var(--primary-deep); font-weight:700; }
.lesson-review-practice { margin-top:10px; }.lesson-review-practice form { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }.lesson-review-practice form[hidden] { display:none; }.lesson-review-practice input,.lesson-review-practice select { flex:1; min-width:180px; }.lesson-review-practice-result { color:var(--primary-deep); }
@media(max-width:680px){.lesson-review-panel { padding:12px 16px 48px; }.lesson-review-header h2 { font-size:18px; }.lesson-review-header .ui-button { padding:10px; min-height:44px; white-space:nowrap; }}
.lesson-stage-actions { display:flex; gap:12px; flex-wrap:wrap; }
.lesson-stage-actions button { flex:1 1 180px; min-height:52px; }
.lesson-return-time { display:grid; gap:12px; margin-top:16px; padding:16px; border:1px solid #b9d4d0; border-radius:14px; background:#f2f8f7; }
.lesson-return-time label { display:grid; gap:8px; font-weight:700; }
.lesson-return-time select { width:100%; min-height:48px; padding:8px; border:1px solid #aac4c1; border-radius:10px; background:white; font:inherit; }
.lesson-stage-list { list-style:none; padding:0; gap:8px; margin:18px 0; }
.lesson-stage-list li { border:1px solid var(--line); border-radius:8px; padding:6px 10px; color:var(--ink-soft); font-size:13px; }
.lesson-stage-list [aria-current="step"] { color:var(--primary-deep); background:var(--primary-wash); border-color:#92bfc2; font-weight:700; }
.lesson-stage-overview { margin:12px 0; }
.lesson-stage-overview summary { min-height:44px; display:flex; align-items:center; color:var(--primary-deep); font-weight:700; cursor:pointer; }
.lesson-stage-overview .lesson-stage-list { margin:8px 0 14px; }
.lesson-monitor h3 { font-size:20px; margin:0 0 18px; }
.lesson-monitor .monitor-legend { margin-top:18px; color:var(--ink-soft); font-size:13px; }
.lesson-monitor .monitor-legend summary { cursor:pointer; min-height:44px; padding:10px 0; }
.lesson-monitor-scroll { border:1px solid var(--line); border-radius:10px; margin-top:18px; }
.lesson-monitor-scroll:focus-visible { outline:3px solid var(--primary); outline-offset:3px; }
@media(max-width:680px) {
 .classroom-section .lesson-live { padding:20px 16px; }
 .lesson-stage-list li { font-size:12px; }
 .lesson-stage-actions { flex-direction:column-reverse; }
 .lesson-stage-actions button { width:100%; flex:auto; }
}

.pin-notice { padding:14px; border:1px solid #b9dcd7; background:var(--primary-wash); color:var(--primary-deep); border-radius:10px; font-size:14px; line-height:1.8; }

/* Reuse existing plans without making copies of learner records. */
.lesson-reuse-dialog { width:min(520px,calc(100vw - 32px)); max-height:calc(100svh - 48px); overflow:auto; padding:28px; color:var(--ink); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); }
.lesson-reuse-dialog::backdrop { background:#183f4b66; }
.lesson-reuse-dialog h2 { font-size:23px; margin:0 0 12px; line-height:1.6; }
.reuse-lesson-title { margin:0 0 24px; font-size:15px; overflow-wrap:anywhere; }
.lesson-reuse-dialog label { display:grid; gap:8px; font-weight:700; }
.lesson-reuse-dialog select { font:inherit; font-size:16px; width:100%; min-height:48px; padding:10px; border:1px solid #b9cecd; border-radius:10px; color:var(--ink); background:#fff; }
.reuse-notice:empty { display:none; }
.reuse-notice { padding:12px; border-radius:8px; background:var(--primary-wash); color:var(--primary-deep); font-size:14px; }
.lesson-reuse-dialog .lesson-live-controls { margin-top:24px; justify-content:flex-end; gap:10px; }
.lesson-reuse-dialog button { min-height:48px; }
.history-reuse { margin:0 0 20px 34px; font-size:13px; }
.lesson-summary-edits { display:flex; gap:10px; flex-wrap:wrap; margin:24px 0; padding-top:20px; border-top:1px solid var(--line); }
.lesson-summary-edits button { min-height:44px; }
@media(max-width:680px) {
 .prepared-lesson-card .lesson-live-controls>.ui-primary { grid-column:1/-1; }
 .lesson-reuse-dialog { padding:24px 20px; }
 .lesson-reuse-dialog .lesson-live-controls { display:grid; grid-template-columns:1fr; }
 .lesson-reuse-dialog .lesson-live-controls .ui-primary { grid-row:1; }
 .lesson-summary-edits { display:grid; grid-template-columns:1fr; }
}