/*
 * Tech Learning Academy | Phase 4 nav, exact-ratio portrait placements,
 * instructor review and safe backward navigation. 5 Nov 2026.
 * Separate from Tutor validation and form actions.
 */
body.tla-site-view.tla-phase4-page .tla-header.tla-ref-site-header{
 display:block!important;
 width:100%!important;
 position:relative;
 z-index:100;
 background:#FFFFFF!important;
 border-bottom:1px solid #DFE7F2;
 box-shadow:0 2px 12px rgba(16,29,53,.035);
}
body.tla-site-view.tla-phase4-page .tla-header .tla-header-inner{
 min-height:76px;
 max-width:1480px;
}
body.tla-site-view.tla-phase4-page .tla-header .tla-ref-logo img{
 width:auto;
 height:auto;
 max-width:210px;
 max-height:60px;
 object-fit:contain;
}
body.tla-site-view.tla-phase4-page .tla-navigation>a:first-child{
 background:#EAF1FE;
 border-radius:12px;
 color:#0455F5;
 padding-inline:16px;
}
body.tla-site-view.tla-phase4-page .tla-nav-actions{
 display:flex;
 align-items:center;
}
body.tla-site-view.tla-phase4-page #tla-main{
 min-height:calc(100vh - 76px);
 align-items:stretch;
}
body.tla-site-view.tla-phase4-page .tla-page-content.tla-account-page{
 padding-top:clamp(24px,3.2vw,45px)!important;
 padding-bottom:clamp(34px,4.1vw,60px)!important;
}
/* Retain natural image proportions and resolution; never crop or stretch subjects. */
body.tla-site-view .tla-ref-choice-image img{
 object-fit:contain!important;
 object-position:center bottom!important;
 max-width:100%;
 max-height:100%;
 width:auto;
 height:100%;
}
body.tla-site-view .tla-ref-auth-illustration .tla-ref-auth-portrait{
 background:linear-gradient(140deg,#EAF1FE,#F1EAFF);
}
body.tla-site-view .tla-ref-auth-illustration .tla-ref-auth-portrait img{
 display:block!important;
 width:100%!important;
 height:100%!important;
 max-height:100%;
 object-fit:contain!important;
 object-position:center bottom!important;
}
body.tla-site-view .tla-ref-auth-login-portraits{
 display:flex;
 align-items:flex-end;
 justify-content:center;
 gap:4px;
 width:100%;
 min-height:205px;
 max-height:310px;
 padding:0 12px;
 flex:1;
 overflow:hidden;
 background:linear-gradient(145deg,#0455F5,#7346F5);
}
body.tla-site-view .tla-ref-auth-login-portraits figure{
 flex:1;
 display:flex;
 min-width:0;
 align-items:center;
 justify-content:end;
 flex-direction:column;
 margin:0;
 height:100%;
}
body.tla-site-view .tla-ref-auth-login-portraits figure img{
 display:block;
 width:100%;
 max-width:220px;
 max-height:264px;
 height:calc(100% - 38px);
 object-fit:contain;
 object-position:center bottom;
}
body.tla-site-view .tla-ref-auth-login-portraits figcaption{
 display:block;
 text-align:center;
 padding:5px 6px 10px;
 min-height:34px;
 font:700 13px/1.5 "Inter",Arial,sans-serif;
 color:#FFFFFF;
}
body.tla-site-view .tla-ref-auth-go-back{
 display:inline-flex;
 align-items:center;
 gap:7px;
 margin:-8px 0 18px;
 padding:6px 0;
 font:700 14px/1.5 "Inter",Arial,sans-serif;
 color:#0455F5!important;
 text-decoration:none!important;
}
body.tla-site-view .tla-ref-auth-go-back:hover{ text-decoration:underline!important }
body.tla-site-view .tla-ref-auth-registration .tla-ref-auth-steps li.review-active{
 color:#0455F5;
}
body.tla-site-view .tla-ref-auth-registration .tla-ref-auth-steps li.review-active strong{
 color:#FFFFFF;
 background:#0455F5;
 border-color:#0455F5;
}
/* Instructor review is a real confirmation stage, without abandoning the form DOM. */
body.tla-site-view .tla-ref-auth-registration .tla-ref-instructor-review[hidden],
body.tla-site-view .tla-ref-auth-registration .tla-phase4-form-container[hidden]{
 display:none!important;
}
body.tla-site-view .tla-ref-instructor-review{
 margin:0;
 padding:25px;
 border:1px solid #DFE7F2;
 border-radius:15px;
 background:linear-gradient(145deg,#FFFFFF,#F5F8FC);
 box-shadow:0 4px 17px rgba(16,29,53,.045);
}
body.tla-site-view .tla-ref-review-kicker{
 display:inline-block;
 font:800 12px/1.5 "Inter",Arial,sans-serif;
 color:#0455F5;
 background:#EAF1FE;
 padding:7px 11px;
 margin:0 0 11px;
 border-radius:30px;
 letter-spacing:.065em;
}
body.tla-site-view .tla-ref-instructor-review h2{
 font:800 clamp(23px,2.25vw,31px)/1.24 "Montserrat",Arial,sans-serif!important;
 margin:0 0 10px;
}
body.tla-site-view .tla-ref-review-lead{
 font:450 15px/1.65 "Inter",Arial,sans-serif;
 color:#637189;
 margin:0 0 21px;
}
body.tla-site-view .tla-ref-review-summary{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:12px;
 margin:0 0 25px;
}
body.tla-site-view .tla-ref-review-summary>div{
 display:flex;
 flex-direction:column;
 gap:4px;
 padding:11px 13px;
 border:1px solid #DFE7F2;
 border-radius:10px;
 background:#FFFFFF;
 min-width:0;
}
body.tla-site-view .tla-ref-review-summary>div.wide{
 grid-column:1/-1;
}
body.tla-site-view .tla-ref-review-summary dt{
 font:750 12px/1.5 "Inter",Arial,sans-serif;
 color:#637189;
}
body.tla-site-view .tla-ref-review-summary dd{
 margin:0;
 word-break:break-word;
 white-space:pre-wrap;
 font:600 14px/1.55 "Inter",Arial,sans-serif;
 color:#16233B;
}
body.tla-site-view .tla-ref-review-actions{
 display:grid;
 grid-template-columns:1fr 1.65fr;
 gap:12px;
 align-items:stretch;
 margin:0;
}
body.tla-site-view .tla-ref-review-actions button{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:7px;
 min-height:49px;
 padding:12px;
 border-radius:10px;
 font:800 14px/1.4 "Inter",Arial,sans-serif;
 cursor:pointer;
}
body.tla-site-view .tla-ref-review-actions .tla-ref-review-back{
 border:1px solid #D9E8FF;
 background:#FFFFFF;
 color:#0455F5;
}
body.tla-site-view .tla-ref-review-actions .tla-ref-review-back:hover{background:#EAF1FE}
body.tla-site-view .tla-ref-review-actions .tla-ref-review-submit{
 border:1px solid #0455F5;
 background:#0455F5;
 color:#FFFFFF;
}
body.tla-site-view .tla-ref-review-actions .tla-ref-review-submit:hover{background:#101D35}
body.tla-site-view .tla-ref-review-actions .tla-ref-review-submit:disabled{
 opacity:.65;cursor:progress;
}
body.tla-site-view .tla-ref-review-note{
 font:500 13px/1.65 "Inter",Arial,sans-serif;
 color:#637189;
 margin:15px 0 0;
}
body.tla-site-view .tla-ref-instructor-review:focus{outline:0}
body.tla-site-view .tla-ref-auth-login-main .tla-ref-auth-subtitle{max-width:520px}
/* The original image files are preserved; CSS only scales proportionately. */
@media(max-width:1020px){
 body.tla-site-view.tla-phase4-page .tla-header .tla-header-inner{min-height:68px}
 body.tla-site-view.tla-phase4-page .tla-navigation{gap:7px}
 body.tla-site-view.tla-phase4-page .tla-navigation>a{font-size:14px}
 body.tla-site-view.tla-phase4-page .tla-header .tla-ref-logo img{max-width:175px}
}
@media(max-width:720px){
 body.tla-site-view .tla-ref-auth-login-portraits{display:none}
 body.tla-site-view.tla-phase4-page .tla-nav-actions{align-items:stretch}
 body.tla-site-view.tla-phase4-page .tla-header .tla-ref-logo img{max-width:160px}
 body.tla-site-view .tla-ref-instructor-review{padding:18px}
 body.tla-site-view .tla-ref-review-summary{grid-template-columns:1fr}
 body.tla-site-view .tla-ref-review-summary>div.wide{grid-column:1}
}
@media(max-width:480px){
 body.tla-site-view .tla-ref-review-actions{grid-template-columns:1fr;gap:10px}
 body.tla-site-view .tla-ref-review-actions .tla-ref-review-back{order:2}
 body.tla-site-view .tla-ref-review-actions .tla-ref-review-submit{order:1}
}

/* Keep both original portraits visible, proportionately, on mobile sign-in. */
@media(max-width:720px){
 body.tla-site-view .tla-ref-auth-login-portraits{
  display:flex!important;
  gap:8px;
  min-height:134px;
  max-height:157px;
  padding:3px 12px 0;
  overflow:hidden;
 }
 body.tla-site-view .tla-ref-auth-login-portraits figure{
  margin:0;
  height:151px;
  justify-content:end;
 }
 body.tla-site-view .tla-ref-auth-login-portraits figure img{
  max-height:115px;
  height:calc(100% - 27px);
  width:100%;
  object-fit:contain;
 }
 body.tla-site-view .tla-ref-auth-login-portraits figcaption{
  font-size:12px;
  min-height:26px;
  padding:3px 4px;
 }
}

/* Phase 4: three-screen instructor application wizard (same URL, preserved form data). */
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  #tutor-registration-form>.tla-wizard-original-submit{
 display:none!important;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  #tutor-registration-form>.tla-ref-form-section{
 display:none!important;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard[data-tla-wizard-step="1"]
  #tutor-registration-form>[data-tla-wizard-group="professional"]{
 display:none!important;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard[data-tla-wizard-step="2"]
  #tutor-registration-form>[data-tla-wizard-group="personal"]{
 display:none!important;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  .tla-ref-instructor-review[hidden],
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  .tla-phase4-form-container[hidden],
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  .tla-ref-wizard-navigation[hidden],
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  .tla-ref-wizard-heading[hidden],
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  .tla-ref-wizard-back[hidden]{
 display:none!important;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard[data-tla-wizard-step="submitting"]
  .tla-phase4-form-container{
 position:absolute!important;
 left:-9999px!important;
 top:0!important;
 width:min(720px,90vw)!important;
 opacity:0!important;
 pointer-events:none!important;
 display:block!important;
}
body.tla-site-view .tla-ref-wizard-heading{
 border:1px solid #DFE7F2;
 border-radius:14px;
 background:linear-gradient(120deg,#F5F8FC,#FFFFFF);
 padding:17px 19px;
 margin:0 0 23px;
}
body.tla-site-view .tla-ref-wizard-step-label{
 display:inline-block;
 color:#0455F5;
 background:#EAF1FE;
 border-radius:100px;
 font:800 12px/1.45 "Inter",Arial,sans-serif;
 letter-spacing:.07em;
 padding:5px 10px;
 margin-bottom:8px;
}
body.tla-site-view .tla-ref-wizard-heading h2{
 font:800 clamp(20px,1.8vw,27px)/1.28 "Montserrat",Arial,sans-serif!important;
 color:#16233B;
 margin:0 0 6px;
}
body.tla-site-view .tla-ref-wizard-heading p{
 font:450 14px/1.6 "Inter",Arial,sans-serif;
 color:#637189;
 margin:0;
}
body.tla-site-view .tla-ref-wizard-navigation{
 display:flex;
 align-items:center;
 gap:12px;
 padding-top:20px;
 margin-top:18px;
 border-top:1px solid #DFE7F2;
}
body.tla-site-view .tla-ref-wizard-navigation button{
 display:inline-flex;
 justify-content:center;
 align-items:center;
 min-height:49px;
 padding:12px 17px;
 border-radius:10px;
 cursor:pointer;
 font:800 14px/1.45 "Inter",Arial,sans-serif;
}
body.tla-site-view .tla-ref-wizard-navigation .tla-ref-wizard-back{
 flex:0 0 auto;
 border:1px solid #D9E8FF;
 background:#FFFFFF;
 color:#0455F5;
}
body.tla-site-view .tla-ref-wizard-navigation .tla-ref-wizard-back:hover{
 background:#EAF1FE;
}
body.tla-site-view .tla-ref-wizard-navigation .tla-ref-wizard-next{
 flex:1;
 border:1px solid #0455F5;
 background:#0455F5;
 color:#FFFFFF;
}
body.tla-site-view .tla-ref-wizard-navigation .tla-ref-wizard-next:hover{
 background:#101D35;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard
  #tutor-registration-form{
 align-items:start;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard[data-tla-wizard-step="2"]
  #tutor-registration-form>.tla-ref-form-extras{
 margin:0;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard[data-tla-wizard-step="2"]
  #tutor-registration-form>.tla-ref-form-consent{
 margin:0;
}
body.tla-site-view .tla-ref-auth-instructor-registration.tla-instructor-wizard[data-tla-wizard-step="2"]
  .tla-extra-fields>h3{
 background:#EAF1FE;
 border-color:#D9E8FF;
 color:#16233B;
}
/* One exact PNG on the Sign In artwork instead of previous student/instructor pair. */
body.tla-site-view .tla-ref-auth-login-single{
 display:flex;
 align-items:flex-end;
 justify-content:center;
 width:100%;
 min-height:260px;
 max-height:390px;
 flex:1;
 overflow:hidden;
 background:linear-gradient(130deg,#0455F5,#7346F5);
}
body.tla-site-view .tla-ref-auth-login-single img{
 display:block;
 width:100%;
 height:100%;
 max-height:390px;
 max-width:100%;
 object-fit:contain!important;
 object-position:center bottom!important;
 image-rendering:auto;
}
@media(max-width:720px){
 body.tla-site-view .tla-ref-auth-login-single{
  max-height:240px;
  min-height:145px;
 }
 body.tla-site-view .tla-ref-auth-login-single img{
  max-height:240px;
  width:100%;
  height:auto;
  object-fit:contain!important;
 }
}
@media(max-width:540px){
 body.tla-site-view .tla-ref-wizard-navigation{
  display:flex;
  flex-wrap:wrap;
 }
 body.tla-site-view .tla-ref-wizard-navigation button{
  min-height:47px;
 }
 body.tla-site-view .tla-ref-wizard-navigation .tla-ref-wizard-back{
  flex:1 1 100%;
  order:2;
 }
 body.tla-site-view .tla-ref-wizard-navigation .tla-ref-wizard-next{
  flex:1 1 100%;
  order:1;
 }
 body.tla-site-view .tla-ref-auth-login-single{
  min-height:175px;
  max-height:240px;
  padding:6px;
 }
 body.tla-site-view .tla-ref-auth-login-single img{
  max-height:220px;
  width:auto;
 }
}

/* Keep new wizard panels hidden until the client-side initializer succeeds. */
body.tla-site-view .tla-ref-auth-instructor-registration .tla-ref-wizard-heading[hidden],
body.tla-site-view .tla-ref-auth-instructor-registration .tla-ref-wizard-navigation[hidden],
body.tla-site-view .tla-ref-auth-instructor-registration .tla-ref-wizard-back[hidden]{
 display:none!important;
}

/* Sign-in image sits into the lower gradient rather than floating above it.
 * The original PNG bytes remain untouched; overlap is purely CSS.
 */
body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-side{
    isolation:isolate;
}
body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-single{
    position:relative;
    z-index:2;
    display:flex;
    flex:1 1 auto;
    align-items:flex-end;
    justify-content:center;
    min-height:290px;
    max-height:416px;
    padding:0 8px;
    margin-bottom:-38px;
    overflow:visible;
    background:linear-gradient(180deg,#0455F5 0%,#0455F5 55%,#101D35 100%);
}
body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-single img{
    position:relative;
    z-index:3;
    display:block;
    width:100%;
    max-width:100%;
    height:100%;
    max-height:416px;
    object-fit:contain!important;
    object-position:center bottom!important;
    transform:translateY(23px);
    filter:none;
}
body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-side>ul{
    position:relative;
    z-index:1;
    padding:60px 24px 25px!important;
    background:linear-gradient(180deg,#0455F5,#101D35);
}
@media(max-width:720px){
    body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-single{
        min-height:165px;
        max-height:240px;
        margin-bottom:-18px;
        padding:0 8px;
    }
    body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-single img{
        height:100%;
        max-height:240px;
        transform:translateY(9px);
    }
    body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-side>ul{
        padding:24px 15px 15px!important;
    }
}
@media(max-width:540px){
    body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-single{
        min-height:170px;
        max-height:230px;
        margin-bottom:0;
        padding:0 6px;
    }
    body.tla-site-view .tla-ref-auth-login .tla-ref-auth-login-single img{
        width:100%;
        height:100%;
        max-height:224px;
        transform:translateY(5px);
    }
}