/* One work surface for watching, listening, and recording. */
.practice-studio{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;isolation:isolate}
.practice-video{min-width:0;background:#14251f;position:sticky;top:20px}
.practice-desk{min-width:0;padding:22px 24px}
.practice-toolbar{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.practice-position{margin-right:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.practice-toolbar>label{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px}
.practice-toolbar select{min-height:44px;padding:7px 8px;background:var(--paper)}
.practice-toolbar .loop-toggle{padding:0;min-height:44px;cursor:pointer}
.practice-toolbar input{width:18px;height:18px;margin:0}
.practice-current{padding:20px 0 12px;overflow-wrap:anywhere}
.practice-current .sentence-en{font-size:21px;line-height:1.65;margin:0}
.practice-current .sentence-zh{font-size:13px;line-height:1.85;margin:10px 0 0;color:#66785e}
.practice-tip{font-size:11px;color:var(--muted);margin-bottom:14px}
.practice-tip summary{cursor:pointer;min-height:32px;display:list-item;width:fit-content;line-height:32px}
.practice-tip p{margin:4px 0 12px;line-height:1.85;color:#5e705d}
.practice-recorder.recorder{padding:0;border:0;background:none;border-radius:0;margin:0}
.practice-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.practice-actions>.button,.practice-actions>.record-button{min-width:0;min-height:48px;font-size:12px;padding:10px 8px}
.practice-actions>.record-button{background:#fbf3ed;border-color:#e3cbbb;color:#975433}
.practice-actions>.record-button.recording{background:#a95136;color:white;border-color:#a95136}
.practice-actions>.record-button.recording .record-dot{background:white}
.practice-recorder .record-message{margin-top:8px}
.practice-recorder .recording-result{border-top:1px solid var(--line);padding-top:10px;margin-top:16px}
.practice-recorder .recording-result audio{margin-top:0;height:42px}
.practice-recorder .recording-version-label{margin:0 0 10px}
.practice-recorder .recording-links{font-size:11px;align-items:center}
.practice-recorder .recording-links a,.practice-recorder .recording-links button{min-height:44px;display:inline-flex;align-items:center;font-size:11px}
.practice-desk .line-switch{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}
.practice-desk .line-switch>.button{min-height:44px}
.practice-desk .line-switch>span{font-variant-numeric:tabular-nums}
.is-practicing .lesson-breadcrumb{margin-bottom:16px}
.is-practicing .course-heading{padding-bottom:18px}
.is-practicing .course-heading h1{font-size:23px;margin-top:0}
.is-practicing .lesson-tag{width:58px;height:58px}
.is-practicing .lesson-tag span{font-size:29px}
.is-practicing .step-heading{padding-block:18px 14px;align-items:center}
.is-practicing #step-description{display:none}
.is-practicing .step-fraction{padding-top:0}
@media(max-width:1150px){.practice-studio{grid-template-columns:minmax(0,1fr)}.practice-video{position:static}.practice-video video{max-height:320px}.practice-desk{padding:18px 22px}.practice-current .sentence-en{font-size:22px}}
@media(max-width:760px){
  .is-practicing{padding-top:12px}
  .is-practicing .lesson-breadcrumb{margin-bottom:10px;padding-bottom:8px;flex-wrap:nowrap}
  .is-practicing .lesson-breadcrumb>span{width:auto}
  .is-practicing .lesson-breadcrumb>div{margin-left:auto}
  .is-practicing .course-heading{padding-bottom:10px;border-bottom:0}
  .is-practicing .course-heading h1{font-size:16px;line-height:1.5;margin:0}
  .is-practicing .course-heading p,.is-practicing .lesson-tag{display:none}
  .is-practicing .step-heading{padding:0 0 12px;align-items:center}
  .is-practicing .step-heading h2{font-size:20px;margin:0}
  .is-practicing #step-description{display:none}
  .is-practicing .step-fraction{font-size:22px;padding:0}
  .is-practicing .practice-modes{margin-bottom:10px}
  .practice-video video{max-height:220px}
  .practice-desk{padding:12px 16px 14px}
  .practice-toolbar{gap:12px;padding-bottom:8px}
  .practice-toolbar>label{font-size:11px}
  .practice-current{padding:14px 0 8px;height:clamp(160px,28svh,240px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b3bfaa transparent}
  .practice-current .sentence-en{font-size:19px;line-height:1.6}
  .practice-current .sentence-zh{font-size:12px;line-height:1.75;margin-top:7px}
  .practice-tip{margin-bottom:10px}
  .practice-actions{gap:8px}
  .practice-desk .line-switch{margin-top:14px;padding-top:12px}
  .is-practicing .bottom-nav{position:static;backdrop-filter:none;margin-top:18px;padding-top:16px}
}
@media(max-width:360px){.practice-desk{padding-inline:12px}.practice-toolbar{gap:10px}.practice-current .sentence-en{font-size:18px}.practice-toolbar>label{font-size:10px}.practice-toolbar select{font-size:11px}}

/* Continuous mode: bilingual cards move inside their own reading window. */
.continuous-deck{position:relative;margin:16px -4px}
.continuous-cards{height:400px;overflow-y:auto;overscroll-behavior:contain;padding:2px 4px 48px;scrollbar-width:thin;scrollbar-color:#b3bfaa transparent;overflow-anchor:none;scroll-padding-block:12px}
.flow-card{display:block;width:100%;padding:18px 19px;margin-bottom:12px;text-align:left;border:1px solid var(--line);border-left:4px solid transparent;border-radius:12px;background:#fcfdf9;overflow-wrap:anywhere;transition:background .2s,border-color .2s}
.flow-card:hover{border-color:#a6b99a;background:#f5f8ed}
.flow-card.active{background:#edf3e3;border-color:#b7caa7;border-left-color:var(--green)}
.flow-card-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#84917a;font:11px/1.5 var(--font);font-variant-numeric:tabular-nums}
.flow-card-meta>span:nth-child(2){margin-left:auto}
.flow-card .sentence-en{font-size:20px;line-height:1.65}
.flow-card .sentence-zh{font-size:12px;line-height:1.8;color:#6e8063;margin-top:9px}
.flow-card.active .sentence-en{color:#183f31}
.flow-wave{display:flex;align-items:center;gap:2px;height:14px;width:14px;visibility:hidden;color:var(--green)}
.flow-card.active .flow-wave{visibility:visible}
.flow-wave i{width:3px;height:6px;border-radius:2px;background:currentColor}
.flow-wave i:nth-child(2){height:12px}
.is-playing .flow-card.active .flow-wave i{animation:flow-wave .8s ease-in-out infinite alternate}
.is-playing .flow-card.active .flow-wave i:nth-child(2){animation-delay:-.4s}
.is-playing .flow-card.active .flow-wave i:nth-child(3){animation-delay:-.2s}
.follow-button{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);border:1px solid #9db58e;border-radius:24px;min-height:44px;padding:8px 17px;white-space:nowrap;background:var(--green);color:white;font-size:12px;box-shadow:0 3px 12px #203b3326}
.is-continuous .practice-desk{padding-bottom:22px}
@keyframes flow-wave{to{transform:scaleY(.4)}}
@media(max-width:1150px) and (min-width:761px){.continuous-cards{height:420px}}
@media(max-width:760px){
  .continuous-deck{margin:10px -4px 12px}
  .continuous-cards{height:clamp(180px,calc(100svh - 500px),360px)}
  .flow-card{padding:14px 14px;margin-bottom:10px;border-radius:10px}
  .flow-card-meta{margin-bottom:8px;font-size:10px}
  .flow-card .sentence-en{font-size:18px;line-height:1.6}
  .flow-card .sentence-zh{font-size:12px;line-height:1.75;margin-top:8px}
  .is-continuous .practice-desk{padding-bottom:14px}
}
@media(max-width:360px){.flow-card{padding-inline:12px}.flow-card .sentence-en{font-size:17px}}

/* One lesson player; sentence actions stay on their own cards. */
.flow-card{padding:0!important}
.flow-card-body{display:block;border:0;border-radius:10px 10px 0 0;background:transparent;color:inherit;width:100%;text-align:left;padding:17px 18px 8px}
.flow-card-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:0 12px 8px}
.flow-card-actions button{display:flex;gap:6px;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;min-height:44px;padding:6px 4px;background:none;font-size:12px;white-space:nowrap}
.flow-card-actions button:hover{background:#e1e9d6}
.flow-card-actions [aria-pressed=true]{background:#e1ead5;color:var(--green)}
.flow-card-actions [data-favorite][aria-pressed=true]{color:#925222;background:#f6e8d6}
.favorite-star{font-size:20px;line-height:1}
.flow-card.is-looping{border-left-color:#b5683c;background:#f8f0e5}
.flow-card.is-looping [data-line-loop]{color:#96502c;background:#f0dec9}
.practice-current-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:var(--muted);margin-bottom:9px;font-variant-numeric:tabular-nums}
[data-playback-scope]{color:var(--green)}
.practice-recorder .practice-tip{margin:8px 0 0}
.legacy-recordings{margin-top:14px;font-size:11px;color:var(--muted)}
.legacy-recordings>summary{min-height:44px;line-height:44px;cursor:pointer}
.legacy-recordings .recorder{margin:0;padding:12px}
@media(max-width:760px){
 .continuous-cards{height:clamp(180px,calc(100svh - 560px),360px)}
 .flow-card-body{padding:13px 13px 7px}
 .flow-card-actions{padding:0 7px 6px;gap:3px}
 .flow-card-actions button{font-size:11px;gap:4px}
 .flow-card .sentence-en{font-size:18px;line-height:1.55}
 .flow-card .sentence-zh{font-size:12px}
 .practice-toolbar .loop-toggle{font-size:10px}
 .practice-current-meta{margin-bottom:8px;font-size:10px}
}
@media(max-width:360px){.flow-card-body{padding-inline:11px}.flow-card .sentence-en{font-size:17px}}

/* Short spoken clauses: text and translation, then one compact action row. */
.flow-card{margin-bottom:8px;border-radius:10px}
.flow-card-body{padding:9px 12px 0;border-radius:9px 9px 0 0}
.flow-card .sentence-en{font-size:19px;line-height:1.4}
.flow-card .sentence-zh{font-size:12px;line-height:1.5;margin-top:4px}
.flow-card-actions{grid-template-columns:24px repeat(3,minmax(0,1fr));gap:2px;padding:0 7px 2px;align-items:center}
.flow-number{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.flow-card-actions button{font-size:11px;min-height:44px;padding:2px}
.favorite-star{font-size:17px}
.practice-recorder .record-message:empty,.practice-recorder .recording-result:empty{display:none}
@media(max-width:760px){
 .practice-video video{height:144px;max-height:144px;object-fit:contain}
 .practice-desk{padding:6px 12px 10px}
 .practice-toolbar{padding-bottom:3px;gap:10px}
 .practice-toolbar select{padding-block:4px}
 .continuous-deck{margin:6px -4px 8px}
 .continuous-cards{height:clamp(280px,calc(100svh - 410px),580px);padding-bottom:48px;scroll-padding-block:4px}
 .flow-card-body{padding:8px 10px 0}
 .flow-card .sentence-en{font-size:18px;line-height:1.35}
 .flow-card .sentence-zh{font-size:12px;line-height:1.45;margin-top:3px}
 .flow-card-actions{padding:0 4px 1px}
 .practice-current-meta{font-size:10px;margin-bottom:4px}
 .practice-actions>.button,.practice-actions>.record-button{min-height:44px;padding-block:8px}
 .is-continuous .practice-desk{padding-bottom:10px}
 .is-practicing .bottom-nav{margin-top:10px;padding-top:10px}
}
@media(max-width:360px){.practice-video video{height:128px;max-height:128px}.flow-card .sentence-en{font-size:17px}}