/* Playback and episode controls stay above the independently scrolling sentence list. */
#listen-view{max-width:1100px;margin-inline:auto}
#listen-view .player-breadcrumb{margin:14px 0}
#listen-view .lesson-heading{margin-bottom:18px}
#listen-view .lesson-title h1{font-size:23px;letter-spacing:0;margin:5px 0 0;line-height:1.5}
#listen-view #back-to-season{margin-left:12px;font-size:11px;padding:10px 14px}
#listen-view .lesson-kicker{font-size:10px}
.listening-panel{border:1px solid #dfe5d7;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 5px 24px #34492a04}
.listening-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 25px;border-bottom:1px solid var(--line)}
.listening-toolbar .caption-controls{background:#f4f6ef;padding:3px;border-radius:8px;gap:2px}
.listening-toolbar .caption-controls button{font-size:11px;padding:7px 10px;color:#718167}
.listening-toolbar .caption-controls button.selected{background:#fff;color:#385743;box-shadow:0 1px 5px #2d412115}
.listening-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 26px;color:#7b896e;font-size:11px;background:#fcfdf9;line-height:1.8}
.listening-hint .text-button{font-size:10px;flex-shrink:0}
.listening-panel .transcript-list{height:clamp(290px,40vh,440px);max-height:none;min-height:0;padding:12px 24px;scrollbar-color:#cbd6bd transparent;overflow-anchor:none;scroll-padding-block:12px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
.listening-panel .cue-row{align-items:flex-start;gap:16px;padding:18px 20px;border-radius:11px;margin:5px 0;border:1px solid transparent;cursor:pointer}
.listening-panel .cue-row:hover{background:#f7f9f3}
.listening-panel .cue-row.active{background:#edf3e4;border-color:#cedfb9;box-shadow:inset 3px 0 0 #78975a}
.cue-play{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;position:relative;border-radius:50%;margin-top:10px;color:#7f9270}
.cue-play:hover{background:#dce9cb}
.cue-play .cue-index{font-size:13px;width:auto;margin:0;color:inherit}
.cue-play>.icon{display:none;width:16px;height:16px;fill:currentColor}
.cue-play:hover .cue-index,.cue-play:focus-visible .cue-index{display:none}
.cue-play:hover>.icon,.cue-play:focus-visible>.icon{display:block}
.cue-row.active .cue-play{background:#385743;color:#eef5e2}
.cue-row.active .cue-play .cue-index{color:inherit}
.cue-meta{display:flex;align-items:center;gap:10px;min-height:18px;margin-bottom:4px}
.listening-panel .cue-time{font-size:10px;color:#8e9d82;margin:0;letter-spacing:.5px}
.listening-panel .cue-row.active .cue-time{color:#668053}
.cue-current-label{font-size:10px;font-weight:600;letter-spacing:.5px;color:#668053;display:none}
.cue-row.active .cue-current-label{display:inline}
.listening-panel .cue-status{padding:0;color:#7d9862}
.listening-panel .cue-status .icon{width:14px;height:14px}
.listening-panel .english-line{font-size:19px;line-height:1.65;letter-spacing:0;font-weight:450;color:#586b50;overflow-wrap:anywhere}
.listening-panel .cue-row.active .english-line{color:#2d4734;font-weight:550}
.listening-panel .word{padding:0;line-height:inherit;text-align:inherit}
.listening-panel .chinese-line{font-size:13px;line-height:1.7;color:#819071;margin-top:5px;letter-spacing:0}
.listening-panel .cue-row.active .chinese-line{color:#637e52}
.listening-panel .cue-hidden{font-size:14px;letter-spacing:1px;color:#98a38b;margin:0;padding:3px 0;line-height:1.8}
.listening-panel .cue-row.active .cue-hidden{color:#58734a}
.listening-panel .reveal-button{margin-top:10px;border:1px solid #b6cba0;border-radius:6px;padding:7px 12px;font-size:11px;color:#426037;background:#fff;min-height:32px}
.listening-panel .reveal-button:hover{background:#e1edcf}
.listening-panel .hide-reveal{margin-top:8px;font-size:10px;color:#688552}
.cue-bookmark{margin-top:10px;color:#a3ae98}
.cue-bookmark .icon{width:18px;height:18px}
.cue-bookmark.saved{color:#955000;background:#fff0c2;box-shadow:inset 0 0 0 1px #e4bb66}
.cue-bookmark.saved .icon{fill:#cf8200;stroke:currentColor;stroke-width:2}
.cue-bookmark.saved:hover{color:#794000;background:#ffe3a0}
.listening-progress{display:flex;align-items:center;gap:14px;font-size:10px;color:#8b9a7a;flex:1;max-width:700px}
.listening-progress progress{appearance:none;flex:1;min-width:0;height:3px;border:0;border-radius:3px;background:#edf1e3}
.listening-progress progress::-webkit-progress-bar{background:#edf1e3;border-radius:3px}
.listening-progress progress::-webkit-progress-value{background:#abc57d;border-radius:3px}
.listening-progress progress::-moz-progress-bar{background:#abc57d;border-radius:3px}
.listening-progress .text-button{font-size:10px}
.listening-panel .transport{padding:15px 30px 17px;background:#f8faf3;border-bottom:1px solid #e5ebdb}
.episode-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e5ebdb;margin-top:12px;padding-top:7px}
.episode-navigation .text-button{font-size:11px;min-height:32px;padding:5px 8px;border-radius:7px;color:#557444}
.episode-navigation .text-button:not(:disabled):hover{background:#eaf0de}
.episode-navigation .icon{width:16px;height:16px}
#previous-episode .icon{transform:rotate(180deg)}
#episode-position{font-size:10px;color:#849576;white-space:nowrap}
.transport-context{display:flex;align-items:center;gap:15px;margin-bottom:15px;min-height:20px}
.transport-context #sentence-number{font-size:11px;color:#587147;font-weight:600;white-space:nowrap}
.transport-context .playback-description{margin:0;color:#849576;font-size:11px}
.listening-panel .scrubber{font-size:10px;color:#7c8d6a;gap:15px}
.listening-panel .scrubber input{height:4px}
.listening-panel .playback-row{margin:16px 0 0;display:grid;grid-template-columns:1fr auto 1fr}
.listening-panel .repeat-chip{justify-self:start;width:auto;height:auto;min-height:38px;background:#eaf0de;border:1px solid #dce6cc;color:#5b7844;padding:9px 13px;font-size:12px}
.listening-panel .repeat-chip span{display:inline;font-size:12px}
.listening-panel .main-controls{gap:22px}
.listening-panel .main-controls .icon-button{width:36px;height:36px}
.listening-panel .main-play{width:auto;min-width:118px;height:46px;padding:0 18px;border-radius:24px;display:flex;align-items:center;justify-content:center;gap:9px;background:#385743;color:#f2f7e9}
.listening-panel .main-play span{font-size:13px;white-space:nowrap}
.listening-panel .main-play .icon{width:18px;height:18px}
.listening-panel .main-play:hover{background:#294332}
.listening-panel.is-playing .main-play .icon{fill:none;stroke-width:3}
.listening-panel .speed-label{justify-self:end;min-width:55px}
.listening-panel .speed-label>span{font-size:9px;color:#81936f}
.listening-panel .speed-label select{font-size:13px;color:#557444}
#listen-view .practice-footer{margin-top:16px}
@media(min-width:821px) and (min-height:620px){
  main:has(#listen-view:not([hidden]))>.topbar{display:none}
  #listen-view{height:calc(100vh - 20px);height:calc(100dvh - 20px);display:flex;flex-direction:column;min-height:0}
  #listen-view .player-breadcrumb,#listen-view .lesson-heading,#listen-view .practice-footer{flex-shrink:0}
  .listening-workspace{display:flex;flex-direction:column;flex:1;min-height:0}
  .listening-panel{display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
  .listening-panel .transcript-list{flex:1;height:auto;min-height:100px}
  .listening-toolbar,.listening-hint,.listening-progress,.listening-panel .transport{flex-shrink:0}
    .listening-toolbar .caption-controls{margin-left:auto}
  .listening-hint .text-button:hover{background:#edf3e4}
  .listening-panel .transport{padding:8px 26px 10px}
  .transport-context{margin-bottom:8px}
  .listening-panel .playback-row{margin-top:8px}
  .listening-panel .main-play{height:44px}
}

@media(max-width:700px){
  .listening-toolbar{padding:0 16px;flex-wrap:wrap;gap:0}
      .listening-toolbar .caption-controls{margin:8px 0;width:100%}
  .listening-toolbar .caption-controls button{flex:1;padding:7px 5px}
  .listening-hint{padding:8px 17px;font-size:10px;gap:8px}
  .listening-hint .text-button{font-size:10px}
  .listening-hint .icon{display:none}
  .listening-panel .transcript-list{padding:8px 10px;height:350px}
  .listening-panel .cue-row{padding:14px 10px;gap:10px}
  .cue-play{width:28px;height:28px;margin-top:11px}
  .cue-play .cue-index{font-size:11px}
  .listening-panel .english-line{font-size:17px;line-height:1.7}
  .listening-panel .chinese-line{font-size:12px}
  .listening-panel .cue-hidden{font-size:12px;letter-spacing:.3px}
  .cue-bookmark{width:28px;height:28px;padding:5px}
  .listening-progress{gap:10px;max-width:none}
  .listening-panel .transport{padding:13px 17px 15px}
  .transport-context{flex-wrap:wrap;gap:7px 12px;margin-bottom:12px}
  .transport-context .playback-description{order:3;flex-basis:100%;font-size:10px}
  .listening-panel .main-controls{gap:7px}
  .listening-panel .main-controls .icon-button{width:30px;height:32px}
  .listening-panel .main-play{min-width:100px;height:42px;padding:0 12px;gap:6px}
  .listening-panel .main-play span{font-size:12px}
  .listening-panel .repeat-chip{padding:8px;gap:5px}
  .listening-panel .repeat-chip span{font-size:10px}
  .listening-panel .speed-label{min-width:45px;padding:0}
  .listening-panel .speed-label select{font-size:12px}
}
@media(max-width:560px){
  #listen-view .lesson-title h1{font-size:15px}
  #listen-view .lesson-kicker{font-size:9px}
  #listen-view .lesson-meta{font-size:9px}
  #listen-view #back-to-season{margin-left:0;padding:7px;min-height:32px}
  #listen-view #back-to-season span{display:none}
  #listen-view .lesson-symbol{display:none}
  #listen-view .practice-footer{flex-wrap:wrap;gap:6px}
  #listen-view .practice-footer>.listening-progress{flex-basis:100%}
  #listen-view .practice-footer>span{margin-left:auto}
  .listening-panel .transcript-list{height:320px}
}
@media(max-width:430px){
  .listening-panel .transport{padding-inline:12px}
  .listening-panel .playback-row{grid-template-columns:auto minmax(0,1fr) auto;gap:4px}
  .listening-panel .main-controls{justify-content:center;gap:2px}
  .listening-panel .repeat-chip{padding:7px;min-height:34px}
  .listening-panel .repeat-chip .icon{display:none}
  .listening-panel .main-controls .icon-button{width:26px;padding:4px}
  .listening-panel .main-play{min-width:88px;padding:0 8px}
}