/* Shared learning UI. Contract: docs/learning-design-rules.md. Load after legacy skins. */
:root{--learn-control-size:44px;--learn-icon-size:18px;--learn-track-size:3px}
.small-play{position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 44px;width:44px!important;height:44px!important;box-sizing:border-box;line-height:0!important;padding:0!important;border:1px solid #ffffff70!important;border-radius:50%!important;background:#f4f7fc!important;color:#274d7b!important;box-shadow:0 2px 6px #10284012!important;font-size:0!important;touch-action:manipulation;transition:background .15s,transform .15s}
.small-play:before{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;background:currentColor;transform:translateX(1px);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.2c0-1.2 1.3-1.9 2.3-1.3l11 6.8c1 .6 1 2 0 2.6l-11 6.8c-1 .6-2.3-.1-2.3-1.3Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5.2c0-1.2 1.3-1.9 2.3-1.3l11 6.8c1 .6 1 2 0 2.6l-11 6.8c-1 .6-2.3-.1-2.3-1.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
.small-play[data-paused="false"]:before{transform:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='5' height='16' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='4' width='5' height='16' rx='1.5'/%3E%3Crect x='14' y='4' width='5' height='16' rx='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.small-play:hover{background:#fff!important}.small-play:active{transform:scale(.94)}
/* A large hit area around a thin scrubber, with the thumb centered on it. */
.timeline{background:transparent!important;isolation:isolate;cursor:pointer}
.timeline:before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;transform:translateY(-50%);background:#607899;border-radius:4px;z-index:-1}
.timeline i{position:absolute;left:0;top:50%;margin:0!important;height:3px!important;transform:translateY(-50%);border-radius:4px}
.timeline b{top:50%!important;width:12px;height:12px;box-shadow:0 1px 4px #12243b33}
.playback-rate{min-width:60px;min-height:44px;border-radius:14px!important;background:#ffffff0c;color:inherit;font:500 13px var(--sans);padding:8px!important;cursor:pointer}
.playback-rate option{background:#fff;color:#203550}
.small-play:focus-visible,.playback-rate:focus-visible{outline:2px solid #a6c8f5;outline-offset:2px}
/* Keep every transport on one baseline, including narrow transcript/video splits. */
.transport,.segment-transport,.relisten-transport{box-sizing:border-box;align-items:center;flex-wrap:nowrap;gap:12px;min-width:0}
.transport>button,.segment-transport>button,.relisten-transport>button{flex-shrink:0;min-width:44px;min-height:44px;padding:0 8px;line-height:1;font-size:14px}
.transport time,.segment-transport time,.relisten-transport time{flex:none;min-width:34px;font:400 12px/1 var(--sans);font-variant-numeric:tabular-nums;text-align:center}
.transport .timeline,.segment-transport .timeline,.relisten-transport .timeline{height:32px;min-height:32px;min-width:24px}
select.playback-rate{appearance:none;-webkit-appearance:none;flex:0 0 64px;box-sizing:border-box;width:64px;min-width:64px;height:36px;min-height:36px;padding:0 20px 0 10px!important;border:1px solid #7892b3!important;border-radius:10px!important;outline:none;box-shadow:none;background:#ffffff08 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23dae6f7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center/10px 6px no-repeat;color:#e3edfc;font:500 12px/1 var(--sans);cursor:pointer}
select.playback-rate:focus-visible{outline:2px solid #a6c8f5;outline-offset:2px}
/* Definitions always get their own full-width row; actions never squeeze the translation. */
.word-detail:not(.hidden){display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:10px;max-width:100%;min-width:0;box-sizing:border-box;padding:14px 16px}
.word-detail>span{display:flex;flex:0 0 100%;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;max-width:100%}
.word-detail b{max-width:100%;font:600 18px/1.45 var(--sans);overflow-wrap:anywhere}
.word-detail em{display:block;min-width:0;max-width:100%;font:400 14px/1.6 var(--sans);color:#526a86;word-break:normal;overflow-wrap:break-word}
.word-phonetic{display:block;max-width:100%;margin:4px 0;font:400 14px/1.5 Arial,"Noto Sans",sans-serif;letter-spacing:0;color:#60738a;overflow-wrap:anywhere;word-break:normal;text-transform:none}
.word-detail>button{flex:0 0 auto;min-height:40px;padding:8px 14px;font-size:12px;line-height:1.4;white-space:normal}
.transcript-line:has(.word-detail:not(.hidden)){opacity:1}
@media(max-width:900px){
 .transport,.segment-transport,.relisten-transport{gap:6px;padding-inline:8px}
 .transport>button,.segment-transport>button,.relisten-transport>button{font-size:12px;padding-inline:4px}
 .transport time,.segment-transport time,.relisten-transport time{min-width:30px;font-size:10px}
 select.playback-rate{flex-basis:58px;width:58px;min-width:58px;min-height:44px;height:44px;padding-left:8px!important;padding-right:18px!important;background-position:right 7px center;font-size:11px}
 .word-detail:not(.hidden){padding:12px;gap:8px}
 .word-detail>button{min-height:44px}
}
@media(max-width:900px){
 #player-view .media-column{min-width:0}
 #player-view .transport{min-width:0;gap:6px;padding-inline:8px}
}
@media(max-width:420px){
 /* First-watch has an extra forward action: give seeking its own row. */
 #player-view .transport{display:grid;grid-template-columns:44px 44px 44px minmax(0,1fr) 58px;grid-template-rows:28px 44px;gap:4px 6px;height:88px;padding:6px 8px}
 #player-view .transport>time:first-of-type{grid-area:1/1;text-align:left}
 #player-view .transport>.timeline{grid-area:1/2/2/5;width:100%;height:28px;min-height:28px}
 #player-view .transport>time:last-of-type{grid-area:1/5;text-align:right}
 #player-view .transport>[data-action="rewind"]{grid-area:2/1}
 #player-view .transport>.small-play{grid-area:2/2}
 #player-view .transport>[data-action="forward"]{grid-area:2/3}
 #player-view .transport>.playback-rate{grid-area:2/5}
}
/* Action buttons center the whole label/icon group, not each fragment separately. */
.transcript-tools button,.word-detail button,.line-actions button,.page-corner-nav button,.free-player-tools button,#listen-dock button,.podcast-row-play,.podcast-download,.podcast-filters button{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:6px;box-sizing:border-box;line-height:1.4;vertical-align:middle}
.transcript-tools button,.word-detail button,.line-actions button{border-radius:12px;border-width:1px;transition:background-color .15s,border-color .15s,box-shadow .15s}
.transcript-tools button:active,.word-detail button:active,.line-actions button:active{box-shadow:inset 0 1px 3px #25466c12}
.page-corner-nav button svg,.transcript-tools button svg,.word-detail button svg{display:block;flex-shrink:0}
/* A failed course request must never reveal another course's static player. */
.course-load-panel{box-sizing:border-box;width:min(100%,580px);margin:clamp(72px,12vh,140px) auto 48px;padding:clamp(24px,5vw,40px);border:1px solid #d4e1f3;border-radius:24px;background:#fff;color:#213753}
.course-load-panel h1{font-size:clamp(24px,5vw,32px);line-height:1.35;margin:16px 0}
.course-load-panel p{overflow-wrap:anywhere;line-height:1.65}
.course-load-panel>p:first-child{color:#526e96}
.course-load-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.course-load-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:1px solid #cbdcf2;border-radius:12px;background:#f5f8ff;color:#285793;font:inherit}
.course-load-actions [hidden]{display:none}