:root{--blue:#00416B;--deep:#002343;--green:#00C08B;--green-dark:#008661;--text:#2F3B3E;--text-2:#586466;--muted:#6C787A;--line:#D4DEE0;--line-strong:#B8C6C9;--soft:#F7FAFB;--error:#A83232;--error-bg:#FFF4F4;--success-bg:#EFFAF6;--font-label:14px;--font-body:16px;--font-subtitle:20px;--font-heading:24px;--font-display:32px}*{box-sizing:border-box}html,body{margin:0;background:#fff;font-family:"DIN Next LT Arabic","DIN Next","DINNextLTArabic","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--text)}button{font:inherit}.activity-shell{width:100%;max-width:1440px;height:680px;margin:0 auto;background:#fff;overflow:hidden}.screen{height:680px;position:relative}.start-screen{display:flex;align-items:center;padding:64px;background:#fff url('assets/images/intro-hero.png') center/100% 100% no-repeat}.start-copy{width:50%;max-width:610px}.start-copy h1,.completion-card h1{font-size:var(--font-display);line-height:1.18;color:var(--deep);margin:0 0 16px;font-weight:700}.start-copy p,.completion-card p{font-size:var(--font-body);line-height:1.5;margin:0 0 24px;color:var(--text)}.btn{height:48px;border-radius:12px;padding:0 20px;border:1px solid transparent;font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap}.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn.primary{background:var(--green);color:var(--deep)}.btn.primary:hover{background:#0CC895}.btn.secondary{background:#fff;color:var(--blue);border-color:var(--line-strong)}.btn:disabled{opacity:.45;cursor:not-allowed}.activity-screen{display:grid;grid-template-rows:88px 1fr 76px}.activity-header{padding:0 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff}.activity-header h1{font-size:var(--font-heading);line-height:1.18;color:var(--deep);margin:0}.progress{display:flex;align-items:center;gap:8px}.progress-step{display:flex;align-items:center;gap:8px;font-size:var(--font-label);color:var(--muted)}.progress-marker{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-weight:700;background:#fff;color:var(--muted)}.progress-marker svg{width:18px;height:18px;fill:none;stroke:var(--green-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.progress-step.active .progress-marker{background:var(--green);border-color:var(--green);color:var(--deep)}.progress-step.active .progress-label{color:var(--deep);font-weight:700}.progress-step.complete .progress-marker{background:#EAF8F3;border-color:var(--green-dark)}.progress-step.complete .progress-label{color:var(--green-dark)}.progress-line{width:40px;height:1.5px;background:var(--line)}.activity-content{padding:24px 32px;min-height:0;overflow:hidden}.action-rail{height:76px;border-top:1px solid var(--line);padding:14px 32px;display:flex;align-items:center;justify-content:space-between;background:#fff}.screen-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px}.screen-heading h2{font-size:var(--font-heading);line-height:1.18;color:var(--deep);margin:0 0 8px}.screen-heading p{font-size:var(--font-body);line-height:1.5;margin:0;color:var(--text-2)}.count-pill,.status-pill{padding:8px 14px;border-radius:999px;background:#EAF8F3;color:var(--green-dark);font-size:var(--font-label);font-weight:700}.trainee-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.trainee-card{min-height:176px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:20px;display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:16px;text-align:left;cursor:pointer}.trainee-card:hover{border-color:#8FAFBC;box-shadow:0 8px 20px rgba(0,35,67,.06)}.trainee-card.complete{border-color:#9ADCC8;background:#FBFFFD}.trainee-card img{width:80px;height:80px;border-radius:50%;object-fit:cover;background:#F1F6F7}.trainee-copy{min-width:0}.trainee-name{display:block;font-size:var(--font-subtitle);font-weight:700;color:var(--deep);margin-bottom:4px}.trainee-meta{display:block;font-size:var(--font-label);line-height:1.35;color:var(--text-2);margin-bottom:12px}.status{display:inline-flex;font-size:var(--font-label);font-weight:700;color:#8A6400;background:#FFF7DE;border-radius:999px;padding:6px 10px}.status.done{color:var(--green-dark);background:#EAF8F3}.chev{font-size:32px;color:var(--blue);line-height:1}.record-card,.question-panel{border:1px solid var(--line);border-radius:16px;background:#fff;height:100%;overflow:hidden}.record-head{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:var(--soft)}.eyebrow{display:block;font-size:var(--font-label);line-height:1.35;color:var(--green-dark);font-weight:700;margin-bottom:4px}.record-head h2{font-size:var(--font-heading);line-height:1.18;color:var(--deep);margin:0 0 4px}.record-head p{font-size:var(--font-label);line-height:1.35;color:var(--text-2);margin:0}.record-body{padding:18px 24px}.profile-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}.profile-row img{width:56px;height:56px;border-radius:50%;object-fit:cover}.profile-row strong{display:block;font-size:var(--font-subtitle);color:var(--deep);margin-bottom:2px}.profile-row span{font-size:var(--font-body);line-height:1.5;color:var(--text-2)}.evidence-block{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:14px 16px;margin-bottom:14px}.evidence-block h3,.comment-box h3{font-size:var(--font-body);color:var(--blue);margin:0 0 6px}.evidence-block ul{margin:0;padding-left:22px;font-size:var(--font-body);line-height:1.5}.record-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}.data-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px}.data-card span{display:block;font-size:var(--font-label);color:var(--text-2);margin-bottom:4px}.data-card strong{font-size:var(--font-body);color:var(--deep)}.comment-box{border-left:4px solid var(--blue);background:var(--soft);border-radius:0 12px 12px 0;padding:14px 16px}.comment-box p{font-size:var(--font-body);line-height:1.5;margin:0}.context-bar{height:72px;border:1px solid var(--line);border-radius:16px;background:var(--soft);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.context-person{display:flex;align-items:center;gap:12px;min-width:0}.context-person img{width:48px;height:48px;border-radius:50%;object-fit:cover}.context-person strong{display:block;color:var(--deep);font-size:var(--font-body)}.context-person span{display:block;color:var(--text-2);font-size:var(--font-label);line-height:1.35}.context-link{border:0;background:transparent;color:var(--blue);font-size:var(--font-body);font-weight:700;cursor:pointer;padding:10px}.question-panel{height:calc(100% - 88px);padding:22px 24px;display:grid;grid-template-columns:minmax(300px,.75fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;column-gap:24px;row-gap:14px}.question-copy{grid-row:1 / span 2}.question-copy h2{font-size:var(--font-heading);line-height:1.18;color:var(--deep);margin:0 0 10px}.question-copy p{font-size:var(--font-body);line-height:1.5;color:var(--text-2);margin:0}.option-list{display:grid;gap:10px;align-content:start}.option{min-height:56px;border:1.5px solid var(--line-strong);border-radius:12px;padding:12px 16px;background:#fff;text-align:left;font-size:var(--font-body);font-weight:700;line-height:1.5;cursor:pointer;display:flex;align-items:center;gap:12px;color:var(--text)}.radio{width:26px;height:26px;border:2px solid #9DB1B8;border-radius:50%;flex:0 0 auto;position:relative}.option.selected{border-color:var(--blue);background:#F4F8FA}.option.selected .radio{border-color:var(--blue)}.option.selected .radio::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--blue);inset:5px}.feedback{grid-column:2;display:flex;align-items:flex-start;gap:12px;border:1px solid;border-radius:12px;padding:12px 14px;min-height:76px}.feedback-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-weight:700}.feedback-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.feedback strong{font-size:var(--font-body);display:block;margin-bottom:2px}.feedback p{font-size:var(--font-body);line-height:1.5;margin:0}.feedback.bad{background:var(--error-bg);border-color:#E9B7B7;color:#7D2B2B}.feedback.bad .feedback-icon{background:#F7DADA;color:var(--error)}.feedback.good{background:var(--success-bg);border-color:#A9DCCB;color:#075F46}.feedback.good .feedback-icon{background:#DDF4EC;color:var(--green-dark)}.summary-list{display:grid;gap:10px}.summary-row{display:grid;grid-template-columns:52px 1fr .8fr 2fr;gap:14px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.summary-row img{width:52px;height:52px;border-radius:50%;object-fit:cover}.summary-row strong{font-size:var(--font-body);color:var(--deep)}.summary-row span,.summary-row p{font-size:var(--font-label);line-height:1.35;color:var(--text-2);margin:0}.summary-name span{display:block}.summary-label{display:block;margin-bottom:2px}.completion-screen{display:grid;place-items:center;background:#EAF8F3 !important;padding:32px;width:100%;height:680px}.completion-card{width:min(760px,100%);padding:42px 34px;background:#fff;border-radius:24px;box-shadow:0 12px 34px rgba(0,35,67,.10);text-align:center}.success-mark{width:76px;height:76px;border-radius:50%;background:#DFF5ED;color:var(--green-dark);display:grid;place-items:center;margin:0 auto 20px}.success-mark svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.completion-card p{margin-bottom:0}
@media(max-width:1200px){.activity-header,.action-rail{padding-left:24px;padding-right:24px}.activity-content{padding:20px 24px}.trainee-card{min-height:164px}.question-panel{grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);padding:20px}.summary-row{grid-template-columns:48px 1fr .8fr 1.8fr}}
@media(max-width:900px){.activity-shell,.screen{height:auto;min-height:680px}.activity-screen{grid-template-rows:80px auto 72px;min-height:680px}.activity-content{overflow:visible}.question-panel{height:auto;grid-template-columns:1fr}.question-copy{grid-row:auto}.feedback{grid-column:1}.trainee-grid{grid-template-columns:1fr 1fr}.record-card{height:auto}}
@media(max-width:700px){:root{--font-subtitle:18px;--font-heading:22px;--font-display:28px}.activity-header{padding:0 16px}.activity-header h1{font-size:var(--font-heading)}.progress-label,.progress-line{display:none}.activity-content{padding:16px}.action-rail{padding:12px 16px;height:72px}.start-screen{padding:28px 20px;background-position:64% center}.start-copy{width:64%}.trainee-grid{grid-template-columns:1fr}.trainee-card{min-height:128px;grid-template-columns:64px 1fr auto;padding:16px}.trainee-card img{width:64px;height:64px}.record-head,.record-body{padding:16px}.record-grid{grid-template-columns:1fr}.context-bar{height:auto;align-items:flex-start}.context-link{font-size:14px}.question-panel{padding:16px}.summary-row{grid-template-columns:48px 1fr}.summary-row>div:nth-child(3),.summary-row>div:nth-child(4){grid-column:2}.btn{height:44px}.completion-card{padding:34px 24px}}
@media(max-width:480px){.start-screen{background-image:linear-gradient(rgba(255,255,255,.84),rgba(255,255,255,.84)),url('assets/images/intro-hero.png');background-size:cover;background-position:70% center}.start-copy{width:100%}.activity-header h1{max-width:230px}.context-bar{display:block}.context-link{padding:8px 0 0}.profile-row{align-items:flex-start}.profile-row span{display:none}.action-rail .btn{padding:0 14px}.summary-row{grid-template-columns:44px 1fr}}

/* V03 — SCFHS design-system alignment and final annotated revisions */
.btn.primary{background:var(--green);color:#FFFFFF;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.btn.primary:hover{background:var(--green-dark)}
.btn.primary:disabled{background:#A7E5D4;color:#FFFFFF;opacity:1}
.progress-marker{width:38px;height:38px;border-radius:999px;background:#EEF1F2;color:var(--muted);border:1px solid transparent}
.progress-step.active .progress-marker{background:var(--green);border-color:var(--green);color:#FFFFFF}
.progress-step.complete .progress-marker{background:#EAF8F3;border-color:var(--green);color:var(--green-dark)}
.progress-step.complete .progress-label{color:var(--green-dark)}

/* Record is a focused reading screen; no duplicate profile or decorative status pill. */
.record-card{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0}
.record-head{padding:16px 24px;background:#FFFFFF;align-items:center}
.record-head .eyebrow{margin-bottom:4px}
.record-body{padding:16px 24px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:14px;min-height:0}
.evidence-block{margin:0;padding:14px 16px}
.record-grid{margin:0}
.comment-box{min-height:0;overflow:visible;padding:14px 16px;display:block}
.comment-box p{overflow:visible;display:block}
.status-pill,.profile-row{display:none!important}

/* Question and choices use a vertical reading order. */
.question-panel{height:calc(100% - 88px);padding:20px 24px;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px;overflow:hidden}
.question-copy{grid-row:auto;max-width:none}
.question-copy h2{font-size:var(--font-heading);margin:0 0 8px}
.question-copy p{margin:0}
.option-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.option{min-height:64px;padding:12px 16px}

/* Feedback follows the same modal shell used in Activities 1 and 2. */
.overlay{position:absolute;inset:8px;z-index:50;border-radius:16px;background:rgba(0,35,67,.38);display:grid;place-items:center;padding:24px}
.feedback-card{width:min(900px,100%);background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 18px 42px rgba(0,35,67,.20);display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:20px;align-items:center}
.feedback-card.error{border-color:#E6AAA4}
.feedback-card.success{border-color:#9AD9C7}
.feedback-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:700}
.feedback-card.error .feedback-icon{background:#FCE8E6;color:#A83232}
.feedback-card.success .feedback-icon{background:#EAF8F3;color:var(--green-dark)}
.feedback-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.feedback-copy h2{font-size:var(--font-heading);line-height:1.18;font-weight:700;color:var(--blue);margin:0 0 6px}
.feedback-copy p{font-size:var(--font-body);line-height:1.5;color:var(--text-2);margin:0}

@media (max-width:1200px){
  .record-head{padding:14px 18px}.record-body{padding:14px 18px;gap:12px}
  .question-panel{padding:18px}.option{min-height:60px}
}
@media (max-width:820px){
  .question-panel{height:calc(100% - 80px);overflow:auto}
  .option-list{grid-template-columns:1fr}
  .feedback-card{grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto 44px;padding:18px;gap:14px}
  .feedback-card>.btn{grid-column:1/-1;width:100%;height:44px}
}
@media (max-width:700px){
  .feedback-copy h2{font-size:var(--font-heading)}
  .record-grid{grid-template-columns:1fr}
}
/* Keep single-choice options in one clear vertical sequence. */
.option-list{grid-template-columns:1fr}


/* V04 — final record portrait and full option visibility */
.record-title-group{display:flex;align-items:center;gap:16px;min-width:0}
.record-portrait{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#F1F6F7;flex:0 0 auto}
.context-bar{height:64px;margin-bottom:12px;padding:8px 16px}
.context-person img{width:44px;height:44px}
.question-panel{height:calc(100% - 76px);padding:16px 20px;gap:12px}
.question-copy h2{margin-bottom:6px}
.option-list{gap:8px}
.option{min-height:56px;padding:10px 16px}
@media(max-width:1200px){.question-panel{padding:16px 18px}.option{min-height:56px}}
@media(max-width:700px){.record-portrait{width:56px;height:56px}.record-title-group{gap:12px}.context-bar{height:auto}.question-panel{height:auto;overflow:visible}.option{min-height:52px}}

/* V05 — shared framed shell and stronger assessor-comment hierarchy */
html,body{width:100%;height:680px;min-height:680px;max-height:680px;overflow:hidden;background:#fff}
.activity-shell{width:100%;max-width:1440px;height:680px;margin:0 auto;padding:8px;background:#fff;overflow:hidden}
.screen{width:100%;height:100%;min-height:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(0,35,67,.10);background:#fff}

.comment-box{
  position:relative;
  border:1.5px solid var(--blue);
  border-left:6px solid var(--blue);
  border-radius:12px;
  background:#F1F7FA;
  padding:16px 18px;
  box-shadow:0 2px 6px rgba(0,65,107,.06);
}
.comment-box h3{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin:0 0 8px;
  color:var(--blue);
  font-size:var(--font-body);
  font-weight:700;
}
.comment-box p{
  color:var(--deep);
  font-size:var(--font-body);
  line-height:1.5;
  font-weight:500;
}

@media(max-width:700px){
  html,body{height:auto;min-height:680px;max-height:none;overflow:auto}
  .activity-shell{height:auto;min-height:680px;padding:4px}
  .screen{height:auto;min-height:672px}
}

/* V06 — guided comment review before the decision step */
.comment-trigger{
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "label cue"
    "text text";
  align-items:center;
  gap:8px 16px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.comment-trigger .comment-label{
  grid-area:label;
  color:var(--blue);
  font-size:var(--font-body);
  font-weight:700;
  line-height:1.5;
}
.comment-trigger .comment-text{
  grid-area:text;
  color:var(--deep);
  font-size:var(--font-body);
  line-height:1.5;
  font-weight:500;
}
.comment-trigger .comment-cue{
  grid-area:cue;
  justify-self:end;
  color:var(--blue);
  font-size:var(--font-label);
  font-weight:700;
}
.comment-trigger:not(.reviewed){
  animation:commentPulse 1.8s ease-in-out infinite;
}
.comment-trigger:hover,
.comment-trigger:focus-visible{
  outline:none;
  border-color:var(--green-dark);
  box-shadow:0 0 0 4px rgba(0,192,139,.14),0 4px 12px rgba(0,65,107,.10);
  background:#F4FAF8;
}
.comment-trigger.reviewed{
  border-color:var(--blue);
  box-shadow:0 2px 6px rgba(0,65,107,.06);
}
@keyframes commentPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,192,139,0),0 2px 6px rgba(0,65,107,.06)}
  50%{box-shadow:0 0 0 5px rgba(0,192,139,.16),0 4px 12px rgba(0,65,107,.10)}
}
.feedback-card.info{border-color:#A8CBDD}
.feedback-card.info .feedback-icon{background:#EAF3F8;color:var(--blue)}
.feedback-card.info .feedback-icon span{font-size:24px;line-height:1;font-weight:700}
@media (prefers-reduced-motion:reduce){.comment-trigger{animation:none!important}}
@media(max-width:700px){
  .comment-trigger{grid-template-columns:1fr;grid-template-areas:"label" "text" "cue"}
  .comment-trigger .comment-cue{justify-self:start}
}

/* V08 — full visual audit against the locked Activity 1 shell */
:root{
  --blue:#00416B;
  --deep:#002343;
  --green:#00C08B;
  --green-dark:#008661;
  --soft:#F7FAFA;
  --line:#D4DEE0;
  --line-strong:#B8C6C9;
  --text:#2F3B3E;
  --text-2:#586466;
  --muted:#6C787A;
}
html,body{
  width:100%;height:680px;min-height:680px;max-height:680px;
  overflow:hidden;background:#FFFFFF;color:var(--text);
  font-family:"DIN Next LT Arabic","DIN Next","DINNextLTArabic","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.activity-shell{
  width:100%;max-width:1440px;height:680px;margin:0 auto;padding:8px;
  background:#FFFFFF;overflow:hidden;position:relative;
}
.screen{
  width:100%;height:100%;min-width:0;min-height:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);
  background:var(--soft);
}
.btn{height:48px;min-height:48px;border-radius:12px;padding:0 20px;font-size:16px;font-weight:700;line-height:1}
.btn.primary{background:var(--green);color:#FFFFFF;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.btn.primary:hover{background:var(--green-dark);color:#FFFFFF;box-shadow:0 5px 12px rgba(16,24,40,.10)}
.btn.secondary{background:#FFFFFF;color:var(--blue);border-color:var(--line-strong)}
.btn.secondary:hover{background:#F8FBFC}
.btn:disabled{background:#F5F7F7;color:#9AA7AA;border-color:#DCE4E6;opacity:1;box-shadow:none}

/* Canonical full-canvas start page used in Activities 1 and 2. */
.intro-screen{position:relative;display:flex;align-items:center;padding:32px 48px;background:#FFFFFF;isolation:isolate}
.intro-screen::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.995) 0%,rgba(255,255,255,.97) 36%,rgba(255,255,255,.72) 53%,rgba(255,255,255,.12) 78%,rgba(255,255,255,0) 100%);z-index:1;pointer-events:none}
.intro-copy{position:relative;z-index:2;width:min(660px,54%);max-width:660px;padding-left:8px;text-align:left}
.intro-copy h1{font-size:32px;line-height:1.18;font-weight:700;letter-spacing:-.01em;color:var(--blue);margin:0 0 16px;max-width:650px}
.intro-lead{font-size:16px;line-height:1.5;font-weight:400;color:var(--text-2);margin:0 0 24px;max-width:590px;text-align:left}
.intro-copy .btn{min-width:196px}
.intro-visual{position:absolute;inset:0;z-index:0;overflow:hidden;background:#FFFFFF}
.intro-visual img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Shared activity chrome and semantic color roles. */
.activity-screen{background:var(--soft)}
.activity-header,.action-rail{background:#FFFFFF}
.activity-header h1,.screen-heading h2,.record-head h2,.question-copy h2{color:var(--blue)}
.activity-content{background:var(--soft)}
.record-card,.question-panel,.trainee-card,.data-card,.summary-row{background:#FFFFFF}
.record-head{background:#FFFFFF}
.evidence-block,.context-bar{background:#F7FAFA}
.progress-step.active .progress-marker{background:var(--green);border-color:var(--green);color:#FFFFFF}
.progress-step.active .progress-label{color:var(--blue);font-weight:700}
.progress-step.complete .progress-marker{background:#EAF9F4;border-color:var(--green-dark);color:var(--green-dark)}
.progress-step.complete .progress-label{color:var(--green-dark)}
.count-pill,.status-pill,.status.done{background:#EAF9F4;color:var(--green-dark)}
.eyebrow{color:var(--green-dark)}
.option.selected{border-color:var(--blue);background:#F3F8FA}
.option.selected .radio{border-color:var(--blue)}
.option.selected .radio::after{background:var(--blue)}

/* Comment is emphasized without introducing non-brand decorative colors. */
.comment-box{background:#F1F7FA;border-color:var(--blue);border-left-color:var(--blue);box-shadow:0 1px 3px rgba(0,65,107,.08)}
.comment-trigger:hover,.comment-trigger:focus-visible{border-color:var(--green-dark);background:#F4FAF8;box-shadow:0 0 0 4px rgba(0,192,139,.14),0 4px 12px rgba(0,65,107,.10)}

/* Canonical completion treatment from Activity 1. */
.completion-screen{display:grid;place-items:center;padding:30px;background:linear-gradient(180deg,#F9FCFC,#F2FBF8)!important}
.completion-card{width:min(720px,100%);background:#FFFFFF;border:1px solid var(--line);border-radius:16px;padding:38px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05)}
.success-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:#EAF9F4;color:var(--green-dark);margin:0 auto 16px}
.success-mark svg{width:30px;height:30px}
.completion-card h1{font-size:32px;line-height:1.18;font-weight:700;color:var(--blue);margin:0 0 10px}
.completion-card p{font-size:16px;line-height:1.5;color:var(--text-2);max-width:560px;margin:0}

@media(max-width:700px){
  html,body{height:auto;min-height:680px;max-height:none;overflow:auto}
  .activity-shell{height:auto;min-height:680px;padding:6px}
  .screen{height:auto;min-height:668px;border-radius:14px}
  .intro-screen{padding:24px 18px;align-items:flex-end;min-height:668px}
  .intro-screen::before{background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.34) 38%,rgba(255,255,255,.96) 67%,#FFFFFF 100%)}
  .intro-copy{width:100%;max-width:none;padding:0 4px 10px}
  .intro-copy h1{font-size:28px;margin-bottom:10px}
  .intro-lead{font-size:16px;line-height:1.5;margin-bottom:16px}
  .intro-copy .btn{height:48px;min-height:48px;font-size:16px}
  .completion-card h1{font-size:28px}
}
@media(max-width:480px){
  .intro-visual img{object-position:68% center}
}


/* ===== Unified T-EPA Start Screen ===== */
.start-screen{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.03fr) minmax(380px,.97fr)!important;
  align-items:stretch!important;
  width:100%!important;
  height:680px!important;
  padding:0!important;
  background:#FFFFFF!important;
  background-image:none!important;
  overflow:hidden!important;
}
.start-screen::before,.start-screen::after{
  content:none!important;display:none!important;background:none!important;
}
.start-copy{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:16px!important;
  padding:58px 72px!important;
  position:relative!important;
  z-index:2!important;
  background:transparent!important;
}
.start-copy h1{
  font-size:32px!important;
  line-height:1.18!important;
  font-weight:700!important;
  max-width:600px!important;
  margin:0!important;
}
.start-copy p,.start-copy .intro-lead{
  font-size:16px!important;
  line-height:1.5!important;
  max-width:560px!important;
  margin:0!important;
}
.start-copy .btn,.start-copy button{margin-top:8px!important}
.start-brand-panel{
  position:relative!important;
  overflow:hidden!important;
  background:transparent!important;
  min-width:0!important;
}
.start-brand-panel::before,.start-brand-panel::after{
  content:none!important;display:none!important;background:none!important;
}
.brand-pattern{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background:transparent!important;
}
.brand-pattern .arc-blue{stroke:#205B89;fill:none!important}
.brand-pattern .arc-blue-light{stroke:#80A6D0;fill:none!important}
.brand-pattern .arc-green{stroke:#00AD7D;fill:none!important}
.brand-pattern .arc-cyan{stroke:#46A193;fill:none!important}
.brand-pattern .dot-blue{fill:#205B89}
.brand-pattern .dot-blue-light{fill:#80A6D0}
.brand-pattern .dot-green{fill:#00AD7D}
.brand-pattern .dot-cyan{fill:#46A193}
@media(max-width:900px){
  .start-screen{grid-template-columns:minmax(0,1fr) minmax(300px,.72fr)!important}
  .start-copy{padding:44px 40px!important}
}
@media(max-width:700px){
  .start-screen{grid-template-columns:1fr!important;min-height:680px!important;height:auto!important}
  .start-copy{padding:42px 26px 30px!important;justify-content:flex-start!important}
  .start-brand-panel{min-height:230px!important}
  .start-copy h1{font-size:28px!important}
}


/* ===== T-EPA2 exact match to approved T-EPA1 start screen ===== */
.start-screen{
  background:#FFFFFF!important;
  background-image:none!important;
}
.start-screen .start-copy{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  padding:58px 72px!important;
  gap:16px!important;
}
.start-screen .start-copy h1{
  color:#00416B!important;
  font-size:32px!important;
  line-height:1.18!important;
  font-weight:700!important;
  max-width:600px!important;
  margin:0!important;
}
.start-screen .start-copy p,
.start-screen .start-copy .intro-lead{
  color:#586466!important;
  font-size:16px!important;
  line-height:1.5!important;
  max-width:560px!important;
  margin:0!important;
}
.start-screen .start-copy .btn,
.start-screen .start-copy button{
  background:#00C08B!important;
  color:#FFFFFF!important;
  border:none!important;
  margin-top:8px!important;
}

/* Exact SVG treatment from T-EPA1 */
.start-screen .brand-pattern .arc-blue{
  stroke:#205B89!important;
  fill:none!important;
}
.start-screen .brand-pattern .arc-blue-light{
  stroke:#80A6D0!important;
  fill:none!important;
}
.start-screen .brand-pattern .arc-green{
  stroke:#00AD7D!important;
  fill:none!important;
}
.start-screen .brand-pattern .arc-cyan{
  stroke:#46A193!important;
  fill:none!important;
}
.start-screen .brand-pattern .dot-blue{
  fill:#205B89!important;
  stroke:none!important;
}
.start-screen .brand-pattern .dot-blue-light{
  fill:#80A6D0!important;
  stroke:none!important;
}
.start-screen .brand-pattern .dot-green{
  fill:#00AD7D!important;
  stroke:none!important;
}
.start-screen .brand-pattern .dot-cyan{
  fill:#46A193!important;
  stroke:none!important;
}
.start-screen .brand-pattern circle[class^="dot-"],
.start-screen .brand-pattern circle[class*=" dot-"]{
  stroke:none!important;
  stroke-width:0!important;
}
@media(max-width:900px){
  .start-screen .start-copy{padding:44px 40px!important}
}
@media(max-width:700px){
  .start-screen .start-copy{
    padding:42px 26px 30px!important;
  }
  .start-screen .start-copy h1{
    font-size:28px!important;
  }
}