/* Mobile-first experience layered over the desktop course and portal layouts. */
.mobile-course-nav,.mobile-panel-close,.mobile-panel-backdrop{display:none}

@media (max-width:800px){
  :root{font-size:16px}
  html,body{height:auto;min-height:100%;overflow-x:hidden;background:#f3f6fa}
  body.mobile-panel-active{overflow:hidden;touch-action:none}
  button,input,select,textarea{font-size:16px}
  button{touch-action:manipulation}

  /* Course shell */
  .stage{height:100dvh;min-height:100dvh;overflow:hidden;grid-template-rows:auto minmax(0,1fr) calc(70px + env(safe-area-inset-bottom,0px))}
  .stage>header{min-height:0;height:auto;padding:9px 12px 8px;display:grid;grid-template-columns:minmax(125px,.8fr) minmax(150px,1.2fr);gap:7px 12px;align-items:center;border-top-width:3px}
  .stage>header .brand{display:grid;min-width:0;grid-template-columns:32px minmax(0,1fr);grid-template-rows:18px 13px}
  .stage>header .brand .brain-mark{width:32px;height:32px;grid-row:1/3}
  .stage>header .brand b{font-size:17px;white-space:nowrap}
  .stage>header .brand small{display:none}
  .stage>header .course{display:grid;min-width:0;border-left:1px solid #dce1e8;padding-left:12px;line-height:1.15}
  .stage>header .course span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage>header .course b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage>header .header-actions{grid-column:1/3;grid-row:2;display:flex;width:100%;margin:0;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:1px 0 4px;scrollbar-width:none}
  .stage>header .header-actions::-webkit-scrollbar{display:none}
  .stage>header .header-actions>*{flex:0 0 auto;min-height:42px}
  .stage>header .header-actions>.icon-btn:first-child{display:block;font-size:10px;max-width:116px;white-space:normal;padding:6px 9px;line-height:1.1}
  .stage>header .header-actions .icon-btn{padding:8px 11px;font-size:12px}
  .stage>header .live-toggle{padding:6px 9px}
  .stage>header .live-toggle>span{display:grid}
  .stage>header .live-toggle b{font-size:10px}
  .stage>header .live-toggle small{max-width:92px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage>header .live-toggle>i{width:36px}
  .mobile-course-nav{grid-column:1/3;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .mobile-course-nav button{min-height:42px;border:1px solid #d4dce7;border-radius:8px;background:#fff;color:#071d37;font-weight:800;display:flex;align-items:center;justify-content:center;gap:7px}
  .mobile-course-nav button:last-child{background:#071d37;color:#fff;border-color:#071d37}

  .workspace{display:block!important;min-height:0;overflow:hidden!important}
  .workspace main{height:100%;min-height:0;overflow-y:auto;padding:10px 10px 18px;display:block;-webkit-overflow-scrolling:touch}
  .slide{width:100%;min-height:0;margin:0;padding:23px 20px 25px;border-radius:10px;box-shadow:0 5px 18px #25304415}
  .slide:before{width:4px}
  .slide-count{right:18px;top:17px;font-size:12px}
  .tag{font-size:9px;line-height:1.3;padding-right:55px}
  .slide h1,.quiz h1{font-size:clamp(27px,8vw,34px);line-height:1.06;margin:12px 0 24px;overflow-wrap:anywhere}
  .slide-body{display:block}
  .slide li{padding:11px 0;font-size:15px;align-items:flex-start}
  .visual{min-height:145px;margin-top:19px;border-radius:18px;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:5px;padding:16px}
  .visual:before{display:none}
  .visual span,.visual span:first-child{position:static!important;transform:none!important;margin:0;font-size:9px}
  .captions{position:sticky!important;z-index:5;left:auto!important;right:auto!important;bottom:4px!important;width:calc(100% - 8px);height:auto;min-height:54px;max-height:84px;margin:8px auto 0;padding:9px 13px;border-radius:8px;font-size:16px;line-height:1.3}

  /* Course outline and Sensei become accessible drawers. */
  .workspace>aside,.workspace>.instructor{display:flex!important;position:fixed;z-index:52;top:0;bottom:0;width:min(90vw,370px);height:100dvh;min-height:0;background:#fff;box-shadow:0 0 45px #071d3740;transition:transform .22s ease;overflow-y:auto;overscroll-behavior:contain}
  .workspace>aside{left:0;right:auto;transform:translateX(-105%);padding:0!important;flex-direction:column}
  .workspace>.instructor{right:0;left:auto;transform:translateX(105%);padding:20px 16px;flex-direction:column}
  .stage.mobile-toc-open .workspace>aside,.stage.mobile-sensei-open .workspace>.instructor{transform:translateX(0)}
  .mobile-panel-backdrop{position:fixed;display:block;z-index:50;inset:0;background:#071d376b;opacity:0;pointer-events:none;transition:opacity .2s}
  .stage.mobile-toc-open .mobile-panel-backdrop,.stage.mobile-sensei-open .mobile-panel-backdrop{opacity:1;pointer-events:auto}
  .mobile-panel-close{display:grid;position:sticky;z-index:3;top:0;align-self:flex-end;flex:0 0 auto;width:44px;height:44px;margin:8px 8px -52px 0;border:1px solid #d6dde6;border-radius:50%;background:#fff;color:#071d37;place-items:center;font-size:23px;box-shadow:0 4px 12px #071d371c}
  .workspace>aside .toc-course{padding:18px 58px 14px 14px}
  .workspace>aside .toc-course h2{font-size:16px}
  .workspace>aside .toc-course input{min-height:42px;font-size:14px}
  .domain-toggle,.module-toggle,.lesson-row{min-height:44px}
  .domain-toggle{font-size:12px;padding:13px 14px}
  .module-toggle b{font-size:12px}
  .lesson-row b{font-size:11px}
  .lesson-row b small{font-size:8px}
  .instructor-top{padding-right:46px}
  #conversation{min-height:130px;padding:18px 0}
  .welcome,.bubble{font-size:14px}
  .instructor textarea{height:110px;font-size:16px}
  .instructor .ask{min-height:44px;padding:10px 17px}

  /* Persistent, thumb-friendly playback controls. */
  .stage>footer{position:relative;z-index:10;display:grid;grid-template-columns:58px minmax(0,1fr) 58px;height:calc(70px + env(safe-area-inset-bottom,0px));min-height:calc(70px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:0 -3px 16px #071d3712}
  .stage>footer>button{min-width:0;padding:0;font-size:0}
  .stage>footer>button:after{font-size:25px}
  .stage>footer>#prev:after{content:'←'}
  .stage>footer>#next:after{content:'→'}
  .stage>footer .audio{min-width:0;gap:9px;padding:0 6px}
  .stage>footer .audio .play{width:46px;height:46px;flex:0 0 46px}
  .stage>footer .audio>div{display:grid;min-width:0;max-width:130px}
  .stage>footer .audio>div b,.stage>footer .audio>div span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage>footer .audio>div b{font-size:11px}
  .stage>footer .audio select{width:62px;margin:0;padding:7px 4px;font-size:13px}

  /* Quizzes */
  .quiz{width:100%;max-width:none;margin:0;padding:22px 16px 24px;border-radius:10px}
  .quiz>p{font-size:15px;line-height:1.5}
  .answer{min-height:54px;margin:9px 0;padding:11px 10px;gap:10px;font-size:14px;line-height:1.3}
  .answer span{width:32px;height:32px;min-width:32px}
  .feedback{font-size:14px;padding:14px}
  .quiz-actions{display:grid;grid-template-columns:1fr;gap:7px;margin-top:14px}
  .quiz-actions .back-link,.quiz .back-link,.quiz .portal-primary{width:100%;min-height:44px;margin:0;border:1px solid #d5dde7;border-radius:8px;background:#fff;text-align:center;padding:11px 10px}
  .quiz .portal-primary{background:#e52f32;color:#fff;border-color:#e52f32}
  .question-navigation{grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  .question-navigation span{grid-column:1/3;grid-row:1;text-align:center}
  .question-navigation button{grid-row:2;min-height:44px;padding:8px;font-size:12px}
  .score-ring{display:grid;gap:5px}
  .score-ring b{font-size:36px}
  .score-ring span{font-size:15px}
  .results-table{margin:18px -6px;overflow-x:auto}
  .results-table th,.results-table td{padding:11px 8px;font-size:12px;white-space:nowrap}

  .drawer{width:100vw;padding:58px 22px 30px}
  .drawer h2{font-size:28px}
  .usage-panel{top:10px;left:10px;right:10px;width:auto;max-height:calc(100dvh - 20px);overflow:auto;padding:24px 20px}

  /* Learner portal: bottom navigation and stacked content. */
  .portal-shell{display:block;height:auto;min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .portal-nav{position:fixed;z-index:60;left:0;right:0;bottom:0;height:auto;border:0;border-top:1px solid var(--portal-line);box-shadow:0 -4px 18px #071d3714;padding:0 0 env(safe-area-inset-bottom,0px)!important}
  .portal-brand{display:none}
  .portal-nav nav{display:flex;padding:0;overflow-x:auto;align-items:stretch}
  .portal-nav nav button{flex:1 0 76px;min-width:70px;min-height:68px;padding:8px 5px!important;border-radius:0;display:grid;place-items:center;align-content:center;gap:3px;font-size:17px!important;text-align:center}
  .portal-nav nav button span{display:block;font-size:9px;line-height:1.1}
  .portal-nav nav .logout-button{margin:0}
  .portal-main{min-height:100dvh;overflow:visible;padding:0 12px 20px}
  .portal-main>header{height:80px;padding:0 2px}
  .portal-main h1{font-size:25px}
  .learner-avatar{width:38px;height:38px}
  .portal-section{padding:15px;margin-bottom:12px;border-radius:10px}
  .section-head h2{font-size:21px;margin-bottom:14px}
  .course-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:13px;padding:12px}
  .course-cover{height:76px}
  .course-cover b{font-size:23px}
  .course-info h3{font-size:16px;line-height:1.25;margin:7px 0}
  .course-info p{grid-column:1/3;font-size:13px;line-height:1.4}
  .course-progress{grid-column:1/3}
  .course-card>.portal-primary{grid-column:1/3;width:100%;min-height:46px}
  .activity-row{align-items:flex-start}
  .activity-row time{font-size:10px}
  .certificate-tools{display:grid;gap:9px}
  .certificate-tools select,.certificate-tools input{min-width:0;width:100%;min-height:44px}
  .empty-certificate{min-height:55vh;padding:20px 5px}
  .trophy{font-size:64px}

  /* Authentication and administration */
  .pilot-auth{place-items:start center;padding:18px 12px;min-height:100dvh}
  .login-card{margin-top:2vh;padding:24px 18px;border-radius:11px;box-shadow:0 12px 35px #071d3718}
  .login-brand{margin-bottom:25px}
  .login-card h1{font-size:29px}
  .login-card input,.login-card .portal-primary{min-height:48px}
  .admin-form,.admin-user{display:grid;grid-template-columns:1fr;gap:12px}
  .admin-form button,.admin-user button{min-height:44px}
  .admin-user{padding:14px}
  .active-check{min-height:40px}
}

@media (max-width:390px){
  .stage>header{grid-template-columns:116px minmax(0,1fr);padding-left:9px;padding-right:9px}
  .stage>header .brand b{font-size:15px}
  .stage>header .header-actions>.icon-btn:first-child{display:none}
  .stage>header .live-toggle>span{display:none}
  .stage>footer .audio>div{display:none}
  .slide{padding-left:17px;padding-right:17px}
  .slide h1,.quiz h1{font-size:26px}
}