/* Compact workspace chrome; the learning controls retain their existing order. */
.desktop-library-toggle{display:none}
@media(min-width:701px){
  .app-shell:not(:has(.checkin-page)){grid-template-columns:76px 248px minmax(0,1fr)}
  .app-shell:not(:has(.checkin-page))>.library{grid-column:2}
  .app-shell:not(:has(.checkin-page))>.shell-main{grid-column:3}
  .app-shell.library-collapsed:not(:has(.checkin-page)){grid-template-columns:76px 0 minmax(0,1fr)}
  .app-shell.library-collapsed>.library{display:none}
  .desktop-library-toggle{display:inline-grid;width:30px;height:30px;border:1px solid var(--line);border-radius:7px}
  .app-shell:has(.checkin-page) .desktop-library-toggle{display:none}
  .library-collapsed .desktop-library-toggle .icon{transform:rotate(180deg)}
  .topbar{height:52px;min-height:52px;padding:0 22px;gap:12px}
  .breadcrumb{margin-right:auto;gap:9px;font-size:11px}
  .top-actions{gap:12px}.global-search{min-height:32px;padding:5px 10px;font-size:11px}
  .library{padding-top:12px}.library-brand{padding-bottom:12px;gap:5px}
  .library-brand .directory-toggle{width:28px;height:28px;border:1px solid var(--line);border-radius:7px}
  .library-brand .icon{width:16px;height:16px}
  .series-switcher{margin-bottom:12px;gap:2px}.series-choice{min-height:43px;padding:6px 8px}
  .series-mini{height:30px;width:28px}.library-divider{margin-bottom:12px}
  .reading-content{padding:20px 22px 18px}.reading-column>.lesson-dock{margin-left:22px;margin-right:22px}
  .episode-heading{margin-bottom:16px}.episode-heading h1{font-size:25px}
}
.series-switcher{flex:0 1 auto;min-height:0;gap:0}
.series-options{flex:1;min-height:0;max-height:min(48vh,420px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d5ddeb transparent;padding:1px 2px 2px}
.series-options .series-choice{width:100%;min-height:58px;margin-bottom:3px;padding:7px 8px}
.series-resource-tags{display:flex;flex-wrap:wrap;gap:2px;margin-top:4px;min-width:0}
.series-options .series-choice strong{line-height:16px}
.series-options .series-choice small{line-height:12px;letter-spacing:.1px}
.library .episode-list{flex:1 0 136px;min-height:136px}
.resource-tag{display:inline-flex;align-items:center;border:1px solid #e0e6ee;border-radius:4px;padding:0 2px;background:#f7f8fa;color:#596a80;font:500 10px/14px var(--body);white-space:nowrap}
.resource-tag.listen{background:#edf2ff;border-color:#d8e2fb;color:#365bc2}
.resource-tag.watch{background:#edf6f1;border-color:#d7e8dd;color:#397769}
.resource-tag.pending{background:#faf3e9;border-color:#ebdec8;color:#8d642c}
@media(min-width:1600px){
  .app-shell:not(:has(.checkin-page)){grid-template-columns:82px 260px minmax(0,1fr)}
  .app-shell.library-collapsed:not(:has(.checkin-page)){grid-template-columns:82px 0 minmax(0,1fr)}
}
.lesson-focus{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;margin-bottom:16px}
.lesson-focus>#listening-stage{min-width:0}
.lesson-focus:has(.dictation-panel[hidden]){display:block}
.lesson-focus .listening-stage{margin:0;padding:16px 17px 12px;border-radius:14px}
.lesson-focus .stage-heading{gap:10px;font-size:11px}
.lesson-focus .stage-heading>strong{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58%}
.lesson-focus .stage-center{padding:21px 0 16px;gap:14px}
.lesson-focus .stage-current strong{font-size:13px}
.lesson-focus .stage-current small{font-size:10px}
.lesson-focus .waveform{height:52px}
.lesson-focus .stage-controls{padding-top:7px;min-height:26px}
.lesson-focus .audio-status{font-size:10px}
.lesson-focus .video-stage{container-type:inline-size}
.lesson-focus .video-stage .video-frame{height:clamp(240px,calc(56.25cqw + 100px),calc(clamp(160px,27vh,280px) + 100px));min-height:240px;max-height:none;aspect-ratio:auto;margin-top:12px}
.lesson-focus .video-stage .stage-center{padding:12px 0 5px;gap:7px}
.lesson-focus .video-stage .waveform{height:12px}
.lesson-focus .video-stage .stage-playback-info{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,min(25%,120px)) 28px;grid-template-rows:12px 14px;column-gap:5px;row-gap:2px;height:30px;padding-top:2px}
.lesson-focus .video-stage .stage-playback-info>.stage-center{grid-area:1/1/2/3;height:12px;min-height:0;padding:0;margin:0;justify-content:flex-start}
.lesson-focus .video-stage .stage-playback-info .stage-current{min-width:0;width:100%;gap:7px;overflow:hidden}
.lesson-focus .video-stage .stage-playback-info .stage-current strong{font-size:11px;line-height:12px;flex:none}
.lesson-focus .video-stage .stage-playback-info .stage-current small{font-size:9px;line-height:12px;margin:0;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lesson-focus .video-stage .stage-playback-info>.waveform{grid-area:2/2/3/4;height:14px;margin:0}
.lesson-focus .video-stage .stage-playback-info>.stage-timeline{display:contents;margin:0}
.video-stage .stage-playback-info #elapsed{grid-area:2/1/3/2;align-self:center;font:9px/12px var(--mono)}
.video-stage .stage-playback-info #clip-duration{grid-area:2/4/3/5;align-self:center;text-align:right;font:9px/12px var(--mono)}
.lesson-focus .video-stage .stage-playback-info>.stage-controls{grid-area:1/3/2/5;height:12px;min-height:0;padding:0;border:0;gap:0;justify-content:flex-end;overflow:hidden}
.lesson-focus .video-stage .stage-playback-info .audio-status{font-size:9px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson-focus .play-main{width:54px;height:54px}
.lesson-focus .play-main .icon{width:27px;height:27px}
.reading-content:has(.dictation-panel:not([hidden]))>#sentence-card:has(.hidden-script){display:none}
.article-read-mode .lesson-focus,.article-source-mode .lesson-focus{display:none}
.dictation-panel{min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--white);padding:12px 14px 8px;box-shadow:0 4px 16px #17263c03}
.dictation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dictation-heading>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0}
.dictation-heading h2{font-size:14px;font-weight:650;letter-spacing:.1px}
.dictation-heading p{font-size:10px;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
.dictation-heading .text-button{font-size:10px;min-height:24px;padding:2px 4px;color:var(--muted);flex:none}
.dictation-heading .icon{width:14px;height:14px}
.dictation-instruction{font-size:10px;color:var(--muted);line-height:1.4;margin:4px 0 2px}
.dictation-instruction>span{display:inline;margin-left:4px;font-size:9px;color:var(--subtle)}
.dictation-words{display:flex;flex-wrap:wrap;align-content:flex-start;gap:9px 8px;max-height:clamp(232px,calc(30vh + 32px),372px);min-height:60px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:3px 3px 4px;margin:0 -3px}
.dictation-word{position:relative;min-width:0;max-width:100%;padding:5px 7px 6px;border:1px solid #e5e9ef;border-radius:8px;background:#fafbfd;cursor:text;transition:border-color .15s,background .15s,box-shadow .15s}
.dictation-word-meta{display:flex;justify-content:space-between;gap:10px;font:8px/10px var(--mono);color:var(--muted);margin-bottom:4px;user-select:none}
.dictation-word-state{font:600 10px/1 var(--body);min-width:9px;text-align:right}
.dictation-slots{display:flex;gap:3px;flex-wrap:wrap;align-items:flex-end;min-height:27px}
.dictation-letter{display:inline-flex;align-items:center;justify-content:center;position:relative;min-width:19px;height:27px;border-bottom:2px solid #c6d0df;font:500 18px/1 var(--mono);border-radius:3px 3px 0 0;color:var(--ink)}
.dictation-letter--correct{color:#286657;background:#eaf5ef;border-bottom-color:#397769}
.dictation-letter--wrong{color:#a83632;background:#fff0ef;border-bottom:2px dashed #b34e48}
.dictation-letter.is-hint{color:#929ba9;background:transparent;border-bottom-color:#cbd2de}
.dictation-answer-hint{font-size:10px;line-height:1.4;color:var(--muted);margin:0 0 2px}
.dictation-fixed,.dictation-punctuation{font:500 18px/28px var(--mono);color:var(--muted);user-select:none}
.dictation-punctuation{margin-left:1px}
.dictation-word.is-focused{border-color:#809afa;background:#f5f8ff;box-shadow:0 0 0 2px #315be815}
.dictation-word.is-correct{border-color:#bfd9cc;background:#f6fbf8}
.dictation-word.is-correct .dictation-word-state{color:#286657}
.dictation-word.is-wrong .dictation-word-state{color:#a83632}
.dictation-word.is-wrong{border-color:#dbaba8}
.dictation-input{position:absolute;inset:0;width:100%;min-width:0;opacity:0;pointer-events:none;font-size:16px;padding:0}
.dictation-letter.is-cursor:after{content:'';position:absolute;height:19px;width:2px;left:2px;bottom:4px;background:var(--blue);animation:dictation-caret 1s steps(1) infinite}
.dictation-word.is-correct:not(.is-focused) .dictation-word-state{animation:dictation-confirm .2s ease-out}
.dictation-nudge{animation:dictation-nudge .18s ease-out}
.dictation-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:3px;margin-top:4px;min-height:28px}
#dictation-feedback{font-size:10px;color:var(--muted);line-height:1.7}
#dictation-feedback.complete{color:#286657;font-weight:600}
.dictation-footer>.text-button{white-space:nowrap;font-size:10px;min-height:24px;padding:1px 5px}
.dictation-footer .icon{width:14px;height:14px}
.dictation-key-hint{font-size:9px;color:var(--subtle);margin-top:1px;line-height:1.4}
@container(min-width:660px){
  .lesson-focus{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:15px}
  .lesson-focus:has(.dictation-panel[hidden]){display:block}
}
@media(max-width:700px){
  .library-brand .directory-toggle{display:none}
  .dictation-panel{padding:15px 14px 11px}.dictation-words{max-height:240px}
}
@keyframes dictation-caret{50%{opacity:0}}
@keyframes dictation-confirm{from{transform:scale(.65);opacity:.3}to{transform:scale(1);opacity:1}}
@keyframes dictation-nudge{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.dictation-word,.dictation-word-state,.dictation-letter.is-cursor:after{animation:none!important;transition:none!important}}

/* Preserve the original three-level reading order within a 40px header. */
@media(min-width:701px){
  .reading-content>.episode-heading{align-items:flex-start;gap:16px;min-height:40px;margin-bottom:12px}
  .episode-heading>div:first-child{display:grid;grid-template-rows:10px 18px 10px;row-gap:1px;min-width:0;flex:1}
  .reading-content>.episode-heading .label{display:block;margin:0;font-size:10px;line-height:10px;letter-spacing:.7px;white-space:nowrap}
  .episode-heading .episode-title-row{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;min-width:0}
  .reading-content>.episode-heading h1{font-size:18px;line-height:18px;letter-spacing:-.3px;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .episode-heading .episode-progress{display:block;width:210px;max-width:100%;padding:0;flex:none}
  .episode-heading .episode-progress-label{margin:0 0 3px;font-size:9px;line-height:10px;gap:12px}
  .episode-heading .episode-progress progress{width:100%;height:3px}
  .reading-content>.episode-heading .episode-subline{margin:0;font-size:10px;line-height:10px;gap:7px;white-space:nowrap}
  .reading-content>.episode-heading>.badge{align-self:flex-start;margin:0;flex:none}
}

/* Reading owns the full width until the learner opens a word. */
.workspace:has(>.reading-column){grid-template-columns:minmax(0,1fr)}
.lesson-study-tools{display:flex;align-items:center;gap:10px;margin-right:auto;flex:none;white-space:nowrap}
.lesson-dock .lesson-settings-row{justify-content:flex-start}
.lesson-study-tools .repeat-status{margin-right:0}
.lesson-settings-row .dictation-toggle{border:1px solid var(--line);padding:4px 8px;gap:5px;flex:none}
.lesson-settings-row .dictation-toggle[aria-expanded=true]{background:var(--sky);border-color:#d4dff8;color:var(--blue)}
.mobile-inspector-open.inspector-toggle{display:inline-flex;gap:6px;font-size:11px;white-space:nowrap}
.inspector-toggle[aria-expanded=true]{background:var(--sky);border-color:#c6d4f6;color:var(--blue)}
.inspector .inspector-close{display:grid}
@media(min-width:1280px){
  .workspace:has(>.reading-column):has(>.inspector.open:not(.floating)){grid-template-columns:minmax(0,1fr) 326px}
}
@media(min-width:1600px){
  .workspace:has(>.reading-column):has(>.inspector.open:not(.floating)){grid-template-columns:minmax(0,1fr) 358px}
}
@media(max-width:700px){
  .mobile-inspector-open.inspector-toggle{width:34px;min-width:34px;padding:7px}
  .inspector-toggle>span{display:none}
}

/* Maintenance details belong in the opt-in material report. */
.resource-report .batch-notice{margin:16px 0;padding:14px 16px;max-width:720px}
.resource-report .batch-notice>small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.8}
.resource-report .batch-heading{font-size:12px}
.resource-report .batch-counts{font-size:11px}
.resource-report .batch-notice.complete progress,.resource-report .batch-notice.complete>small,.resource-report .batch-notice.complete .batch-counts{display:block}

.account-setting-label{display:block;color:var(--ink);font-size:12px;margin:12px 0 8px}
.account-learning-settings select{width:100%;padding:10px 12px;background:#fafbfd;font-size:12px;margin-bottom:9px}
.account-learning-settings small{display:block}
#next-action-saved{color:var(--green);font-size:11px}
#next-action-saved:empty{display:none}

/* The sentence directory follows dictation and scrolls within a compact window. */
.lesson-practice{min-width:0;display:flex;flex-direction:column;gap:14px}
#inline-queue-slot:empty,#queue-fallback-slot:empty{display:none}
.lesson-queue{min-width:0}
.lesson-queue .line-list{height:150px;max-height:150px}