/* Reference layout: reading material, question steps, numbered answers, fixed actions. */
html:has(.exam-mode),body:has(.exam-mode){height:auto;overflow:auto}
body:has(.exam-mode){background:#f5f8f4!important}
main.exam-mode{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#f5f8f4!important;overflow:visible;box-shadow:none}
.exam-mode>.notice{display:none}
main.exam-mode #exam{--exam-unit:min(1px,.09765625dvh);display:flex;flex-direction:column;flex:none;width:100%;height:100%;min-height:0;overflow:visible;color:#102638;font-family:var(--entry-font-family);font-weight:400;animation:none}
#exam .exam-page-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--exam-unit) * 24);flex:none;height:calc(var(--exam-unit) * 80);padding:0 calc(var(--exam-unit) * 46);border-bottom:1px solid #dfe7e2;background:#fff}
#exam .exam-brand{display:flex;align-items:center;gap:calc(var(--exam-unit) * 18);white-space:nowrap}
#exam .exam-brand>svg{width:calc(var(--exam-unit) * 48);height:calc(var(--exam-unit) * 46);stroke:#008975;stroke-width:1.8;stroke-linecap:round}
#exam .exam-brand strong{font-size:clamp(20px,1.8vw,28px);font-weight:600}
#exam #exam-assessment-title{min-width:0;margin:0;font-size:clamp(16px,1.25vw,20px);font-weight:600;line-height:1.5;text-align:center;overflow-wrap:anywhere}
#exam .exam-clock{display:flex;align-items:center;justify-content:center;gap:calc(var(--exam-unit) * 14);flex:none;height:calc(var(--exam-unit) * 56);padding:0 calc(var(--exam-unit) * 18);border:1px solid #c8ded5;border-radius:calc(var(--exam-unit) * 9);background:#fff;white-space:nowrap}
#exam .exam-clock svg{width:calc(var(--exam-unit) * 28);height:calc(var(--exam-unit) * 28);stroke:#008774;stroke-width:1.8;stroke-linecap:round}
#exam .exam-clock>span{color:#75839a;font-size:calc(var(--exam-unit) * 16)}
#exam #timer{min-width:calc(var(--exam-unit) * 82);color:#008371;font-size:calc(var(--exam-unit) * 32);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
#exam .exam-layout{display:grid;grid-template-columns:minmax(260px,34.5%) minmax(0,1fr);gap:clamp(14px,1.5vw,24px);align-items:stretch;flex:1;width:100%;height:auto;min-height:0;padding:calc(var(--exam-unit) * 20) clamp(12px,1.2vw,20px) calc(var(--exam-unit) * 20)}
#exam .background-panel{position:static;height:auto;min-height:0;padding:calc(var(--exam-unit) * 22);border:1px solid #cfdfd9;border-radius:calc(var(--exam-unit) * 10);background:#fff;color:#102638;box-shadow:none;overflow:auto;scrollbar-width:thin}
#exam .exam-reading-label{display:block;margin:0 0 calc(var(--exam-unit) * 8);color:#008774;font-size:calc(var(--exam-unit) * 18);font-weight:600}
#exam .background-panel h2{margin:0;color:#102638;font-family:inherit;font-size:calc(var(--exam-unit) * 28);font-weight:600;line-height:1.5}
#exam .exam-background-figure{margin:calc(var(--exam-unit) * 20) 0 calc(var(--exam-unit) * 18)}
#exam .exam-background-figure img{display:block;width:100%;height:auto;border-radius:calc(var(--exam-unit) * 7)}
#exam .exam-background-figure figcaption{margin-top:calc(var(--exam-unit) * 5);color:#81908c;font-size:calc(var(--exam-unit) * 11);line-height:1.5}
#exam .exam-background-figure a{color:inherit;text-decoration:none}
#exam .exam-background-figure a:hover{text-decoration:underline}
#exam #background{margin:0;color:#354453;font-size:clamp(14px,1.15vw,19px);font-weight:400;line-height:1.9;text-align:justify;overflow-wrap:anywhere}
#exam .question-panel{display:flex;flex-direction:column;height:auto;min-height:0;padding:0;overflow:visible}
#exam .exam-status{display:block;flex:none;margin:0 0 calc(var(--exam-unit) * 12);padding:0}
#exam .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;margin:0}
#exam .nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--exam-unit) * 8);width:100%;min-width:0;margin:0;padding:calc(var(--exam-unit) * 5) 0 0;border:0;border-radius:0;background:transparent;color:#75808b;font-family:inherit;font-size:calc(var(--exam-unit) * 16);font-weight:400;line-height:1.5;letter-spacing:0;box-shadow:none;transform:none;opacity:1}
#exam .nav button:not(:last-child):after{content:"";position:absolute;top:calc(var(--exam-unit) * 26);left:calc(50% + var(--exam-unit) * 38);width:calc(100% - var(--exam-unit) * 76);height:1px;background:#d1dadc}
#exam .exam-step-circle{display:grid;place-items:center;width:calc(var(--exam-unit) * 42);height:calc(var(--exam-unit) * 42);border:1px solid #daddd9;border-radius:50%;background:#edf0ed;color:#7b8380;font-size:calc(var(--exam-unit) * 24);font-weight:600;line-height:1}
#exam .exam-step-circle svg{width:calc(var(--exam-unit) * 23);height:calc(var(--exam-unit) * 23);stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#exam .nav button.active{background:transparent;color:#008474}
#exam .nav button.active .exam-step-circle{border-color:#008474;background:linear-gradient(135deg,#11978b,#006b60);color:#fff}
#exam .nav button.complete{color:#008474}
#exam .nav button.complete .exam-step-circle{border-color:#d0e8de;background:#e5f3ec;color:#008474}
#exam .nav button:not(:disabled):hover .exam-step-circle{border-color:#008474}
#exam #exam-progress{margin:calc(var(--exam-unit) * 12) 0 0;color:#808b9a;font-size:calc(var(--exam-unit) * 16);line-height:1.5}
#exam .question-workspace{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;border:1px solid #cfdfd9;border-radius:calc(var(--exam-unit) * 10);background:#fff}
#exam #question{flex:1;min-height:0;padding:calc(var(--exam-unit) * 24) calc(var(--exam-unit) * 28) calc(var(--exam-unit) * 14);overflow:auto;scrollbar-width:thin}
#exam .question{padding:0}
#exam .question h2{margin:0;color:#102638;font-family:inherit;font-size:clamp(20px,1.8vw,28px);font-weight:600;line-height:1.45;letter-spacing:0;white-space:pre-line;overflow-wrap:anywhere}
#exam .question h2::selection{background:#cfece3;color:#102638}
#exam .exam-question-meta{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--exam-unit) * 16);margin:calc(var(--exam-unit) * 10) 0 calc(var(--exam-unit) * 16);color:#7b8aa2;font-size:clamp(13px,1.05vw,16px);line-height:1.5}
#exam #exam-answer-count{flex:none;white-space:nowrap}
#exam #answer-fields{display:flex;flex-direction:column;gap:calc(var(--exam-unit) * 14)}
#exam .answer-row{display:flex;align-items:flex-start;gap:calc(var(--exam-unit) * 14);margin:0}
#exam .exam-answer-number{flex:none;width:calc(var(--exam-unit) * 34);color:#8190a6;font-size:calc(var(--exam-unit) * 21);font-weight:400;line-height:calc(var(--exam-unit) * 74);font-variant-numeric:tabular-nums}
#exam .answer-row textarea{flex:1;min-width:0;width:100%;height:calc(var(--exam-unit) * 74);min-height:calc(var(--exam-unit) * 74);max-height:none;margin:0;padding:calc(var(--exam-unit) * 10) calc(var(--exam-unit) * 16);border:1px solid #ccd6e3;border-radius:calc(var(--exam-unit) * 9);background:#fff;color:#253c48;font-family:inherit;font-size:clamp(14px,1.17vw,18px);font-weight:400;line-height:1.5;box-shadow:none;resize:vertical}
#exam .answer-row textarea::placeholder{color:#8090a8;font-weight:400;opacity:1}
#exam .answer-row textarea:focus{outline:0;border-color:#008e7a;box-shadow:0 0 0 2px #008e7a12}
#exam .answer-row textarea:read-only{background:#f8faf8}
#exam .answer-row .remove{flex:none;min-width:0;margin:0;padding:calc(var(--exam-unit) * 12) calc(var(--exam-unit) * 4);background:transparent;color:#a65046;font-size:calc(var(--exam-unit) * 15);box-shadow:none}
#exam #add-idea{display:flex;align-items:center;justify-content:center;gap:calc(var(--exam-unit) * 12);width:auto;min-width:calc(var(--exam-unit) * 194);height:calc(var(--exam-unit) * 44);margin:calc(var(--exam-unit) * 12) 0 0;padding:0 calc(var(--exam-unit) * 18);border:1px solid #008e76;border-radius:calc(var(--exam-unit) * 8);background:#fff;color:#008674;font-family:inherit;font-size:calc(var(--exam-unit) * 18);font-weight:600;box-shadow:none;transform:none}
#exam #add-idea>span{font-size:calc(var(--exam-unit) * 26);font-weight:400;line-height:1}
#exam .exam-answer-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:calc(var(--exam-unit) * 16);flex:none;min-height:calc(var(--exam-unit) * 92);padding:calc(var(--exam-unit) * 16) calc(var(--exam-unit) * 28);border-top:1px solid #d3e1dd;background:#fff}
#exam .exam-save-state{display:flex;align-items:center;gap:calc(var(--exam-unit) * 12);min-width:0;flex:1;color:#8591a0;font-size:clamp(13px,1.05vw,16px);line-height:1.4;overflow-wrap:anywhere}
#exam .exam-save-state:before{content:"";flex:none;width:calc(var(--exam-unit) * 12);height:calc(var(--exam-unit) * 12);border-radius:50%;background:#a7b0b6}
#exam .exam-save-state[data-state="saved"]{color:#008674}
#exam .exam-save-state[data-state="saved"]:before{background:#008674}
#exam .exam-save-state[data-state="error"]{color:#ae493b}
#exam .exam-save-state[data-state="error"]:before{background:#ae493b}
#exam .exam-answer-footer .actions{display:flex;flex-wrap:nowrap;gap:calc(var(--exam-unit) * 16);flex:none;margin:0}
#exam .exam-answer-footer button{display:flex;align-items:center;justify-content:center;gap:calc(var(--exam-unit) * 18);height:calc(var(--exam-unit) * 54);min-width:0;margin:0;padding:calc(var(--exam-unit) * 10) calc(var(--exam-unit) * 22);border:1px solid #008774;border-radius:calc(var(--exam-unit) * 8);background:linear-gradient(115deg,#008e80,#006f64);color:#fff;font-family:inherit;font-size:calc(var(--exam-unit) * 20);font-weight:600;line-height:1.4;letter-spacing:0;white-space:nowrap;box-shadow:none;transform:none}
#exam .exam-answer-footer .exam-save-button{min-width:calc(var(--exam-unit) * 160);background:#fff;color:#008674}
#exam .exam-answer-footer #advance{min-width:calc(var(--exam-unit) * 244)}
#exam .exam-answer-footer #submit-button{min-width:calc(var(--exam-unit) * 244);background:linear-gradient(115deg,#008e80,#006f64);border-color:#008774}
#exam .exam-answer-footer button:hover{filter:brightness(.96)}
#exam.long-answer .answer-row textarea{height:calc(var(--exam-unit) * 340);min-height:calc(var(--exam-unit) * 280);max-height:none}
#exam:is(.experiment-design,.experiment-review) #question{display:flex}
#exam:is(.experiment-design,.experiment-review) .question{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}
#exam:is(.experiment-design,.experiment-review) .question h2{flex:none}
#exam .exam-experiment-label{display:block;flex:none;margin:calc(var(--exam-unit) * 32) 0 calc(var(--exam-unit) * 16);color:#6d7e96;font-family:inherit;font-size:clamp(15px,1.17vw,18px);font-weight:400;line-height:1.5;letter-spacing:0}
#exam:is(.experiment-design,.experiment-review) #answer-fields{flex:1;min-height:calc(var(--exam-unit) * 260)}
#exam:is(.experiment-design,.experiment-review) .experiment-answer-row{align-items:stretch;flex:1;min-height:0}
#exam:is(.experiment-design,.experiment-review).long-answer .experiment-answer-row textarea{height:100%;min-height:calc(var(--exam-unit) * 260);max-height:none;padding:calc(var(--exam-unit) * 18) calc(var(--exam-unit) * 22)}
#exam .exam-plan-disclosure{flex:none;margin:calc(var(--exam-unit) * 24) 0 0;border:1px solid #ccd6e3;border-radius:calc(var(--exam-unit) * 10);background:#fff}
#exam .exam-plan-disclosure summary{display:flex;align-items:center;gap:calc(var(--exam-unit) * 18);min-height:calc(var(--exam-unit) * 66);padding:calc(var(--exam-unit) * 16) calc(var(--exam-unit) * 22);color:#203750;font-family:inherit;font-size:clamp(16px,1.3vw,20px);font-weight:400;line-height:1.5;list-style:none;cursor:pointer}
#exam .exam-plan-disclosure summary::-webkit-details-marker{display:none}
#exam .exam-plan-disclosure summary:focus-visible{outline:2px solid #008674;outline-offset:3px;border-radius:inherit}
#exam .exam-plan-icon{flex:none;width:calc(var(--exam-unit) * 26);height:calc(var(--exam-unit) * 30);stroke:#50678b;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#exam .exam-plan-chevron{flex:none;width:calc(var(--exam-unit) * 24);height:calc(var(--exam-unit) * 24);margin-left:auto;stroke:#50678b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#exam .exam-plan-disclosure[open] .exam-plan-chevron{transform:rotate(180deg)}
#exam .exam-plan-preview{max-height:240px;max-height:min(24dvh,240px);margin:0 calc(var(--exam-unit) * 22);padding:calc(var(--exam-unit) * 16) 0 calc(var(--exam-unit) * 20);border-top:1px solid #e2e9e5;color:#354453;font-family:inherit;font-size:clamp(14px,1.17vw,18px);font-weight:400;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto;scrollbar-width:thin}
#exam.experiment-review .exam-answer-footer{flex-wrap:wrap}
#exam .exam-answer-footer .exam-back-to-plan{flex:none;background:#fff;color:#075d5b;white-space:normal}
#exam.experiment-review .exam-answer-footer .actions{margin-left:auto}
#exam button:focus-visible{outline:2px solid #008674;outline-offset:3px}
@media(min-width:721px) and (max-width:1100px){
  #exam .exam-page-header{padding-left:16px;padding-right:16px;gap:12px}
  #exam .exam-clock>span{display:none}
  #exam .exam-answer-footer{flex-wrap:wrap;gap:10px}
  #exam .exam-answer-footer .actions{width:100%;gap:10px}
  #exam .exam-answer-footer button{flex:1;white-space:normal}
  #exam .exam-answer-footer .exam-save-button,#exam .exam-answer-footer #advance{min-width:0}
}
@media(max-width:720px){
  main.exam-mode{display:block;height:auto;min-height:100dvh;overflow:visible}
  main.exam-mode #exam{--exam-unit:1px;width:100%;height:auto;min-height:100dvh}
  #exam .exam-page-header{flex-wrap:wrap;justify-content:space-between;gap:12px;height:auto;padding:16px}
  #exam .exam-brand{gap:8px}
  #exam .exam-brand>svg{width:30px;height:30px}
  #exam .exam-brand strong{font-size:18px}
  #exam #exam-assessment-title{order:3;width:100%;font-size:16px;text-align:left}
  #exam .exam-clock{gap:8px;height:40px;padding:0 10px}
  #exam .exam-clock svg{width:22px;height:22px}
  #exam .exam-clock>span{display:none}
  #exam #timer{min-width:60px;font-size:23px}
  #exam .exam-layout{display:flex;flex-direction:column;gap:22px;padding:18px 16px 24px}
  #exam .background-panel{height:auto;padding:20px;overflow:visible}
  #exam .background-panel h2{font-size:23px}
  #exam #background{font-size:16px;line-height:1.85}
  #exam .question-workspace{overflow:visible}
  #exam #question{padding:20px 16px;overflow:visible}
  #exam .question h2{font-size:21px;line-height:1.6}
  #exam .exam-question-meta{align-items:flex-start;font-size:13px;gap:8px}
  #exam .exam-answer-number{width:24px;font-size:17px;line-height:84px}
  #exam .answer-row{gap:8px}
  #exam .answer-row textarea{height:84px;min-height:84px;padding:10px 12px;font-size:16px}
  #exam .exam-answer-footer{position:sticky;bottom:0;flex-wrap:wrap;padding:14px 16px;gap:10px;min-height:0}
  #exam .exam-save-state{font-size:13px}
  #exam .exam-answer-footer .actions{width:100%;gap:10px}
  #exam .exam-answer-footer button{flex:1;height:auto;min-height:48px;padding:10px;font-size:14px;white-space:normal}
  #exam .exam-answer-footer .exam-save-button,#exam .exam-answer-footer #advance{min-width:0}
  #exam.long-answer .answer-row textarea{height:260px;min-height:220px}
  #exam:is(.experiment-design,.experiment-review) #question{display:block}
  #exam:is(.experiment-design,.experiment-review) .question{display:block}
  #exam .exam-experiment-label{margin:24px 0 12px}
  #exam:is(.experiment-design,.experiment-review).long-answer .experiment-answer-row textarea{height:320px;min-height:260px;padding:14px 16px}
  #exam .exam-plan-disclosure{margin-top:20px;border-radius:9px}
  #exam .exam-plan-disclosure summary{min-height:56px;gap:12px;padding:14px 16px;font-size:16px}
  #exam .exam-plan-icon{width:22px;height:26px}
  #exam .exam-plan-chevron{width:20px;height:20px}
  #exam .exam-plan-preview{margin:0 16px;padding:14px 0;font-size:16px}
  #exam .exam-answer-footer #submit-button{min-width:0}
}
@media(prefers-reduced-motion:reduce){#exam *{transition:none!important}}