/* A compact brand lockup, kept consistent across reading preferences. */
:is(.site-header,.game-brand-header) .brand{gap:11px;min-height:52px;align-items:center;border-radius:10px;text-decoration:none}
:is(.site-header,.game-brand-header) .brand-mark{display:block;flex:0 0 48px;width:48px;height:48px;border-radius:14px;background:#124c38}
:is(.site-header,.game-brand-header) .brand-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
:is(.site-header,.game-brand-header) .brand-wordmark{display:flex;align-items:baseline;margin:0;color:var(--pine,#145442);font-family:var(--sans,Arial,sans-serif);font-size:30px;line-height:1.08;letter-spacing:-1.2px;white-space:nowrap}
:is(.site-header,.game-brand-header) .brand-wordmark span{margin:0;font-size:inherit;line-height:inherit;letter-spacing:inherit}
:is(.site-header,.game-brand-header) .brand-wordmark .brand-pine{font-weight:700}
:is(.site-header,.game-brand-header) .brand-wordmark .brand-lingo{font-weight:500}
:is(.site-header,.game-brand-header) .brand-credit{display:block;margin:0;color:var(--muted,#586961);font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.15px;white-space:nowrap;text-transform:none}
:is(.site-header,.game-brand-header) .brand:focus-visible{outline:3px solid var(--blue,#27588e);outline-offset:5px}
@media(max-width:400px){:is(.site-header,.game-brand-header) .brand{gap:9px}:is(.site-header,.game-brand-header) .brand-mark{flex-basis:40px;width:40px;height:40px;border-radius:11px}:is(.site-header,.game-brand-header) .brand-wordmark{font-size:25px;letter-spacing:-.9px}:is(.site-header,.game-brand-header) .brand-copy{gap:2px}}
/* Learning and saved items share a centered navigation row. */
.learning-steps{display:flex;align-items:stretch;justify-content:space-between;gap:28px;min-width:0}
.site-header nav.learning-steps{order:3;flex:1 0 100%;width:100%;padding:14px 0 0;margin:0;border-top:1px solid var(--line,#dbe4e0);justify-content:space-between;gap:28px;overflow:visible;flex-wrap:nowrap}
.nav-main,.nav-saved{display:flex;align-items:stretch;gap:10px;min-width:0}
.nav-main{flex:0 1 460px}
.nav-saved{margin-inline-start:auto;flex:0 0 auto;padding-inline-start:24px;border-inline-start:1px solid var(--line,#dbe4e0)}
.learning-steps .nav-button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1 1 0;min-width:0;min-height:52px;padding:10px 16px;border:1px solid var(--line,#dbe4e0);border-radius:12px;background:var(--surface,#fff);color:var(--muted,#586961);box-shadow:none;text-decoration:none;font:600 calc(14px * var(--system-scale,1))/1.5 var(--sans,system-ui);white-space:nowrap}
.nav-saved .nav-button{background:var(--soft,#edf4ef);flex:0 0 auto}
.learning-steps .nav-step{display:inline-grid;place-items:center;flex:0 0 26px;width:26px;height:26px;min-height:0;border-radius:50%;background:var(--soft,#edf4ef);color:var(--pine,#145442);font-size:13px;font-weight:750}
.learning-steps .nav-button:hover{background:var(--soft,#edf4ef);border-color:var(--pine,#145442)}
.learning-steps .nav-button.active{background:#145442;border-color:#145442;color:#fff;box-shadow:0 3px 0 #0d3d30}
.learning-steps .nav-button.active .nav-step{background:#d6f5ba;color:#173e2c}
.learning-steps .nav-button:focus-visible{outline:3px solid var(--blue,#27588e);outline-offset:3px}
.learning-steps .nav-count,.learning-steps #saved-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin:0;border-radius:6px;padding:0 4px;background:var(--soft,#edf4ef);color:var(--pine,#145442);font-size:12px}
body>nav.learning-steps{max-width:1200px;margin:18px auto 26px;padding-inline:20px}
.nav-button.profile-menu{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;min-height:44px;margin:0;padding:9px 14px;border:1px solid var(--line,#dbe4e0);border-radius:24px;background:var(--surface,#fff);color:var(--ink,#173e35);font-size:calc(14px * var(--system-scale,1));text-decoration:none;white-space:nowrap}
.nav-button.profile-menu.active{background:#145442;color:#fff;border-color:#145442}
.profile-menu svg{flex-shrink:0}
.reader-settings{justify-content:flex-start;column-gap:24px;row-gap:12px}
.reader-settings .translation-toggle{flex:0 0 auto;width:auto;margin:0}
.voice-test-buttons.single-voice{grid-template-columns:1fr}
#reading-dialog .voice-test-buttons{margin:20px 0 4px}
#reading-dialog .service-contact{font-size:14px;line-height:1.8;overflow-wrap:anywhere}
#reading-dialog .service-contact .contact-copy-button{appearance:none;border:0;background:none;padding:0;color:var(--pine);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.15em;cursor:pointer}
#reading-dialog .service-contact .contact-copy-button:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:2px}
#reading-dialog .contact-copy-status{display:block;margin-top:4px;color:var(--pine);font-size:13px}
#reading-dialog .contact-copy-status[hidden]{display:none}
@media(max-width:1000px){.site-header nav.learning-steps,body>nav.learning-steps{gap:16px}.nav-saved{padding-inline-start:16px}.learning-steps .nav-button{padding-inline:10px}.nav-main{flex:1 1 auto}}
@media(max-width:760px){.site-header nav.learning-steps,body>nav.learning-steps{flex-direction:column;gap:12px;overflow:visible}.nav-main{width:100%}.nav-saved{align-self:flex-end;padding:0;border:0}.learning-steps .nav-button{white-space:normal!important}.nav-main .nav-label{word-break:keep-all}.nav-saved .nav-button{min-height:42px;padding:8px 14px}.site-header .profile-menu{margin-inline-start:auto}.site-header .language-pair{order:1;width:100%}}
@media(max-width:400px){.reader-settings{display:flex;column-gap:16px;row-gap:10px}.reader-settings .translation-toggle{font-size:13px}.nav-main{gap:6px}.nav-main .nav-button{flex-direction:column;gap:4px;padding:8px 6px;font-size:calc(12px * var(--system-scale,1))}.learning-steps .nav-step{width:22px;height:22px;flex-basis:22px;font-size:12px}}

.site-header .connection-location{display:none}
.player-learning-order{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;grid-column:1/-1;flex-basis:100%;font-size:12px;color:var(--muted)}
.player-learning-order[hidden]{display:none}
.player-learning-order button{min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--muted);font:inherit;cursor:pointer}
.player-learning-order button[aria-current=step]{background:var(--soft);border-color:var(--pine);color:var(--pine);font-weight:700}
.library-selection-bar>.library-learning-order{flex-basis:100%;margin:0}
.site-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;justify-items:center}
.site-header .brand{grid-column:2;grid-row:1;margin:0}
.site-header .profile-menu{grid-column:3;grid-row:1;justify-self:end;margin:0}
.site-header .language-pair{grid-column:1/-1;grid-row:2;width:min(100%,560px);margin:0;justify-content:center}
.site-header nav.learning-steps{grid-column:1/-1;grid-row:3;justify-content:center}
.learning-steps .nav-main{flex:0 1 auto}
.learning-steps .nav-saved{margin-inline-start:0;padding-inline-start:0;border-inline-start:0}
.game-brand-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.game-brand-header .brand{grid-column:2;justify-self:center}
.game-brand-header .profile-menu{grid-column:3;justify-self:end}
body>nav.learning-steps{justify-content:center}
@media(max-width:760px){.site-header nav.learning-steps,body>nav.learning-steps{align-items:center}.learning-steps .nav-main,.learning-steps .nav-saved{width:100%;justify-content:center;align-self:center}.learning-steps .nav-saved .nav-button{flex:1 1 0}.site-header .profile-menu{margin:0}}
@media(max-width:480px){.site-header,.game-brand-header{grid-template-columns:minmax(0,1fr) auto;row-gap:12px}.site-header .brand,.game-brand-header .brand{grid-column:1/-1;grid-row:1}.site-header .profile-menu,.game-brand-header .profile-menu{grid-column:1/-1;grid-row:2;justify-self:center}.site-header .language-pair{grid-row:3}.site-header nav.learning-steps{grid-row:4}}
.language-pair .site-language{grid-template-columns:minmax(150px,200px) 34px;min-width:0}
.language-pair .site-language select{width:100%;max-width:none;min-width:0}
.unavailable-course h1{font-size:clamp(24px,4vw,34px);word-break:keep-all;overflow-wrap:break-word}
@media(max-width:680px){
  .language-pair .site-language{grid-template-columns:minmax(0,1fr) 44px;gap:2px}
  .language-pair .site-language>span{grid-column:1;grid-row:1;align-self:center}
  .language-pair .language-search-trigger{grid-column:2;grid-row:1;min-width:44px;min-height:44px;border:0;background:transparent}
  .language-pair .site-language select{grid-column:1/-1;grid-row:2;font-size:12px}
  .language-pair .language-arrow{padding-top:44px}
}
@media(max-width:400px){
  .site-header .language-pair{grid-template-columns:1fr;gap:6px}
  .language-pair .site-language{grid-template-columns:48px minmax(0,1fr) 44px;column-gap:4px}
  .language-pair .site-language select{grid-column:2;grid-row:1}
  .language-pair .language-search-trigger{grid-column:3}
  .language-pair .language-arrow{display:none}
}
/* One quiet header: integrated language fields and flat navigation tabs. */
.site-header{row-gap:18px;padding-block:22px 0;box-shadow:none}
.site-header .language-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px;width:min(100%,680px);padding:0 0 2px}
.site-header .language-pair .site-language{display:grid;flex:1;grid-template-columns:minmax(0,1fr) 44px;gap:0;position:relative;background:var(--soft);border-radius:12px;padding:7px 4px 3px 12px}
.site-header .language-pair .interface-language{grid-template-columns:minmax(0,1fr);padding-inline-end:10px}
.site-header .language-pair .site-language>span{grid-column:1;grid-row:1;padding:0;font-size:11px;line-height:1.5;color:var(--muted)}
.site-header .language-pair .site-language select{grid-column:1;grid-row:2;min-height:32px;padding:2px 16px 4px 0;border:0;border-radius:4px;background:transparent;font-size:14px;line-height:1.5;color:var(--ink)}
.site-header .language-pair .language-search-trigger{grid-column:2;grid-row:1/3;align-self:center;min-width:44px;min-height:44px;border:0;background:transparent;border-radius:8px;color:var(--muted);font-size:21px}
.site-header .language-pair .language-search-trigger:hover{background:var(--surface);color:var(--pine)}
.site-header .language-pair .language-arrow{display:block;padding:0;color:var(--muted);font-size:16px}
.site-header nav.learning-steps,body>nav.learning-steps{display:flex;flex-direction:row;justify-content:center;align-items:stretch;gap:4px;padding-top:0;border-top:0}
.learning-steps .nav-main,.learning-steps .nav-saved{display:flex;flex:0 1 auto;align-self:stretch;width:auto;gap:4px;margin:0;padding:0;border:0}
.learning-steps .nav-button,.learning-steps .nav-saved .nav-button{position:relative;flex:1 1 auto;min-height:52px;padding:12px 18px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font-size:14px;white-space:nowrap!important;flex-direction:row;gap:6px}
.learning-steps .nav-button:hover{background:transparent;border-color:var(--line);color:var(--pine)}
.learning-steps .nav-button.active{background:transparent;border-color:var(--pine);color:var(--pine);box-shadow:none;font-weight:750}
.learning-steps .nav-count,.learning-steps #saved-count{min-width:18px;height:18px;padding:0 4px;font-size:11px;border-radius:9px;background:var(--soft);color:var(--muted)}
.site-header :is(select,.language-search-trigger):focus-visible{outline:2px solid var(--pine);outline-offset:2px}
@media(max-width:600px){
  .site-header{padding-inline:16px;row-gap:16px}
  .site-header nav.learning-steps,body>nav.learning-steps{gap:0;width:100%}
  .learning-steps .nav-main,.learning-steps .nav-saved{flex:1 1 50%;gap:0}
  .learning-steps .nav-button,.learning-steps .nav-saved .nav-button{flex:1 1 0;padding:10px 4px;min-height:52px;font-size:12px;gap:4px;white-space:normal!important;text-align:center}
  .learning-steps .nav-label{word-break:keep-all;overflow-wrap:normal;line-height:1.5}
  .site-header .language-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .site-header .language-pair .language-arrow{display:none}
  .site-header .language-pair label[for="target-language"]{grid-column:1/-1}
  .site-header .language-pair .language-pair-readiness{grid-column:1/-1}
}
@media(max-width:480px){
  .site-header .brand{grid-column:1/-1;grid-row:1;max-width:calc(100% - 96px)}
  .site-header .profile-menu{grid-column:1/-1;grid-row:1;justify-self:end;min-width:44px;min-height:44px;padding:10px;border:0;background:transparent;box-shadow:none}
  .site-header .profile-menu>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .site-header .language-pair{grid-row:2}
  .site-header nav.learning-steps{grid-row:3}
}
@media(max-width:360px){
  .site-header{padding-inline:12px}
  .site-header .language-pair .site-language{padding-inline-start:8px}
  .site-header .language-pair .site-language select{font-size:12px}
  .learning-steps .nav-button,.learning-steps .nav-saved .nav-button{gap:2px;font-size:11px}
}

.resume-learning{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 28px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 4px 20px #143e3210}
.resume-title{margin:0 0 8px;font-size:18px;font-weight:700;line-height:1.5;color:var(--pine)}
.resume-detail{margin:0 0 6px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.resume-copy small{font-size:12px;color:var(--muted);line-height:1.6}
.resume-actions{display:flex;flex-shrink:0;gap:8px;align-items:center}
.resume-actions button{min-height:44px;white-space:nowrap}
@media(max-width:600px){.resume-learning{align-items:stretch;flex-direction:column;gap:16px;padding:20px;margin-bottom:24px}.resume-title{font-size:17px}.resume-actions button{flex:1}.resume-actions{flex-wrap:wrap}}

/* Keep the complete menu together, including the authenticated admin action. */
.site-header nav.learning-steps{width:100%;max-width:840px;justify-self:center;margin-inline:auto;flex-wrap:wrap;gap:4px}
.learning-steps>[data-admin-link]{order:3;flex:0 0 auto;min-height:48px;font-size:13px}
.learning-steps [hidden]{display:none!important}
@media(max-width:600px){
  .site-header nav.learning-steps{gap:0}
  .learning-steps>[data-admin-link]{flex:0 0 auto;margin-inline:auto;min-height:44px;padding:8px 16px}
}