@font-face{
  font-family:"DIN Next LT Arabic";
  src:url("../fonts/DINNextLTArabic-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  --blue:#00416B;
  --deep:#002343;
  --green:#00C08B;
  --green-dark:#008661;
  --gray:#4D5858;
  --text:#2F3B3E;
  --muted:#6C787A;
  --line:#D4DEE0;
  --line-strong:#B8C6C9;
  --surface:#FFFFFF;
  --soft:#F7FAFA;
  --blue-soft:#EAF1F5;
  --success-soft:#E6F9F4;
  --error:#D02C2F;
  --error-soft:#FBEAEA;
  --warning:#B07910;
  --warning-soft:#FFF8E8;
  --label:14px;
  --body:16px;
  --subtitle:20px;
  --heading:24px;
  --display:32px;
  --radius:16px;
  --control-radius:12px;
  --completion-radius:24px;
  --font:"DIN Next LT Arabic","DIN Next","DINNextLTArabic","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;font-family:var(--font);color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
body{overflow:hidden}
button{font:inherit}
h1,h2,h3,p{margin:0}
button:focus-visible{outline:3px solid rgba(0,192,139,.22);outline-offset:2px}
.screen{width:100%;height:100%;min-height:680px;padding:6px;background:#fff}
.frame{width:100%;height:100%;min-height:668px;border:1px solid var(--line);border-radius:16px;background:var(--soft);overflow:hidden}

/* Buttons */
.btn{height:48px;min-width:118px;padding:0 20px;border-radius:var(--control-radius);border:1px solid transparent;font-size:var(--body);font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-dark)}
.btn.secondary{background:#fff;color:var(--blue);border-color:var(--blue)}
.btn.secondary:hover{background:var(--blue-soft)}
.btn:disabled{background:#F2F5F5!important;color:#97A4A6!important;border-color:#DCE4E6!important;cursor:not-allowed}

/* Start — locked shared template */
.start{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);background:#fff}
.start-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;padding:58px 72px;min-width:0}
.start-copy h1{font-size:var(--display);line-height:1.18;font-weight:700;color:var(--blue);max-width:620px}
.start-copy p{font-size:var(--body);line-height:1.5;color:var(--gray);max-width:590px}
.start-copy .btn{margin-top:8px}
.start-art{display:flex;align-items:center;justify-content:center;padding:28px 34px 28px 10px;overflow:hidden;background:#fff}
.start-art img{width:100%;height:100%;max-height:600px;object-fit:contain;display:block}

/* Instructions — locked shared template */
.instructions{display:grid;grid-template-rows:minmax(0,1fr) 80px}
.instructions-main{padding:36px 48px 24px;display:flex;align-items:center}
.instructions-wrap{width:min(1180px,100%);margin:0 auto}
.instructions-wrap h1{font-size:var(--display);line-height:1.18;color:var(--blue);font-weight:700}
.instructions-intro{margin-top:10px;font-size:var(--body);line-height:1.5;color:var(--gray);max-width:900px}
.instruction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.instruction-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;min-height:220px}
.instruction-icon{width:48px;height:48px;margin-bottom:16px}
.instruction-icon svg{width:48px;height:48px;fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.instruction-icon .accent{stroke:var(--green)}
.instruction-card h2{font-size:var(--subtitle);line-height:1.25;color:var(--deep);font-weight:700}
.instruction-card p{margin-top:10px;font-size:var(--body);line-height:1.5;color:var(--gray)}
.instruction-note{margin-top:16px;background:#fff;border-left:4px solid var(--green);padding:13px 16px;font-size:var(--body);line-height:1.5;color:var(--text)}
.static-action{height:80px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;padding:16px 22px}

/* Shared task shell */
.activity{display:grid;grid-template-rows:92px minmax(0,1fr) 80px}
.header{background:#fff;border-bottom:1px solid var(--line);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-copy{min-width:0}
.header-copy h1{font-size:var(--heading);line-height:1.18;font-weight:700;color:var(--blue)}
.header-copy p{margin-top:5px;font-size:var(--body);line-height:1.4;color:var(--muted)}
.progress{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.progress strong{font-size:var(--label);line-height:1.35;color:var(--gray);font-weight:500;white-space:nowrap}
.progress-track{width:180px;height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.progress-fill{height:100%;border-radius:inherit;background:var(--green)}
.content{padding:14px 16px;min-height:0;overflow:hidden}
.rail{background:#fff;border-top:1px solid var(--line);padding:16px 22px;display:grid;grid-template-columns:minmax(118px,1fr) minmax(0,2fr) minmax(118px,1fr);align-items:center;gap:18px}
.rail-left{justify-self:start}.rail-right{justify-self:end}
.rail-note{text-align:center;font-size:var(--label);line-height:1.35;color:var(--muted)}

/* Dashboard */
.dashboard{width:min(1420px,100%);height:100%;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.dashboard-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:2px 4px}
.dashboard-heading h2{font-size:var(--subtitle);line-height:1.25;color:var(--blue)}
.dashboard-heading p{margin-top:5px;font-size:var(--body);line-height:1.45;color:var(--gray)}
.count-pill{font-size:var(--label);font-weight:700;color:var(--green-dark);background:var(--success-soft);border-radius:999px;padding:8px 12px;white-space:nowrap}
.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:14px;min-height:0}
.case-card{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;cursor:pointer;color:var(--text);transition:border-color .15s,background .15s,box-shadow .15s;min-width:0}
.case-card:hover{border-color:#8FA6AC;background:#FCFEFE;box-shadow:0 5px 14px rgba(0,35,67,.05)}
.case-card.complete{border-color:#A7DECD;background:#FBFEFD}
.case-main{display:flex;align-items:center;gap:16px;min-width:0}
.case-main img{width:70px;height:70px;border-radius:50%;object-fit:cover;border:3px solid var(--blue-soft);flex:0 0 70px}
.case-copy{min-width:0}
.case-copy h3{font-size:var(--subtitle);line-height:1.25;color:var(--blue);font-weight:700}
.case-copy p{margin-top:5px;font-size:var(--body);line-height:1.4;color:var(--gray)}
.case-copy small{display:block;margin-top:3px;font-size:var(--label);line-height:1.35;color:var(--muted)}
.case-status{font-size:var(--label);font-weight:700;color:var(--muted);background:#F1F5F5;border-radius:999px;padding:8px 11px;white-space:nowrap}
.case-status.done{color:var(--green-dark);background:var(--success-soft)}

/* Case context */
.case-strip{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:58px}
.case-strip-id{display:flex;align-items:center;gap:10px;min-width:0}
.case-strip-id img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--blue-soft);flex:0 0 42px}
.case-strip h2{font-size:var(--subtitle);line-height:1.2;color:var(--blue)}
.case-strip p{font-size:var(--label);line-height:1.35;color:var(--muted);margin-top:2px}
.unit-pill{font-size:var(--label);line-height:1.35;color:var(--green-dark);background:var(--success-soft);padding:7px 10px;border-radius:999px;white-space:nowrap}

/* Portfolio record */
.record-wrap{width:min(1420px,100%);height:100%;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0}
.portfolio-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.portfolio-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.portfolio-heading h2{font-size:var(--subtitle);line-height:1.25;color:var(--blue)}
.portfolio-heading p{margin-top:4px;font-size:var(--body);line-height:1.45;color:var(--gray);max-width:760px}
.timeline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0}
.timeline-card{position:relative;background:#F9FBFB;border:1px solid var(--line);border-radius:14px;padding:12px 14px 12px 54px;min-width:0;overflow:hidden}
.timeline-index{position:absolute;left:14px;top:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--success-soft);color:var(--green-dark);font-size:var(--label);font-weight:700}
.timeline-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.timeline-top strong{font-size:var(--body);line-height:1.35;color:var(--blue)}
.score{font-size:var(--label);font-weight:700;padding:5px 9px;border-radius:999px;background:#EEF3F4;color:var(--gray);white-space:nowrap}
.score.clear-pass{background:var(--success-soft);color:var(--green-dark)}
.score.clear-fail,.score.borderline-fail{background:var(--error-soft);color:var(--error)}
.timeline-card p{margin-top:7px;font-size:var(--body);line-height:1.45;color:var(--text)}

/* Question screens */
.question-wrap{width:min(1420px,100%);height:100%;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;min-height:0}
.question-wrap.has-confirmation{grid-template-rows:auto auto minmax(0,1fr) auto}
.task-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px;min-height:0;display:grid;grid-template-rows:auto auto;align-content:start;gap:12px}
.task-heading h2{font-size:var(--subtitle);line-height:1.25;color:var(--blue)}
.task-heading p{margin-top:5px;font-size:var(--body);line-height:1.5;color:var(--gray)}
.options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;min-height:0}
.option-card{width:100%;min-height:62px;border:1.5px solid var(--line-strong);border-radius:var(--radius);background:#fff;padding:12px 15px;text-align:left;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:center;color:var(--text);font-size:var(--body);line-height:1.5;transition:border-color .15s,background .15s;min-width:0}
.option-card:hover{border-color:#8FA6AC}
.option-card.selected{border-color:var(--blue);background:#F4F8FA}
.radio{width:26px;height:26px;border:2px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;background:#fff;flex:0 0 26px}
.option-card.selected .radio{border-color:var(--blue)}
.option-card.selected .radio::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue)}
.action-options .option-card{min-height:88px;align-items:center}
.decision-step .task-card{grid-template-rows:auto minmax(0,1fr)}
.decision-step .decision-options{align-content:center}
.decision-step .decision-options .option-card{min-height:86px}

/* Multi select */
.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;min-height:0}
.evidence-choice{width:100%;min-height:98px;border:1.5px solid var(--line-strong);border-radius:var(--radius);background:#fff;padding:12px 14px;text-align:left;cursor:pointer;display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;color:var(--text);min-width:0}
.evidence-choice:hover{border-color:#8FA6AC}
.evidence-choice.selected{border-color:var(--blue);background:#F4F8FA}
.checkbox{width:26px;height:26px;border:2px solid var(--line-strong);border-radius:6px;display:grid;place-items:center;background:#fff;margin-top:1px}
.evidence-choice.selected .checkbox{border-color:var(--blue);background:var(--blue);color:#fff}
.checkbox svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.evidence-choice strong{display:block;font-size:var(--body);line-height:1.35;color:var(--blue)}
.evidence-choice small{display:block;margin-top:4px;font-size:var(--label);line-height:1.4;color:var(--gray)}

/* Compact confirmed context */
.confirmed-strip{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);padding:9px 14px;display:flex;align-items:center;gap:10px;min-height:50px}
.confirmed-icon{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--success-soft);color:var(--green-dark);display:grid;place-items:center}
.confirmed-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.confirmed-copy{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.confirmed-copy span{font-size:var(--label);line-height:1.35;color:var(--muted);font-weight:700}
.confirmed-copy strong{font-size:var(--body);line-height:1.4;color:var(--blue);font-weight:700}

/* Evidence launcher + modal */
.evidence-launcher{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.evidence-toggle{width:100%;min-height:56px;border:0;background:#fff;color:var(--blue);padding:7px 8px 7px 16px;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:14px;cursor:pointer;text-align:left}
.evidence-toggle:hover{background:#FBFCFC}
.evidence-toggle-copy{display:grid;gap:1px;min-width:0}
.evidence-toggle-copy strong{font-size:var(--body);line-height:1.35;font-weight:700;color:var(--blue)}
.evidence-toggle-copy span{font-size:var(--label);line-height:1.35;color:var(--muted)}
.evidence-toggle-icon{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;position:relative;display:block;color:var(--blue);background:#fff;font-size:0;line-height:0;justify-self:center;align-self:center}
.evidence-toggle-icon::before,.evidence-toggle-icon::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:999px;transform:translate(-50%,-50%)}
.evidence-toggle-icon::before{width:16px;height:2px}.evidence-toggle-icon::after{width:2px;height:16px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,35,67,.32);display:flex;align-items:center;justify-content:center;padding:24px;z-index:120}
.evidence-modal{width:min(920px,calc(100% - 48px));max-height:calc(100% - 48px);background:#fff;border-radius:16px;box-shadow:0 22px 56px rgba(0,35,67,.24);padding:26px 28px 28px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;position:relative}
.modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--blue);cursor:pointer;display:grid;place-items:center}
.modal-close:hover{background:var(--blue-soft)}
.modal-close svg{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.evidence-modal-head{display:grid;gap:5px;padding-right:58px}
.evidence-modal-head h2{font-size:var(--heading);line-height:1.18;color:var(--blue);font-weight:700}
.evidence-modal-head p{font-size:var(--body);line-height:1.5;color:var(--gray)}
.modal-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:0;overflow:auto}
.modal-evidence-card{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.modal-evidence-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-evidence-top strong{font-size:var(--body);line-height:1.35;color:var(--blue)}
.modal-evidence-card p{margin-top:7px;font-size:var(--body);line-height:1.45;color:var(--text)}

/* Feedback — locked shared component */
.feedback-overlay{position:fixed;inset:0;background:rgba(0,35,67,.32);display:flex;align-items:center;justify-content:center;padding:24px;z-index:140}
.feedback-card{width:min(620px,calc(100% - 48px));background:#fff;border-radius:16px;box-shadow:0 22px 56px rgba(0,35,67,.24);padding:28px 32px 24px;display:grid;gap:18px}
.feedback-status{display:grid;justify-items:center;gap:10px;text-align:center}
.feedback-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center}
.feedback-icon svg{width:30px;height:30px;display:block;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.feedback-card.correct .feedback-icon{background:var(--success-soft);color:var(--green-dark)}
.feedback-card.incorrect .feedback-icon{background:var(--error-soft);color:var(--error)}
.feedback-card.partial .feedback-icon{background:var(--warning-soft);color:var(--warning)}
.feedback-title{text-align:center;font-size:var(--heading);line-height:1.18;font-weight:700;color:var(--blue)}
.feedback-card.correct .feedback-title{color:var(--green-dark)}
.feedback-card.incorrect .feedback-title{color:var(--error)}
.feedback-card.partial .feedback-title{color:var(--warning)}
.feedback-body{font-size:var(--body);line-height:1.5;color:var(--text);text-align:left}
.feedback-actions{display:flex;justify-content:center}

/* Summary — open canvas */
.summary{display:grid;grid-template-rows:minmax(0,1fr) 80px}
.summary-main{padding:28px 42px 18px;overflow:hidden}
.summary-wrap{width:min(1180px,100%);height:100%;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:13px}
.summary-heading h1{font-size:var(--display);line-height:1.18;color:var(--blue);font-weight:700}
.summary-heading p{margin-top:8px;font-size:var(--body);line-height:1.5;color:var(--gray);max-width:820px}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0}
.summary-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--radius);padding:12px 14px;min-width:0;overflow:hidden}
.summary-person{display:flex;align-items:center;gap:10px}
.summary-person img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--blue-soft)}
.summary-person h2{font-size:var(--subtitle);line-height:1.2;color:var(--blue)}
.summary-person p{margin-top:2px;font-size:var(--label);line-height:1.35;color:var(--muted)}
.summary-detail{margin-top:8px;display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;align-items:start}
.summary-detail span{font-size:var(--label);font-weight:700;line-height:1.35;color:var(--deep)}
.summary-detail strong,.summary-detail p{font-size:var(--body);line-height:1.4;color:var(--gray);font-weight:400}
.summary-detail.action{border-top:1px solid var(--line);padding-top:7px}
.takeaway{border-left:4px solid var(--green);padding:9px 13px;font-size:var(--body);line-height:1.5;color:var(--text)}
.takeaway strong{color:var(--blue)}

/* Completion — locked */
.complete{display:grid;place-items:center;padding:30px;background:#F1FAF7}
.complete-card{width:min(760px,100%);background:#fff;border:1px solid #DDECE7;border-radius:var(--completion-radius);padding:42px 34px;text-align:center;box-shadow:0 14px 36px rgba(0,35,67,.10)}
.complete-mark{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--success-soft);color:var(--green-dark);margin:0 auto 18px}
.complete-mark svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.complete-card h1{font-size:var(--display);line-height:1.18;color:var(--blue);font-weight:700}
.complete-card p{margin:12px auto 0;max-width:590px;font-size:var(--body);line-height:1.5;color:var(--gray)}

@media(max-width:1200px){
  .start-copy{padding:48px 38px 48px 42px}.start-art{padding:24px}
  .instructions-main{padding:32px 32px 20px}.header{padding:12px 20px}.progress-track{width:150px}.content{padding:12px 10px}.rail{padding:14px 18px}
  .case-main img{width:64px;height:64px;flex-basis:64px}.case-card{padding:15px 16px}
  .summary-main{padding:25px 30px 16px}
}
@media(max-width:900px){
  body{overflow:auto}#app{height:auto;min-height:680px}.screen{height:auto;min-height:680px;padding:0}.frame{height:auto;min-height:680px;overflow:visible;border-radius:0;border-left:0;border-right:0}
  .start{grid-template-columns:minmax(0,1.05fr) minmax(300px,.75fr);min-height:680px}.start-art{padding:18px}.start-copy{padding:40px 34px}
  .instructions{min-height:680px}.activity{height:auto;min-height:680px;grid-template-rows:auto minmax(0,1fr) auto}.header{align-items:flex-start}.header-copy p{display:none}.content{overflow:visible}
  .case-grid{grid-template-rows:none}.case-card{min-height:120px}
  .record-wrap,.question-wrap{height:auto}.portfolio-card{min-height:0}.timeline-grid{grid-template-columns:1fr 1fr;grid-template-rows:none}.timeline-card{min-height:132px}
  .options-grid,.evidence-grid{grid-template-columns:1fr}.action-options .option-card{min-height:72px}
  .rail{position:sticky;bottom:0;z-index:10}.summary{min-height:680px}.summary-main{overflow:visible}
  .modal-evidence-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  :root{--subtitle:18px;--heading:22px;--display:28px}
  .start-copy{padding:34px 20px 22px}.start-art{padding:12px 18px 24px}.start-copy .btn{width:100%}
  .instructions{grid-template-rows:auto auto}.instructions-main{padding:28px 18px 20px;align-items:flex-start}.instruction-grid{grid-template-columns:1fr}.instruction-card{min-height:0;padding:18px;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;row-gap:4px}.instruction-card .instruction-icon{grid-row:1/4}.instruction-card h2,.instruction-card p{grid-column:2}.static-action{position:sticky;bottom:0;z-index:10;padding:14px 18px}.static-action .btn{width:100%}
  .header{padding:14px 16px;flex-wrap:wrap;gap:10px}.header-copy{width:100%}.progress{width:100%}.progress-track{flex:1;width:auto}.content{padding:12px 10px}.rail{grid-template-columns:1fr 1fr;padding:12px 14px;gap:10px}.rail-note{display:none}.rail-left,.rail-right{width:100%}.rail .btn{width:100%}
  .start{grid-template-columns:1fr;min-height:680px}.start-art{min-height:240px}
  .dashboard-heading{display:block}.count-pill{display:inline-block;margin-top:10px}.case-grid{grid-template-columns:1fr}.case-card{align-items:flex-start;padding:14px}.case-main{align-items:flex-start}.case-main img{width:56px;height:56px;flex-basis:56px}.case-status{margin-left:auto}
  .case-strip{align-items:flex-start}.unit-pill{display:none}.timeline-grid{grid-template-columns:1fr}.timeline-card{min-height:auto;padding-right:12px}
  .task-card{padding:14px}.option-card,.evidence-choice{height:auto;min-height:56px}
  .feedback-overlay,.modal-overlay{padding:16px}.feedback-card{width:calc(100% - 16px);padding:22px 18px}.evidence-modal{width:calc(100% - 16px);padding:22px 16px 18px}
  .summary{grid-template-rows:auto auto}.summary-main{padding:27px 18px 20px}.summary-grid{grid-template-columns:1fr}.summary-detail{grid-template-columns:100px minmax(0,1fr)}
  .complete{min-height:680px;padding:24px 18px}.complete-card{padding:32px 24px}
}
@media(max-width:480px){
  .start-art img{max-height:270px}.case-card{display:block}.case-status{display:inline-block;margin-top:12px}.case-main{gap:12px}
  .timeline-top{align-items:flex-start;flex-direction:column}.summary-detail{grid-template-columns:1fr;gap:4px}.complete-mark{width:68px;height:68px}.complete-mark svg{width:34px;height:34px}
}

/* rev2 — layout QA refinements based on approved activity system */

/* Pattern step: use the available question area instead of leaving a dead band below the choices. */
.pattern-step .task-card{
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
  padding:16px 18px 18px;
}
.pattern-step .options-grid{
  grid-template-rows:repeat(2,minmax(68px,1fr));
  align-content:stretch;
  gap:12px;
  min-height:0;
}
.pattern-step .pattern-option{
  height:100%;
  min-height:68px;
  padding:15px 16px;
  line-height:1.5;
}

/* Multi-select feedback: visibly retain correctly selected evidence. */
.evidence-choice.correct-selected,
.evidence-choice.locked-correct{
  border-color:var(--green) !important;
  background:var(--success-soft) !important;
}
.evidence-choice.correct-selected .checkbox,
.evidence-choice.locked-correct .checkbox{
  border-color:var(--green-dark) !important;
  background:var(--green) !important;
  color:#fff !important;
}
.evidence-choice.locked-correct{
  cursor:default;
}
.evidence-choice.incorrect-selected{
  border-color:#D9A5A7 !important;
  background:#FFF7F7 !important;
}
.evidence-choice.incorrect-selected .checkbox{
  border-color:var(--error) !important;
  background:var(--error-soft) !important;
  color:var(--error) !important;
}
.feedback-count{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  background:var(--soft);
  border:1px solid var(--line);
  text-align:center;
}
.feedback-count strong{
  font-size:var(--subtitle);
  line-height:1.2;
  color:var(--blue);
  font-weight:700;
  white-space:nowrap;
}
.feedback-count span{
  font-size:var(--body);
  line-height:1.4;
  color:var(--gray);
}
.feedback-card.partial .feedback-count strong{color:var(--warning)}
.feedback-card.correct .feedback-count strong{color:var(--green-dark)}
.feedback-card.incorrect .feedback-count strong{color:var(--error)}

/* Unit Mastery decision is a binary gate, so it uses a distinct two-card decision layout. */
.decision-step .decision-task-card{
  grid-template-rows:auto minmax(0,1fr);
  gap:14px;
  padding:17px 18px 18px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFD 100%);
}
.decision-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
  align-content:center;
  min-height:0;
}
.decision-choice{
  width:100%;
  min-height:126px;
  border:1.5px solid var(--line-strong);
  border-radius:18px;
  background:#fff;
  padding:18px 20px;
  display:grid;
  grid-template-columns:50px minmax(0,1fr) 26px;
  gap:16px;
  align-items:center;
  text-align:left;
  color:var(--text);
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.decision-choice:hover{
  border-color:#8FA6AC;
  box-shadow:0 5px 14px rgba(0,35,67,.045);
}
.decision-symbol{
  width:50px;
  height:50px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--blue-soft);
  color:var(--blue);
}
.decision-symbol svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.decision-choice strong{
  font-size:var(--subtitle);
  line-height:1.3;
  font-weight:700;
  color:var(--blue);
}
.decision-select-mark{
  width:26px;
  height:26px;
  border:2px solid var(--line-strong);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
}
.decision-choice.selected{
  border-color:var(--blue);
  background:#F4F8FA;
  box-shadow:0 0 0 1px rgba(0,65,107,.04);
}
.decision-choice.selected .decision-select-mark{
  border-color:var(--blue);
}
.decision-choice.selected .decision-select-mark::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--blue);
}

/* Follow-up action: let the full professional action breathe; never squeeze copy into fixed-height choices. */
.action-step .action-task-card{
  grid-template-rows:auto auto;
  align-content:start;
  gap:14px;
  padding:16px 18px 18px;
}
.action-step .action-options{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,auto);
  gap:12px 14px;
  align-content:start;
}
.action-step .action-option{
  height:auto;
  min-height:100px;
  padding:16px 18px;
  align-items:start;
  line-height:1.55;
  overflow:visible;
}
.action-step .action-option .radio{
  margin-top:3px;
}
.action-step .action-option > span:last-child{
  min-width:0;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

/* Shorter desktop canvases: reclaim chrome space, not text size or line-height. */
@media (min-width:901px) and (max-height:760px){
  .question-wrap{gap:9px}
  .case-strip{padding:8px 14px}
  .case-strip-id img{width:42px;height:42px;flex-basis:42px}
  .confirmed-strip{min-height:44px;padding:7px 12px}
  .confirmed-icon{width:30px;height:30px;flex-basis:30px}
  .evidence-toggle{min-height:50px;padding-top:5px;padding-bottom:5px}
  .evidence-toggle-icon{width:36px;height:36px}
  .action-step .action-task-card{padding:13px 16px 14px;gap:10px}
  .action-step .action-options{gap:9px 12px}
  .action-step .action-option{min-height:82px;padding:12px 14px;line-height:1.5}
  .decision-choice{min-height:106px;padding:14px 16px}
  .pattern-step .task-card{padding:13px 16px 14px;gap:10px}
  .pattern-step .options-grid{gap:9px}
}

@media(max-width:900px){
  .decision-options{grid-template-columns:1fr;align-content:start}
  .decision-choice{min-height:92px;padding:14px 16px}
  .action-step .action-options{grid-template-columns:1fr;grid-template-rows:none}
  .action-step .action-option{min-height:72px}
  .pattern-step .options-grid{grid-template-rows:none}
  .pattern-step .pattern-option{height:auto;min-height:68px}
}
@media(max-width:700px){
  .feedback-count{display:grid;gap:2px}
  .decision-choice{grid-template-columns:44px minmax(0,1fr) 24px;gap:12px}
  .decision-symbol{width:44px;height:44px}
  .decision-symbol svg{width:23px;height:23px}
}


/* rev3 — evidence-stage space use + feedback consistency */
/* Use the available question area by allowing the four evidence cards to share the vertical space evenly. */
.evidence-step .task-card{
  grid-template-rows:auto minmax(0,1fr) !important;
  gap:14px !important;
  padding:16px 18px 18px !important;
}
.evidence-step .evidence-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(108px,1fr)) !important;
  align-content:stretch !important;
  gap:14px !important;
  min-height:0 !important;
}
.evidence-step .evidence-choice{
  height:100% !important;
  min-height:108px !important;
  padding:16px 18px !important;
  align-items:center !important;
}
.evidence-step .evidence-choice .checkbox{
  align-self:center !important;
}
.evidence-step .evidence-choice strong{
  line-height:1.4 !important;
}
.evidence-step .evidence-choice small{
  margin-top:5px !important;
  line-height:1.45 !important;
}

/* Keep evidence-count feedback inside the normal feedback paragraph so the modal matches the shared system. */
.feedback-count{display:none !important;}
.feedback-inline-count{
  font-size:inherit !important;
  line-height:inherit !important;
  font-weight:700 !important;
  color:inherit !important;
}
.feedback-card.partial .feedback-inline-count{color:var(--warning) !important;}
.feedback-card.incorrect .feedback-inline-count{color:var(--error) !important;}

@media (min-width:901px) and (max-height:760px){
  .evidence-step .task-card{
    padding:13px 16px 14px !important;
    gap:10px !important;
  }
  .evidence-step .evidence-grid{
    grid-template-rows:repeat(2,minmax(86px,1fr)) !important;
    gap:10px 12px !important;
  }
  .evidence-step .evidence-choice{
    min-height:86px !important;
    padding:12px 14px !important;
  }
}
@media(max-width:900px){
  .evidence-step .evidence-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
  }
  .evidence-step .evidence-choice{
    height:auto !important;
    min-height:72px !important;
  }
}

/* rev4 — balance the evidence-selection canvas without oversized choice cards */
.evidence-step .evidence-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  grid-template-rows:repeat(2,minmax(118px,auto)) !important;
  align-content:space-evenly !important;
  height:100% !important;
  gap:14px !important;
}
.evidence-step .evidence-choice{
  height:100% !important;
  min-height:118px !important;
  padding:16px 18px !important;
  align-items:center !important;
}
@media (min-width:901px) and (max-height:760px){
  .evidence-step .evidence-grid{
    grid-template-rows:repeat(2,minmax(86px,auto)) !important;
    align-content:center !important;
    gap:10px 12px !important;
  }
  .evidence-step .evidence-choice{
    min-height:86px !important;
    padding:12px 14px !important;
  }
}
@media(max-width:900px){
  .evidence-step .evidence-grid{
    height:auto !important;
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    align-content:start !important;
  }
  .evidence-step .evidence-choice{
    height:auto !important;
    min-height:72px !important;
  }
}