/* Englio palette from shared Colors.png. Darker text and pale surfaces preserve contrast. */
:root{
 --air-blue:#658E9C;
 --navy:#3C76BB;
 --clay:#F7DBA7;
 --navy-hover:#32649F;
 --page:#F4F3EF;
 --surface:#FCFBF8;
 --air-pale:#E5EEF0;
 --clay-pale:#F7DBA7;
 --muted:#536779;
 --border:#CCD9DD;
 --field-border:#8BA7B1;
 --clay-ink:#765200;
 --screen:#3C76BB;
 --wave-background:#E5EEF0;
 --wave-selection:#F7DBA7;
 --wave-ink:#658E9C;
 --wave-playhead:#3C76BB;
}
:root{font-family:system-ui,-apple-system,sans-serif;color:var(--navy);background:var(--page);--blue:var(--navy);--line:var(--border);font-size:16px}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:40px;padding:20px 4vw;background:#fff;border-bottom:1px solid var(--line)}header a{margin-left:auto;color:var(--muted);font-size:14px}.brand{font-size:33px;font-weight:850;letter-spacing:-1.5px}.brand small{display:block;font-size:10px;letter-spacing:2px}.active{background:var(--clay-pale)!important;color:var(--navy)!important}nav{display:flex;gap:6px}nav button{border:0}main{max-width:1600px;margin:auto;padding:26px 4vw}.source{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}.privacy{font-size:13px;color:var(--muted);line-height:1.6}#filename{font-size:14px;max-width:280px;overflow-wrap:anywhere}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(350px,1fr);gap:28px;align-items:start}.screen{aspect-ratio:16/9;min-height:200px;background:var(--screen);position:relative;border-radius:10px;overflow:hidden}video{width:100%;height:100%}#emptyVideo{position:absolute;inset:0;display:grid;place-items:center;color:#c4d8df;pointer-events:none;padding:25px;text-align:center}.transport{display:flex;gap:8px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}output{font-size:24px;font-variant-numeric:tabular-nums;margin-right:auto}.lesson,.ai,.wavebox{background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden}.ai{padding:22px;margin-top:24px}.ai p{font-size:14px;line-height:1.6}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px}.ai .sectionhead,#editor .sectionhead{padding:0 0 18px}h1,h2{margin:0;font-size:19px}h2{font-size:17px}h1 span{font-size:14px;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--muted)}#connection{font-size:12px;color:var(--muted)}.range{display:flex;gap:12px;align-items:end}.range label{flex:1;min-width:0}.range button{margin-bottom:16px}.wavebox{margin-top:22px}.wavebox .sectionhead{padding-bottom:0}.wavebox label{display:flex;align-items:center;gap:8px}canvas{width:100%;height:140px;display:block;cursor:crosshair}.hint,.footnote{font-size:12px;line-height:1.5;color:var(--muted)}.hint{padding:0 15px 12px}.footnote{padding:0 20px 15px}button,.filebutton{font:inherit;font-size:14px;font-weight:550;border:1px solid var(--line);background:white;color:var(--navy);border-radius:6px;padding:10px 13px;cursor:pointer}button:hover,.filebutton:hover{background:var(--air-pale)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--blue);border-color:var(--blue);color:white}.primary:hover{background:var(--navy-hover)}label{display:block;font-size:13px;font-weight:600;margin-bottom:16px}input,textarea,select{font:inherit;width:100%;padding:10px;border:1px solid var(--field-border);border-radius:5px;margin-top:6px;color:inherit;background:white}textarea{resize:vertical}select{margin:0}.filebutton{display:inline-block;margin:0}.filebutton input{position:absolute;width:1px;height:1px;opacity:0}.filebutton:focus-within{outline:3px solid var(--air-blue)}.tabs{display:flex;padding:0 20px 14px;gap:8px}.tabs span{font-size:12px;margin-left:5px}.list{max-height:390px;overflow:auto;border-block:1px solid var(--line)}.segment{display:flex;width:100%;text-align:left;border:0;border-bottom:1px solid var(--border);border-radius:0;padding:16px 20px;gap:12px;line-height:1.5}.segment.active{box-shadow:inset 3px 0 var(--navy)}.segment .number{font-size:13px;color:var(--muted)}.segment small{display:block;color:var(--muted);font-size:12px;margin-top:4px}.segment strong{font-weight:500;overflow-wrap:anywhere}.empty{font-size:14px;color:var(--muted);padding:25px;line-height:1.6}#editor{padding:20px}.bounds{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bounds label{margin-bottom:7px}.bounds button{width:100%;font-size:12px}.nudges{display:flex;gap:6px;margin:6px 0 18px}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}details{margin-top:18px}summary{font-size:14px;cursor:pointer;font-weight:600}.danger{color:#ae3541;border:0}#caption{padding:0 15px;font-size:23px;line-height:1.5}#japanese{font-size:17px;color:var(--muted)}#status,#aiStatus{font-size:14px;min-height:20px;line-height:1.5}.error{color:#b4293d!important}#draftActions{padding:16px 20px;background:var(--air-pale);font-size:12px}#draftActions span{display:block;margin-top:8px}.files{display:flex;gap:8px;padding:16px 20px;border-top:1px solid var(--line)}#words{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}#words button{padding:6px 8px;font-size:13px}progress{width:100%;accent-color:var(--blue)}[hidden]{display:none!important}body.player .author{display:none!important}body.player .list{max-height:75vh}:focus-visible{outline:3px solid var(--air-blue);outline-offset:2px}@media(max-width:950px){.workspace{grid-template-columns:1fr}header{gap:15px}header a{display:none}main{padding:20px}.transport{flex-wrap:wrap}}@media(max-width:440px){.range{flex-wrap:wrap}.range label{flex-basis:40%}header{padding:15px}.bounds{gap:8px}main{padding:12px}}

.studentNav,#overlayText{display:none}body.player main{max-width:1160px}body.player .workspace{display:block}body.player .lesson,body.player .transport,body.player #status,body.player #caption{display:none}body.player .studentNav{display:flex;justify-content:center;gap:12px;background:var(--navy);padding:12px;border-radius:0 0 10px 10px}body.player .studentNav button{border:0;color:white;background:transparent;font-size:18px;padding:14px 30px}body.player .studentNav button:hover{background:var(--navy-hover)}body.player .screen{border-radius:10px 10px 0 0}body.player #overlayText{display:block;position:absolute;bottom:6%;left:5%;right:5%;width:fit-content;max-width:90%;margin:auto;background:rgba(8,17,29,.82);padding:.3em .65em;border-radius:7px;color:white;font-size:clamp(23px,3.3vw,40px);font-weight:650;line-height:1.35;text-align:center;text-shadow:0 2px 3px #000;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none}@media(max-width:500px){body.player .studentNav button{padding:12px 8px;flex:1;font-size:16px}}

body.player .watch{max-width:calc((100dvh - 210px)*16/9);margin:auto;width:100%}@media(max-height:500px){body.player .watch{max-width:none}}
.libraryhead{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:16px 0 24px}.libraryhead h1{font-size:32px;margin-top:6px}.libraryhead p{color:var(--muted)}.librarytools{display:flex;gap:10px;align-items:center}.librarytools span{font-size:13px;color:var(--muted);margin-left:auto}.lessonCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:24px}.lessonCard{background:#fff;border:1px solid #A9BEC5;border-radius:12px;overflow:hidden;box-shadow:0 5px 16px #3c76bb06}.openCard{padding:0;border:0;border-radius:0;width:100%;text-align:left;display:block;min-height:280px}.openCard img,.cardPlaceholder{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.cardPlaceholder{display:grid;place-items:center;background:var(--navy);color:var(--clay);font-size:40px;font-weight:750;letter-spacing:-2px}.cardText{padding:20px}.cardText h2{font-size:20px}.cardText p{font-size:14px;line-height:1.6;color:var(--muted);white-space:pre-wrap}.cardText small{color:var(--muted);font-size:12px}.cardActions{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid var(--line)}.lessonbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}#lessonHeading{font-size:20px;font-weight:650}#saveState{margin-left:auto;color:var(--muted);font-size:13px}.lessoninfo{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;background:white;padding:24px;border:1px solid var(--line);border-radius:10px;margin-bottom:22px}.lessonfields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.lessonfields label:first-child{grid-column:1/-1}.lessonfields button{justify-self:start}.coverEditor img,#coverPlaceholder{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;background:var(--air-pale)}.coverEditor{max-width:400px}.coverEditor button{width:100%;margin-top:10px}#coverPlaceholder{display:grid;place-items:center;color:var(--muted);font-size:14px}#coverStatus{font-size:12px;color:var(--muted)}.segmentrow{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}.segmentrow .segment{flex:1;min-width:0;border:0;padding-left:6px}.draghandle{padding:8px;border:0;border-radius:0;font-size:22px;color:var(--air-blue);cursor:grab}.rowactions{display:flex;align-items:center;gap:0;padding-right:5px}.rowactions button{font-size:12px;padding:7px 5px;border:0}.dropTarget{box-shadow:inset 0 3px var(--navy);background:var(--air-pale)}body.player .lessonbar #lessonHeading{margin-right:auto}body.player #libraryView{max-width:1200px;margin:auto}#libraryStatus{font-size:14px}.openCard:disabled{opacity:1;cursor:default}@media(max-width:850px){.lessoninfo{grid-template-columns:1fr}.coverEditor{max-width:100%}.libraryhead{flex-wrap:wrap}.lessonbar{flex-wrap:wrap}.lessonfields{display:block}.rowactions button{padding:7px 4px}}@media(max-width:420px){.rowactions{flex-wrap:wrap;width:65px}.lessonCards{grid-template-columns:1fr}}
:root{--blue:var(--navy);--line:var(--border);background:var(--page);color:var(--navy)}header{background:var(--surface)}.brand{color:var(--navy)}.active{background:var(--clay-pale)!important;color:var(--navy)!important}.primary:hover{background:var(--navy-hover)}.studentOnly,.studentOptions{display:none}.loginView{min-height:80vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 20% 30%,var(--air-pale),transparent 60%)}.loginView form{width:min(100%,390px);padding:35px;background:#ffffffd9;border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 70px #3c76bb10}.loginView .brand{margin-bottom:30px}.loginView h1{font-size:25px}.loginView p{font-size:14px;color:var(--muted);line-height:1.6}.loginView button{width:100%;margin-top:6px}.signedOut header{display:none}#signedInAs{margin-left:auto;font-size:13px;color:var(--muted)}header{gap:18px;flex-wrap:wrap}header a{margin-left:0}#mainNav{flex-wrap:wrap}.accountLayout{display:grid;grid-template-columns:1fr 1fr;gap:28px}#userList button{display:block;width:100%;text-align:left;margin-bottom:8px}#userForm{max-width:440px;background:white;border-radius:12px;padding:25px}#userForm h2{margin-bottom:24px}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}.trackerCard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;margin:18px 0}.trackerCard p{font-size:13px;color:var(--muted)}.trackerLine{display:flex;justify-content:space-between;gap:30px;padding:12px 0;border-top:1px solid var(--line);line-height:1.5}.trackerLine strong{font-size:13px;white-space:nowrap}#trackerStudent{max-width:350px}.studentOptions label{margin:0;display:flex;align-items:center;gap:12px;font-weight:400}.studentOptions select{width:auto;border:0;background:transparent;font-size:13px}.studentOptions button{border:0;background:transparent}.studentOptions{align-items:center;justify-content:space-between;padding:12px 2px;gap:12px}.studentOptions,.lessonbar,header{transition:opacity .35s ease}body.player{background:radial-gradient(ellipse at 15% 5%,var(--air-pale) 0,transparent 55%),var(--page);min-height:100dvh}body.player .brand small{display:none}body.player main{padding-top:18px;max-width:1440px}body.player .watch{max-width:min(1100px,calc((100dvh - 280px)*16/9));width:100%}body.player .screen{background:var(--screen);box-shadow:0 14px 50px #3c76bb20;min-height:0}body.player .studentOptions{display:flex}body.player .studentOnly{display:block;font-size:12px;color:var(--clay-ink);text-align:center}body.player .studentNav{background:var(--navy);gap:8px;padding:8px}body.player .studentNav button{border-radius:9px;font-size:16px;min-height:48px;padding:10px 30px}body.player .studentNav button:hover{background:var(--navy-hover)}body.player .studentNav #studentReplay{background:var(--clay);color:var(--navy);min-width:140px}body.player #overlayText{background:linear-gradient(#3c76bbe8,#3c76bbf2);font-size:clamp(21px,2.8vw,38px);font-weight:600;bottom:5%;padding:.35em .65em;text-shadow:0 1px 3px #000;max-height:90%;overflow:auto}#overlayEnglish,#overlayJapanese{display:block}#overlayJapanese{font-size:.69em;font-weight:450;line-height:1.5;margin-top:.3em;color:#FFFFFF}#studentSegments{background:#ffffffa8;border-radius:12px;overflow:auto;max-height:300px;border:1px solid var(--line);margin-bottom:20px}#studentSegments button{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:16px 22px;font-size:17px;line-height:1.6;font-weight:400;background:transparent}body.player.quiet header:not(:hover):not(:focus-within),body.player.quiet .lessonbar:not(:hover):not(:focus-within),body.player.quiet .studentOptions:not(:hover):not(:focus-within){opacity:.15}body.player .lessonbar{max-width:1100px;margin:0 auto 18px}body.player #lessonHeading{font-size:16px;color:var(--muted)}.cardPlaceholder{background:linear-gradient(135deg,var(--air-blue),var(--navy));color:var(--clay)}.lessonCard{border-radius:15px;transition:transform .2s,box-shadow .2s}.lessonCard:hover{transform:translateY(-3px);box-shadow:0 10px 35px #3c76bb16}.openCard:hover{background:var(--surface)}@media(max-width:760px){.accountLayout{grid-template-columns:1fr}header{gap:10px;padding:14px 20px}#mainNav{order:3;width:100%}body.player .watch{max-width:100%}.trackerLine{flex-direction:column;gap:6px}body.player main{padding:12px}.studentOptions{flex-wrap:wrap}.studentOptions label{gap:4px}body.player .studentNav button{padding:10px 8px;flex:1}body.player .studentNav #studentReplay{min-width:0}body.player #overlayText{font-size:clamp(20px,4.2vw,30px)}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-height:550px) and (min-width:761px){body.player header{padding:6px 20px}body.player .watch{max-width:calc((100dvh - 165px)*16/9)}body.player .lessonbar{margin-bottom:8px}body.player .studentOptions{padding:3px}}

body:not(.player) #studentSegments{display:none!important}
.languageControl{display:flex;align-items:center;justify-content:flex-end;gap:10px;max-width:1600px;margin:auto;padding:8px 4vw;color:var(--muted);font-size:12px}.languageControl label{margin:0;font-size:12px;font-weight:400}.languageControl select{width:auto;padding:5px 9px;font-size:13px}.signedOut .languageControl{position:absolute;top:10px;right:10px}.signedOut .loginView{padding-top:75px}.badge{font-size:11px;background:var(--air-pale);color:var(--navy);border-radius:30px;padding:6px 10px}body[data-role="student"] #usersTab,body[data-role="student"] #usersView{display:none!important}#flowEditor{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-bottom:24px}#flowEditor .hint{padding:0;line-height:1.7}#flowEditor .actions select{width:auto;flex:1;min-width:180px}.flowRow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 0}.flowRow strong{flex:1;min-width:160px;font-size:14px}.flowRow label{display:flex;align-items:center;gap:6px;margin:0;font-size:12px}.flowRow input{width:65px;margin:0}.flowRow button{padding:8px 10px;font-size:12px}#flowStudent{margin:16px 0 25px;padding:20px;background:#ffffffba;border:1px solid var(--line);border-radius:14px}.flowHeading{display:flex;align-items:center;justify-content:space-between;gap:12px}.flowHeading h2{font-size:17px}.flowMessage{font-size:13px;color:var(--clay-ink)}.exercise{padding-top:18px;line-height:1.7}.exercise h2{font-size:22px}.exercise>button{margin-right:8px;margin-bottom:8px}.exerciseText{font-size:clamp(19px,2.5vw,27px);line-height:1.7;padding:12px 0}.exercise form{display:flex;gap:10px;margin:15px 0}.exercise form input{margin:0;flex:1;min-width:0;font-size:19px}.feedback{color:var(--navy);font-weight:600;min-height:24px}.feedback.assisted{color:var(--clay-ink)}.correctAnswer{background:var(--clay-pale);padding:12px;border-radius:8px;font-size:19px}.tileZone{display:flex;gap:8px;flex-wrap:wrap;min-height:70px;padding:13px;border:1px dashed var(--air-blue);border-radius:10px;margin:16px 0}.answerZone{background:var(--air-pale)}.wordTile{background:white;box-shadow:0 3px 0 var(--border);font-size:18px;padding:10px 14px;cursor:grab}.wordTile:active{cursor:grabbing}.choices{display:grid;gap:10px;margin:18px 0}.choices button{text-align:left;font-size:17px;line-height:1.6;padding:14px}.activityMode .studentNav,.activityMode .studentOptions,.activityMode #studentSegments,.activityMode #overlayText{display:none!important}body.player.activityMode .watch{max-width:900px}body.player.activityMode .screen{max-height:48dvh;aspect-ratio:16/9}#practiceTracker h2{margin-top:20px}@media(max-width:600px){.flowRow strong{flex-basis:100%}#flowStudent{padding:14px}.flowHeading{flex-wrap:wrap}.wordTile{font-size:16px;padding:9px 11px}.exercise form{flex-wrap:wrap}.exercise form input{flex-basis:100%}.languageControl{padding-right:15px}#roleBadge{display:none}.activityMode .screen{max-height:none!important}}
body.player #flowStudent{font-size:16px;color:var(--navy);text-align:left}body.player.activityMode .screen{max-width:640px;margin:0 auto;border-radius:10px}body.player #flowStudent .exercise p{font-size:15px}body.player #flowStudent .exercise .exerciseText,body.player #flowStudent .exercise .correctAnswer{font-size:22px}body.player #flowStudent .exercise .eyebrow{font-size:12px}

/* Keep the YouTube surface responsive while retaining Englio's shared controls. */
#youtubePlayback{width:100%;aspect-ratio:16/9;min-height:200px;background:var(--screen)}
#youtubePlayback iframe{display:block;width:100%;height:100%;border:0}
.screen video[hidden],#youtubePlayback[hidden]{display:none!important}

body.player .screen.youtubeScreen{min-height:200px}#youtubePlayback{height:100%;aspect-ratio:auto}

/* Gold accents complement the blue sampled from the Englio logo. */
body.player .studentNav #studentReplay:hover{background:#EBC98E}
body.player .studentNav button:focus-visible{outline-color:var(--clay)}
.active{box-shadow:inset 0 -2px var(--clay)}
.segment.active{box-shadow:inset 3px 0 var(--clay)}
.badge{background:var(--air-pale);color:var(--navy)}
.lessonfields label:has(#youtubePlaybackUrl),#youtubePlaybackHelp{grid-column:1/-1}
.loginView form{border-top:4px solid var(--clay)}
::selection{background:var(--clay-pale);color:var(--navy)}

#membership{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;background:var(--clay-pale);color:var(--navy);padding:1rem 1.3rem;border-radius:16px;margin-bottom:1.5rem}#membership[hidden]{display:none}#membership a{color:var(--navy);font-weight:700}#subscriptionForm{max-width:640px;margin:2rem 0;padding:1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:18px}#subscriptionForm input{width:100%}

/* Lesson browsing and a focused, scrollable description card. */
.lessonTabs{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}.lessonTabs button{min-width:110px;border-radius:30px}
.cardExcerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;white-space:normal!important;min-height:4.8em}
#lessonDetail{border:1px solid var(--border);border-radius:22px;padding:0;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 40px);color:var(--navy);background:var(--surface);box-shadow:0 24px 100px #3c76bb55}
#lessonDetail[open]{display:flex;flex-direction:column}#lessonDetail::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(5px)}
#detailClose{position:absolute;right:12px;top:12px;z-index:1;border-radius:50%;font-size:25px;width:44px;height:44px;padding:0;box-shadow:0 2px 12px #3c76bb33}
.detailScroll{overflow:auto;min-height:0;padding:0 28px 24px}#detailImage{width:calc(100% + 56px);margin:0 -28px 24px;max-height:300px;object-fit:cover;aspect-ratio:16/9}#detailTitle{font-size:26px;padding-right:24px;line-height:1.4;margin-top:18px}#detailLanguages{display:flex;gap:8px;margin:20px 0}#detailDescription{font-size:18px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}.detailActions{display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--border);padding:16px 28px}.detailActions .primary{min-width:150px}
body.player #overlayText{left:12px;right:12px;bottom:12px;width:auto;max-width:none;margin:0;text-wrap:balance;white-space:normal}#overlayEnglish,#overlayJapanese{text-wrap:balance}
#studentSegments{max-height:none;margin-bottom:0;min-height:160px}#studentSegments .segmentJapanese{display:block;color:var(--muted);font-size:.86em;line-height:1.6;margin-top:5px}#studentSegments button>span{display:block}
body.player.segmentsOpen:not(.activityMode) .watch{max-width:min(1100px,calc((100dvh - 450px)*16/9));min-width:min(100%,480px)}
@media(max-width:760px){body.player.segmentsOpen:not(.activityMode) .watch{max-width:100%;min-width:0}#detailDescription{font-size:16px}.detailScroll{padding:0 20px 20px}#detailImage{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}#detailTitle{font-size:22px}}

body.player .screen video,body.player #youtubePlayback{pointer-events:none;user-select:none}

#classInvitation{max-width:760px;margin:0 0 24px;padding:24px;background:#edf3f5;border:1px solid #a9bec5;border-radius:12px}#classInviteUrl{width:100%;margin-bottom:12px}#userList button:disabled{opacity:1;cursor:default}

.authoringNote,.creditPanel{padding:16px;background:#edf3f5;border:1px solid #a9bec5;border-radius:10px;margin-block:16px}.creditPanel button{margin:8px 8px 0 0}#creditHistory{font-size:.85rem;padding-left:20px}#authoringHelp{max-width:680px;max-height:85dvh;overflow:auto;padding:28px;border:1px solid #a9bec5;border-radius:16px;color:var(--navy);background:#fff}#authoringHelp p{line-height:1.7}#authoringHelp a{text-decoration:underline}#authoringHelp::backdrop{background:#172a40aa}

/* Shared Englio logo across signed-in screens, login, and lesson placeholders. */
.brand{flex-shrink:0}.brandLogo{display:block;width:150px;height:auto;max-width:100%;object-fit:contain}.brand small{margin-top:5px}.loginView .brandLogo{width:220px;margin-bottom:18px}.cardPlaceholder{background:var(--surface,#fff);display:flex;align-items:center;justify-content:center;padding:28px}.openCard .cardPlaceholder .placeholderLogo{width:min(80%,240px);height:auto;aspect-ratio:auto;object-fit:contain}body.player .brandLogo{width:120px}@media(max-width:760px){.brandLogo{width:125px}.loginView .brandLogo{width:190px}}

#googleSignIn{display:flex;justify-content:center;margin:22px 0 10px}#googleHelp:empty{display:none}.auth-contact{text-align:center;font-size:14px}#loginForm{max-width:480px}#loginForm h1{line-height:1.2}

#supportView{max-width:900px;margin:auto}#supportView>p{line-height:1.7}#supportForm{padding:24px;background:#fff;border:1px solid var(--line);border-radius:12px;margin:24px 0}#supportForm .hint{padding:0}.supportTicket{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff;margin:16px 0}.supportTicket h3{margin-top:0}.supportTicket p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}.supportImages{display:flex;flex-wrap:wrap;gap:12px}.supportImages img{max-width:220px;max-height:160px;object-fit:contain;border:1px solid var(--line)}header{flex-wrap:wrap}#mainNav{flex-wrap:wrap}

/* Keep wheel and touch scrolling inside the segment list at either end. */
#studentSegments{overscroll-behavior-y:contain}

/* Gold surfaces use dark neutral text for legibility. */
#membership{background:#F7DBA7;color:#242424}#membership a{color:#242424}
body.player .studentNav #studentReplay{color:#242424}

/* The lesson player is a viewport workspace; only its content panels scroll. */
html:has(body.player #workspaceView:not([hidden])){overflow:hidden;overscroll-behavior:none}
body.player:has(#workspaceView:not([hidden])){height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
body.player:has(#workspaceView:not([hidden]))>header,
body.player:has(#workspaceView:not([hidden]))>.languageControl{flex:none;width:100%}
body.player:has(#workspaceView:not([hidden]))>main{flex:1;min-height:0;width:100%;overflow:hidden;display:flex;flex-direction:column;padding-bottom:12px}
body.player #workspaceView:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
body.player #workspaceView>.lessonbar{flex:none;width:100%}
body.player #workspaceView>.workspace{flex:1;min-height:0;display:flex}
body.player #workspaceView .watch{flex:1;min-height:0;min-width:0;max-width:1100px;display:flex;flex-direction:column;container-type:size}
body.player #workspaceView .screen{flex:none;align-self:center;width:min(100%,calc((100cqh - 140px)*16/9));height:auto;aspect-ratio:16/9;min-height:0;max-height:none}
body.player.segmentsOpen:not(.activityMode) #workspaceView .screen{width:min(100%,calc((65cqh - 140px)*16/9))}
body.player #workspaceView .studentNav,body.player #workspaceView .studentOptions{flex:none}
body.player #studentSegments{flex:1;min-height:0;height:auto!important;overflow:auto;overscroll-behavior:contain}
body.player #workspaceView #activityStatus:empty{display:none}
body.player #workspaceView #flowStudent{min-height:0;max-height:30%;overflow:auto;overscroll-behavior:contain;margin:8px 0 0}
body.player.activityMode #workspaceView .screen{width:min(100%,calc(45cqh*16/9))}
body.player.activityMode #workspaceView #flowStudent{flex:1;max-height:none}
@media(max-height:650px){body.player:has(#workspaceView:not([hidden]))>header{padding:5px 12px}body.player:has(#workspaceView:not([hidden]))>.languageControl{padding-block:3px}body.player #workspaceView>.lessonbar{margin-bottom:6px}body.player:has(#workspaceView:not([hidden])) #membership{padding:6px 12px;margin-bottom:8px;font-size:12px}body.player #workspaceView .studentOptions{padding-block:3px}body.player #workspaceView .studentNav{padding:3px}body.player #workspaceView .studentNav button{min-height:36px;padding-block:5px}}

/* Shared branding on every app screen. */
body{min-height:100dvh;display:flex;flex-direction:column}body>main{width:100%}body>.languageControl{width:100%}
body.player .brand small{display:block}body.player .brandLogo{width:150px}
.appFooter{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#3C76BB;color:white;padding:10px 4vw;margin-top:auto;font-size:12px;min-height:48px}
.appFooter img{display:block;width:110px;height:auto}.appFooter a{color:white}.appFooter>a:first-child{flex-shrink:0}
body.player:has(#workspaceView:not([hidden])) .appFooter{margin-top:0}
@media(max-width:600px){.brand small{letter-spacing:0;font-size:9px}.appFooter{padding:8px 12px;font-size:10px}.appFooter img{width:80px}}
body.player #workspaceView>.workspace{align-items:stretch}
body.player #workspaceView .watch{align-self:stretch;margin:0 auto;width:100%}

/* Lesson states form one tab strip above the card collection. */
#storageLabel{display:none}
.lessonTabs{gap:0;border-bottom:2px solid var(--navy);padding:0 6px;margin-top:24px;flex-wrap:nowrap}
.lessonTabs button{position:relative;min-width:0;flex:0 1 180px;margin:0 4px -2px 0;padding:12px 18px;border:1px solid var(--border);border-bottom:2px solid var(--navy);border-radius:10px 10px 0 0;background:var(--air-pale);color:var(--muted);box-shadow:none;white-space:nowrap}
.lessonTabs button[aria-pressed="true"]{background:#F7DBA7;color:var(--navy);font-weight:700;border:2px solid var(--navy);border-bottom:2px solid #F7DBA7;box-shadow:none;z-index:1}
.lessonTabs button:hover{background:#F7DBA7}.lessonTabs button:focus-visible{outline-offset:-5px}
@media(max-width:500px){.lessonTabs{padding:0}.lessonTabs button{flex:1;padding:10px 7px;margin-right:3px;font-size:12px}}
/* Keep library tabs at a consistent top position, regardless of card count. */
body>main{margin:0 auto}
/* A fully opaque subtitle panel prevents underlying captions showing through. */
body.player #overlayText{background:#28558B}
body.player #youtubePlayback{min-height:0}

body>.languageControl{margin:0 auto}

/* Landscape learning keeps the video and its controls beside the clip list. */
@media(min-width:900px) and (orientation:landscape){
 body.player.segmentsOpen:not(.activityMode) #workspaceView .watch{display:grid;max-width:none;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);grid-template-rows:auto auto auto auto auto minmax(0,1fr);column-gap:24px;align-content:start}
 body.player.segmentsOpen:not(.activityMode) #workspaceView .screen{grid-column:1;grid-row:1;width:min(100%,calc((100cqh - 160px)*16/9));justify-self:center;align-self:start}
 body.player.segmentsOpen:not(.activityMode) #workspaceView .studentNav{grid-column:1;grid-row:2}
 body.player.segmentsOpen:not(.activityMode) #workspaceView .studentOptions{grid-column:1;grid-row:3}
 body.player.segmentsOpen:not(.activityMode) #workspaceView #playbackMessage{grid-column:1;grid-row:4;margin:4px 0}
 body.player.segmentsOpen:not(.activityMode) #workspaceView #activityStatus{grid-column:1;grid-row:5;margin:4px 0}
 body.player.segmentsOpen:not(.activityMode) #workspaceView #flowStudent{grid-column:1;grid-row:6;max-height:none}
 body.player.segmentsOpen:not(.activityMode) #workspaceView #studentSegments{grid-column:2;grid-row:1/-1;align-self:stretch;margin:0;min-width:0}
 body.player.segmentsOpen:not(.activityMode) #studentSegments button{padding:14px 16px;font-size:16px}
}