/* One persistent header/stepper for every non-exam student flow screen. */
#app{--student-flow-unit:min(1px,.096153846154dvh,.065104166667vw);--student-flow-top:calc((100dvh - var(--student-flow-unit) * 1024) / 2);--student-flow-content-width:calc(var(--student-flow-unit) * 1384)}
#student-flow-shell{position:fixed;z-index:4;top:var(--student-flow-top);left:50%;width:calc(var(--student-flow-unit) * 1536);height:calc(var(--student-flow-unit) * 204);color:#092c3c;font-family:var(--entry-font-family);font-weight:400;line-height:1.5;transform:translateX(-50%);pointer-events:none}
#student-flow-shell .student-flow-header{position:absolute;top:calc(var(--student-flow-unit) * 44);left:calc(var(--student-flow-unit) * 76);right:calc(var(--student-flow-unit) * 76);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--student-flow-unit) * 24);height:calc(var(--student-flow-unit) * 62);margin:0;padding:0;border:0;background:transparent}
#student-flow-shell .student-flow-brand{display:block;flex:none;width:calc(var(--student-flow-unit) * 340);height:calc(var(--student-flow-unit) * 58);background:url('/assets/student-profile-reference.png') calc(var(--student-flow-unit) * -76) calc(var(--student-flow-unit) * -48) / calc(var(--student-flow-unit) * 1536) calc(var(--student-flow-unit) * 1024) no-repeat;pointer-events:auto}
#student-flow-shell .student-flow-brand>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#student-flow-shell .student-flow-nav{display:flex;align-items:center;gap:calc(var(--student-flow-unit) * 34);flex:none;margin:0;color:#092c3c;font-size:calc(var(--student-flow-unit) * 20);font-weight:600;line-height:1.5;white-space:nowrap;pointer-events:auto}
#student-flow-shell .student-flow-nav>span{flex:none;width:calc(var(--student-flow-unit) * 96);padding-right:calc(var(--student-flow-unit) * 34);border-right:1px solid #b8c4ca;line-height:1}
#student-flow-shell .student-flow-nav button{display:flex;align-items:center;justify-content:flex-end;flex:none;width:calc(var(--student-flow-unit) * 90);height:calc(var(--student-flow-unit) * 40);min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#092c3c;font-family:inherit;font-size:inherit;font-weight:600;line-height:1.5;letter-spacing:0;box-shadow:none;transform:none}
#student-flow-shell .student-flow-nav button:hover{color:#007c6f;background:transparent;box-shadow:none;transform:none}
#student-flow-shell .student-flow-nav button:disabled{cursor:wait;opacity:.6}
#student-flow-shell .student-flow-steps{position:absolute;top:calc(var(--student-flow-unit) * 122);left:calc(var(--student-flow-unit) * 546);display:none;grid-template-columns:repeat(2,calc(var(--student-flow-unit) * 166));gap:calc(var(--student-flow-unit) * 140);margin:0;padding:0;list-style:none}
#student-flow-shell.has-steps .student-flow-steps{display:grid}
#student-flow-shell .student-flow-steps li{position:relative;display:flex;align-items:center;gap:calc(var(--student-flow-unit) * 18);height:calc(var(--student-flow-unit) * 48);margin:0;color:#6b7b89;white-space:nowrap}
#student-flow-shell .student-flow-steps li+li:before{position:absolute;right:calc(100% + var(--student-flow-unit) * 14);width:calc(var(--student-flow-unit) * 126);height:1px;background:#7bb8ae;content:""}
#student-flow-shell .student-flow-steps li>span{display:grid;place-items:center;flex:none;width:calc(var(--student-flow-unit) * 48);height:calc(var(--student-flow-unit) * 48);border:1px solid transparent;border-radius:50%;background:#e9edeb;font-size:calc(var(--student-flow-unit) * 23);font-weight:400;line-height:1}
#student-flow-shell .student-flow-steps strong{display:block;width:calc(var(--student-flow-unit) * 100);font-family:inherit;font-size:calc(var(--student-flow-unit) * 21);font-weight:600;line-height:1.5;letter-spacing:0}
#student-flow-shell .student-flow-steps .current{color:#008176}
#student-flow-shell .student-flow-steps .current>span{background:linear-gradient(120deg,#168e85,#00655e);color:#fff}
#student-flow-shell .student-flow-steps .complete{color:#478b79}
#student-flow-shell .student-flow-steps .complete>span{border-color:#d4e8dc;background:#e7f4ed;color:#278773}
#student-flow-shell button:focus-visible,#student-flow-shell a:focus-visible{outline:2px solid #008277;outline-offset:4px}
/* Only the shared element paints these repeated components. */
#student-profile>.profile-header,#student-profile>.profile-steps,#welcome>.welcome-header,#welcome>.welcome-steps,#completed>.student-end-header,#record>.student-end-header{display:none}
main.completed-mode #completed,main.record-mode #record{padding-top:calc(var(--student-flow-top) + var(--student-flow-unit) * 116)}
@media(min-width:721px){
  main.profile-mode #student-profile{--profile-unit:var(--student-flow-unit);background-image:linear-gradient(#fcfdfa,#fcfdfa),linear-gradient(#fcfdfa,#fcfdfa),url('/assets/student-profile-reference.png');background-size:calc(var(--profile-unit) * 1410) calc(var(--profile-unit) * 76),calc(var(--profile-unit) * 520) calc(var(--profile-unit) * 88),100% 100%;background-position:calc(var(--profile-unit) * 60) calc(var(--profile-unit) * 40),calc(var(--profile-unit) * 520) calc(var(--profile-unit) * 112),center;background-repeat:no-repeat}
  main.welcome-mode #welcome{--welcome-unit:var(--student-flow-unit)}
}
@media(max-width:720px){
  #student-flow-shell{top:0;left:0;width:100%;height:80px;background:#fcfdfa;transform:none}
  #student-flow-shell.has-steps{height:160px}
  #student-flow-shell .student-flow-header{position:relative;inset:auto;height:80px;width:100%;gap:12px;padding:0 16px}
  #student-flow-shell .student-flow-brand{--student-flow-unit:.56px}
  #student-flow-shell .student-flow-nav{gap:10px;font-size:13px}
  #student-flow-shell .student-flow-nav>span{width:auto;padding-right:10px}
  #student-flow-shell .student-flow-nav button{width:56px;height:36px;font-size:13px}
  #student-flow-shell .student-flow-steps{top:102px;left:50%;grid-template-columns:repeat(2,130px);gap:36px;transform:translateX(-50%)}
  #student-flow-shell .student-flow-steps li{height:36px;gap:10px}
  #student-flow-shell .student-flow-steps li>span{width:36px;height:36px;font-size:17px}
  #student-flow-shell .student-flow-steps strong{width:84px;font-size:15px}
  #student-flow-shell .student-flow-steps li+li:before{right:calc(100% + 9px);width:18px}
  main.profile-mode #student-profile,main.welcome-mode #welcome{padding-top:160px}
  main.completed-mode #completed,main.record-mode #record{min-height:100dvh;padding-top:80px}
}
@media(max-width:360px){#student-flow-shell .student-flow-header{gap:8px}#student-flow-shell .student-flow-brand{--student-flow-unit:.47px}}