/* Academic Path | Product-level UI refinement, 19 October 2026.
   Applies to portal chrome only; lesson HTML, login logic and Supabase remain unchanged. */
:root{
  --ap-brand-navy:#374866;
  --ap-brand-blue:#88B3FF;
  --ap-deep:#244666;
  --ap-line:#dce6f0;
  --ap-muted:#63758b;
  --ap-bg:#f5f8fc;
  --ap-radius:16px;
}
body,button,input,textarea,select{font-family:Poppins,Arial,system-ui,sans-serif}
button,a,input,select,textarea{scroll-margin-top:80px}

/* Single signature: logo in sidebar on desktop, logo in topbar on mobile. */
@media(min-width:961px){
  #studentApp .topbar .ap-top-wordmark,
  #teacherView .top .ap-top-wordmark{display:none!important}
  #studentApp .topbar .ap-header-page,
  #teacherView .top .ap-header-page{display:flex!important}
  #studentApp .topbar .ap-header-page strong,
  #teacherView .top .ap-header-page strong{font-size:15px!important}
}
.ap-sidebar-brand{padding:22px 19px 17px!important;gap:3px!important}
.ap-sidebar-brand img{width:190px!important;max-width:100%;height:auto;object-fit:contain;aspect-ratio:auto!important}
.ap-sidebar-brand>span{font-size:10px!important;letter-spacing:.11em!important;padding:4px 2px 0!important}
.ap-menu-caption{padding-left:20px!important;margin:0 0 10px!important;font-size:10px;letter-spacing:.105em!important}
#studentApp .bottom-nav,#teacherView .ap-teacher-sidebar .teacher-nav.qa14-primary-nav{gap:4px!important}
#teacherView .ap-teacher-sidebar{min-width:0!important;display:flex!important;flex-direction:column!important}
#teacherView .ap-teacher-sidebar .teacher-nav.qa14-primary-nav{flex:0 0 auto!important;overflow:visible;align-items:stretch!important;padding:0 12px!important;min-width:0}
#teacherView .ap-teacher-sidebar .qa14-primary-nav>button{min-height:41px!important;padding:9px 12px!important;font-size:11.5px!important;gap:10px!important}
#teacherView .ap-teacher-sidebar .teacher-extra-tools{display:block!important;position:relative!important;width:100%!important;border-top:1px solid rgba(255,255,255,.18)!important;margin:10px 0 0!important;padding:8px 3px 0!important;min-height:48px;overflow:visible}
#teacherView .ap-teacher-sidebar .teacher-extra-tools summary{min-height:38px!important;padding:8px 10px!important;font-size:11px!important;line-height:1.4!important;white-space:normal}
#teacherView .ap-teacher-sidebar .teacher-extra-tools button{padding:10px!important;text-align:left;font-size:11px!important;line-height:1.45}
#teacherView .ap-teacher-sidebar .ap-side-foot{display:flex!important;flex:0 0 auto!important;position:relative!important;margin:auto 15px 16px!important;padding:16px 0 0!important;min-height:52px;align-items:center;gap:8px;border-top:1px solid rgba(255,255,255,.17);line-height:1.45}
#teacherView .ap-teacher-sidebar .ap-side-foot span:last-child{font-size:10px;line-height:1.45;overflow-wrap:anywhere}
#teacherView .ap-teacher-sidebar .ap-side-foot-mark{width:28px!important;height:28px!important;flex-basis:28px!important}
#teacherView .teacher-more-menu:not(.hidden){z-index:60!important}
#studentApp .topbar,#teacherView .top{min-height:65px!important;padding:12px 24px!important;gap:14px!important}
#teacherView .top .brand.ap-top-brand{min-width:0}
#studentApp .ap-header-page small,#teacherView .ap-header-page small{font-size:11px!important}
#studentApp .content,#teacherView .teacher-shell{padding:16px 20px 30px!important}

/* Banner is a context cue, not the dominant part of the workday. */
#page-lessons>.section-head,#teacherView .teacher-home-head{
  min-height:174px!important;max-height:none;border-radius:18px!important;
  padding:23px 30% 23px 28px!important;margin-bottom:16px!important;
  box-shadow:0 8px 21px rgba(26,65,105,.12)!important;
}
#page-lessons>.section-head h1,#teacherView #teacherHomeSection>.teacher-home-head h1{
 font-size:clamp(30px,2.6vw,41px)!important;line-height:1.12!important;
 margin:9px 0 7px!important;letter-spacing:-.035em;
}
#page-lessons>.section-head p,#teacherView .teacher-home-head .muted{
 font-size:13px!important;line-height:1.45!important;margin:0!important;
}
#page-lessons>.section-head .ap-hero-illustration,
#teacherView .teacher-home-head .ap-hero-illustration{
 width:auto!important;max-width:31%!important;height:92%!important;max-height:170px!important;
 object-fit:contain;object-position:right bottom;right:14px!important;bottom:0!important;
 opacity:.95!important;filter:drop-shadow(0 6px 10px rgba(20,53,90,.10));
}
#teacherView .teacher-home-date{font-size:10px!important;margin-top:7px!important}
#teacherView .teacher-home-stats{margin-bottom:14px!important;gap:12px!important}
#teacherView .home-stat{padding:14px 16px!important;border-radius:14px!important;min-height:96px!important;box-shadow:0 2px 10px rgba(33,62,95,.04)!important}
#teacherView .home-stat strong{font-size:29px!important;margin-top:4px!important}
#teacherView .home-stat span{font-size:10px!important;line-height:1.45!important}
#teacherView .panel{border-radius:16px!important}
#teacherView .teacher-home-grid{gap:13px!important}
#teacherView .teacher-day-center{padding:18px 19px!important;margin-bottom:14px!important}
#teacherView .home-panel-head h3{font-size:22px!important}
#teacherView .teacher-command{margin-bottom:13px!important}

/* The practice area previously inherited min-height:calc(100dvh - 160px).
   That stretched its only grid item to a 600px tall blank card. */
#studentApp #page-practice{margin:0!important;padding:0!important}
#studentApp #page-practice>.section-head{
 padding:4px 0 14px!important;margin:0 0 15px!important;border-bottom:1px solid var(--ap-line);
}
#studentApp #page-practice .section-head h1{font-size:clamp(30px,2.8vw,38px)!important;margin:6px 0!important}
#studentApp #page-practice .section-head p{font-size:13px!important}
#studentApp #practiceMount{
 display:flex!important;flex-direction:column!important;align-items:stretch!important;
 justify-content:flex-start!important;align-content:normal!important;
 min-height:0!important;height:auto!important;gap:12px!important;
 border:0!important;padding:0!important;background:transparent!important;
}
#studentApp #practiceMount>.lesson-card{
 display:grid;grid-template-columns:minmax(0,1fr) auto!important;
 align-items:center!important;align-content:center!important;
 gap:12px!important;flex:0 0 auto!important;min-height:95px!important;
 height:auto!important;margin:0!important;
 padding:16px 19px!important;border-radius:15px!important;
 border:1px solid var(--ap-line)!important;box-shadow:0 3px 12px rgba(32,56,82,.05)!important;
}
#studentApp #practiceMount>.lesson-card>div{min-width:0!important;align-self:center!important}
#studentApp #practiceMount .lesson-card h3{font:700 20px/1.25 Cambria,Georgia,serif!important;margin:0 0 6px!important;overflow-wrap:anywhere}
#studentApp #practiceMount .lesson-card small{display:block;font-size:12px!important;margin:0;color:var(--ap-muted)}
#studentApp #practiceMount .exercise-link{white-space:nowrap;min-height:42px!important;font-size:12px!important;padding:10px 15px!important;flex:0 0 auto}
#studentApp #practiceMount .submitted-exercises{padding-top:8px;margin:0;min-height:0}
#studentApp #practiceMount .submitted-exercises .lesson-card{min-height:86px;padding:14px 17px!important;margin:9px 0 0!important;display:grid;align-items:center;align-content:center;grid-template-columns:minmax(0,1fr) auto!important}
#studentApp .practice-placeholder{height:auto!important;min-height:140px!important}
#studentApp .lesson-list .lesson-card{min-height:108px!important}

/* Login identity: one prominent mark in the brand column on desktop,
   single mark in the form column only when the brand panel is hidden. */
body.ap-login .mobile-brand.ap-logo-plate{display:none!important}
.ap-teacher-mobile-login-logo{display:none!important}
body.ap-login .login-card,#loginView .login-card{border-radius:20px!important}
body.ap-login .login-card{padding:28px 34px!important;width:min(505px,100%)!important}
#loginView .login-card{padding:31px 36px!important;width:min(535px,100%)!important}
body.ap-login .login-brand,#loginView .login-left{padding:clamp(35px,4.5vw,66px)!important;overflow:hidden}
body.ap-login .brand-copy h1,#loginView .login-left h1{
 font-size:clamp(36px,3.15vw,51px)!important;line-height:1.1!important;
 margin:26px 0 13px!important;max-width:560px!important;
}
body.ap-login .brand-copy p,#loginView .login-left p{font-size:14px!important;line-height:1.65!important}
body.ap-login .login-brand .ap-logo-plate,#loginView .login-left .ap-logo-plate{width:min(310px,70%)!important;margin:0!important}
body.ap-login .login-brand .ap-logo,#loginView .login-left .ap-logo{width:100%!important}
body.ap-login .ap-login-illustration,#loginView .ap-login-illustration{
 width:min(350px,48%)!important;height:auto!important;max-height:39%!important;
 right:28px!important;bottom:16px!important;object-fit:contain!important;
 filter:drop-shadow(0 8px 15px rgba(13,45,77,.12));
}
body.ap-login .login-card h2,#loginView .login-card h2{font-size:clamp(32px,2.65vw,39px)!important;line-height:1.13!important}
body.ap-login .login-card .intro,#loginView .login-card .muted{font-size:13px!important}
body.ap-login .login-card label,#loginView .login-card label{font-size:12px!important}
body.ap-login .login-card input,#loginView .login-card input{min-height:47px!important}
body.ap-login .login-card button,#loginView .login-card .btn.primary{min-height:48px!important}
#loginView .login-left .login-features{display:none!important}

@media(min-width:961px) and (max-height:760px){
 #teacherView .ap-teacher-sidebar .qa14-primary-nav>button{min-height:38px!important;padding:7px 11px!important}
 #teacherView .ap-teacher-sidebar .ap-side-foot{margin-top:16px!important}
}
@media(max-width:960px){
 #studentApp.app,#teacherView.app{margin:0!important;border-radius:0!important;width:100%!important}
 #studentApp .ap-mobile-brand-logo,#teacherView .top .ap-mobile-brand-logo{display:block!important;width:136px!important;background:transparent!important}
 #studentApp .topbar .ap-top-wordmark,#teacherView .top .ap-top-wordmark{display:none!important}
 #studentApp .topbar .ap-top-brand,#teacherView .top .ap-top-brand{display:none!important}
 #teacherView .ap-teacher-sidebar{display:block!important;min-height:0!important;padding:0!important}
 #teacherView .ap-teacher-sidebar .teacher-nav.qa14-primary-nav{
  display:flex!important;flex-direction:row!important;overflow-x:auto!important;
  overflow-y:hidden!important;gap:4px!important;white-space:nowrap!important;
  padding:7px 10px!important;min-height:58px!important;
 }
 #teacherView .ap-teacher-sidebar .qa14-primary-nav>button{
  flex:0 0 auto!important;width:auto!important;min-height:43px!important;
  padding:9px 13px!important;white-space:nowrap!important;
 }
 #teacherView .ap-teacher-sidebar .teacher-extra-tools,
 #teacherView .ap-teacher-sidebar .ap-side-foot{display:none!important}
 #studentApp .content,#teacherView .teacher-shell{padding:16px!important}
 #page-lessons>.section-head,#teacherView .teacher-home-head{
  min-height:170px!important;padding:23px 31% 23px 22px!important;
 }
 #page-lessons>.section-head .ap-hero-illustration,#teacherView .teacher-home-head .ap-hero-illustration{
  max-width:34%!important;max-height:160px!important;
 }
}
@media(max-width:760px){
 #studentApp #practiceMount>.lesson-card{grid-template-columns:minmax(0,1fr) auto!important}
 #studentApp #practiceMount .lesson-card h3{font-size:18px!important}
 body.ap-login .login-brand,#loginView .login-left{display:none!important}
 body.ap-login .mobile-brand.ap-logo-plate{display:inline-flex!important;width:190px!important;padding:9px 13px!important;background:#374866!important;border-radius:12px!important;margin:0 0 17px!important}
 body.ap-login .mobile-brand .ap-logo{width:100%!important}
 #loginView .ap-teacher-mobile-login-logo{display:block!important;width:190px!important;height:auto!important;background:#374866;border-radius:12px;padding:9px 13px;margin:0 0 18px!important}
 body.ap-login .login-card,#loginView .login-card{padding:26px 23px!important}
 #loginView .login-right,body.ap-login .login-panel{padding:16px!important}
 #page-lessons>.section-head,#teacherView .teacher-home-head{min-height:180px!important;padding:19px 22px 22px!important}
 #page-lessons>.section-head h1,#teacherView #teacherHomeSection>.teacher-home-head h1{font-size:clamp(30px,7.6vw,36px)!important;max-width:94%!important}
 #page-lessons>.section-head p,#teacherView .teacher-home-head .muted{max-width:95%!important}
 #page-lessons>.section-head .ap-hero-illustration,#teacherView .teacher-home-head .ap-hero-illustration{display:none!important}
}
@media(max-width:540px){
 #studentApp .topbar,#teacherView .top{padding:11px 13px!important;min-height:67px!important}
 #studentApp #practiceMount>.lesson-card,
 #studentApp #practiceMount .submitted-exercises .lesson-card{
  grid-template-columns:minmax(0,1fr)!important;gap:12px!important;
  padding:15px 16px!important;
 }
 #studentApp #practiceMount .exercise-link{justify-self:start!important;white-space:normal}
 #teacherView .teacher-home-stats{gap:8px!important}
 #teacherView .home-stat{min-height:85px!important;padding:11px 13px!important}
 #teacherView .home-stat strong{font-size:27px!important}
 #teacherView .teacher-day-center{padding:16px!important}
 #studentApp .content,#teacherView .teacher-shell{padding:12px 13px 90px!important}
}
@media(prefers-reduced-motion:reduce){
 #teacherView *,#studentApp *{scroll-behavior:auto!important;animation:none!important}
}

/* Final navigation alignment: inherited sticky top:76px was displacing the
   teacher's menu relative to the area caption despite position:relative. */
@media(min-width:961px){
 #teacherView .ap-teacher-sidebar .teacher-nav.qa14-primary-nav{
  top:0!important;bottom:auto!important;
  margin:0 0 10px!important;
 }
}
/* On mobile, show the identity bar first, then the horizontal section tabs.
   This is a CSS-only reorder; script event listeners and element IDs are unchanged. */
@media(max-width:960px){
 #teacherView .ap-teacher-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto minmax(0,1fr)!important;
 }
 #teacherView .ap-teacher-workspace{display:contents!important}
 #teacherView .top{grid-row:1!important;grid-column:1!important;position:relative!important}
 #teacherView .ap-teacher-sidebar{grid-row:2!important;grid-column:1!important}
 #teacherView .teacher-shell{grid-row:3!important;grid-column:1!important;min-width:0}
 #teacherView .ap-teacher-sidebar .teacher-nav.qa14-primary-nav{top:0!important;bottom:auto!important;margin:0!important}
 #teacherView .ap-teacher-sidebar .teacher-more-menu{top:125px!important}
}