:root{--blue:#00416B;--deep:#002343;--green:#00C08B;--green-dark:#008661;--text:#2F3B3E;--text2:#586466;--muted:#6C787A;--line:#D4DEE0;--line2:#B8C6C9;--soft:#F7FAFA;--danger:#B42318;--font-body:16px;--font-label:14px;--font-sub:20px;--font-head:24px;--font-display:32px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:680px;overflow:hidden;background:#fff;font-family:"DIN Next LT Arabic","DIN Next","DINNextLTArabic","Helvetica Neue",Arial,sans-serif;color:var(--text)}button{font:inherit}.activity-shell{width:100%;height:680px;padding:8px;background:#fff}.screen{width:100%;height:100%;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--soft);box-shadow:0 2px 8px rgba(0,35,67,.1)}.btn{height:48px;min-width:150px;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}.btn svg{width:18px;fill:none;stroke:currentColor;stroke-width:2}.btn.primary{background:var(--green);color:#fff}.btn.secondary{background:#fff;color:var(--blue);border-color:var(--line2)}.btn:disabled{opacity:.45;cursor:not-allowed}.intro-screen{position:relative;display:flex;align-items:center;padding:48px;background:#fff}.intro-screen:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.97) 38%,rgba(255,255,255,.65) 56%,rgba(255,255,255,0) 82%);z-index:1}.intro-copy{position:relative;z-index:2;width:52%;max-width:650px}.intro-copy h1{font-size:var(--font-display);line-height:1.18;color:var(--blue);margin:0 0 16px}.intro-copy p{font-size:16px;line-height:1.5;color:var(--text2);margin:0 0 24px}.intro-visual{position:absolute;inset:0}.intro-visual img{width:100%;height:100%;object-fit:cover}.activity-screen{display:grid;grid-template-rows:64px 1fr 64px}.activity-header,.action-rail{background:#fff;display:flex;align-items:center;padding:0 24px}.activity-header{border-bottom:1px solid var(--line);justify-content:space-between}.activity-header h1{font-size:24px;color:var(--blue);margin:0}.header-step{font-size:14px;color:var(--green-dark);font-weight:700}.activity-content{padding:20px 24px;min-height:0;overflow:hidden}.action-rail{border-top:1px solid var(--line);justify-content:space-between}.eyebrow{font-size:14px;font-weight:700;color:var(--green-dark);text-transform:uppercase;letter-spacing:.04em}.screen-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.screen-heading h2,.bridge-copy h2,.record-person h2,.question-card h2{font-size:24px;line-height:1.18;color:var(--blue);margin:0 0 8px}.screen-heading p,.bridge-copy p{font-size:16px;line-height:1.5;color:var(--text2);margin:0}.count-pill{background:#EAF9F4;color:var(--green-dark);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:700}.bridge-layout{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:18px}.bridge-copy{max-width:800px}.journey-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px}.journey-flow article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;min-height:155px;display:flex;flex-direction:column;justify-content:center}.journey-flow article span{width:36px;height:36px;border-radius:50%;background:#EAF3F8;color:var(--blue);display:grid;place-items:center;font-weight:700;margin-bottom:12px}.journey-flow article strong{color:var(--deep);font-size:18px}.journey-flow article small{font-size:14px;color:var(--text2);margin-top:6px}.journey-flow i{font-style:normal;font-size:28px;color:var(--green-dark)}.bridge-note,.instruction-card{background:#F1F7FA;border-left:5px solid var(--blue);border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.5}.trainee-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.trainee-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;text-align:left;cursor:pointer;display:grid;gap:12px}.trainee-card:hover{border-color:var(--blue);box-shadow:0 4px 12px rgba(0,65,107,.08)}.trainee-card.done{border-color:var(--green-dark);background:#F7FCFA}.trainee-top,.record-person,.question-context,.summary-person{display:flex;align-items:center;gap:12px}.trainee-top img,.record-person img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:#eef4f5}.trainee-top strong,.record-person h2,.question-context strong,.summary-person strong{display:block;color:var(--deep)}.trainee-top span,.record-person p,.question-context span,.summary-person span{font-size:14px;color:var(--text2)}.unit-result{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:10px}.unit-result span{font-size:14px;color:var(--text2)}.unit-result b{font-size:14px;padding:5px 9px;border-radius:999px}.approved{background:#EAF9F4;color:var(--green-dark)}.not-approved{background:#FDECEC;color:var(--danger)}.trainee-card p{font-size:16px;line-height:1.45;color:var(--text2);margin:0}.card-action{display:flex;justify-content:space-between;color:var(--blue);font-weight:700}.record-layout{height:100%;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px}.pathway-chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:10px}.pathway-chain article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px}.pathway-chain article>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700}.pathway-chain article.complete>span{background:#EAF9F4;color:var(--green-dark)}.pathway-chain article.current>span{background:#EAF3F8;color:var(--blue)}.pathway-chain svg,.success-mark svg,.feedback-icon svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}.pathway-chain strong{display:block;color:var(--deep)}.pathway-chain small{font-size:14px;color:var(--text2)}.pathway-chain i{font-style:normal;color:var(--green-dark);font-size:24px}.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.record-grid article{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.record-grid span{display:block;font-size:14px;color:var(--text2);margin-bottom:8px}.record-grid strong{font-size:16px;line-height:1.4;color:var(--deep)}.approved-text{color:var(--green-dark)!important}.danger-text{color:var(--danger)!important}.question-layout{height:100%;display:grid;grid-template-rows:58px 1fr;gap:14px}.question-context{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 12px}.question-context img{width:42px;height:42px;border-radius:50%;object-fit:cover}.question-context button{margin-left:auto;border:0;background:transparent;color:var(--blue);font-weight:700;cursor:pointer}.question-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;overflow:auto}.question-card h2{max-width:900px}.option-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.option{min-height:64px;background:#fff;border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer}.option.selected{border-color:var(--blue);background:#F3F8FA}.radio{width:24px;height:24px;border:2px solid var(--line2);border-radius:50%;flex:0 0 auto}.option.selected .radio{border-color:var(--blue);box-shadow:inset 0 0 0 5px #fff;background:var(--blue)}.option strong{font-size:16px;line-height:1.4;color:var(--deep)}.overlay{position:absolute;inset:8px;background:rgba(0,35,67,.42);display:grid;place-items:center;z-index:10;border-radius:16px}.feedback-card{width:min(720px,calc(100% - 40px));background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px}.feedback-icon{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#EAF9F4;color:var(--green-dark);font-size:24px;font-weight:700}.feedback-card.error .feedback-icon{background:#FDECEC;color:var(--danger)}.feedback-card h2{font-size:24px;color:var(--blue);margin:0 0 6px}.feedback-card p{font-size:16px;line-height:1.5;color:var(--text2);margin:0}.summary-layout{height:100%;display:grid;grid-template-rows:auto 1fr}.summary-table{display:grid;gap:8px;overflow:auto}.summary-table article{display:grid;grid-template-columns:1.2fr 1.6fr .55fr 1.5fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px}.summary-person img{width:42px;height:42px;border-radius:50%;object-fit:cover}.summary-table article>div>span{display:block;font-size:14px;color:var(--text2);margin-bottom:4px}.summary-table article>div>strong{font-size:14px;color:var(--deep);line-height:1.35}.gate-label{color:var(--blue)!important}.completion-screen{display:grid;place-items:center;background:linear-gradient(180deg,#F9FCFC,#F2FBF8);padding:30px}.completion-card{width:min(760px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:42px 34px;text-align:center;box-shadow:0 4px 16px rgba(0,35,67,.08)}.success-mark{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#EAF9F4;color:var(--green-dark);margin:0 auto 18px}.completion-card h1{font-size:32px;color:var(--blue);margin:0 0 10px}.completion-card p{font-size:16px;line-height:1.5;color:var(--text2);margin:0}
@media(max-width:900px){.activity-content{padding:16px}.journey-flow{grid-template-columns:1fr}.journey-flow i{transform:rotate(90deg);justify-self:center}.trainee-grid{grid-template-columns:1fr 1fr}.record-grid{grid-template-columns:1fr}.pathway-chain{grid-template-columns:1fr}.pathway-chain i{transform:rotate(90deg);justify-self:center}.option-list{grid-template-columns:1fr}.summary-table article{grid-template-columns:1fr 1fr}.question-card{overflow:auto}}
@media(max-width:700px){html,body{height:auto;min-height:680px;overflow:auto}.activity-shell{height:auto;min-height:680px;padding:6px}.screen{height:auto;min-height:668px}.intro-screen{min-height:668px;padding:22px 18px;align-items:flex-end}.intro-screen:before{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.32) 42%,rgba(255,255,255,.98) 70%,#fff)}.intro-copy{width:100%}.intro-copy h1{font-size:28px}.activity-screen{min-height:668px;grid-template-rows:64px auto 64px}.activity-content{overflow:visible}.activity-header h1{font-size:22px}.trainee-grid{grid-template-columns:1fr}.feedback-card{grid-template-columns:1fr;text-align:center}.feedback-icon{margin:auto}.feedback-card .btn{width:100%}.summary-table article{grid-template-columns:1fr}.journey-flow article{min-height:auto}}
/* V04 — final credentialing review flow */
.simple-grid{grid-template-columns:repeat(2,1fr);align-content:start}.simple-card{min-height:150px;display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:16px;padding:20px}.simple-card>img{width:76px;height:76px;border-radius:50%;object-fit:cover;background:#eef4f5}.simple-card>div strong{display:block;font-size:20px;color:var(--deep);margin-bottom:4px}.simple-card>div span{display:block;font-size:14px;color:var(--text2);margin-bottom:12px}.simple-card>div em{display:inline-block;font-style:normal;font-size:14px;font-weight:700;color:var(--muted);padding:5px 10px;border-radius:999px;background:#F1F4F5}.simple-card.done>div em{color:var(--green-dark);background:#EAF9F4}.simple-card>b{font-size:28px;color:var(--blue)}
.bridge-focus{grid-template-rows:auto 1fr auto}.compact-flow article{min-height:145px}
.record-focus{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:16px}.large-person img{width:68px;height:68px}.record-statements{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:center}.record-statements article{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;grid-template-columns:38px 1fr;align-items:start;gap:14px;min-height:108px}.record-statements article>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#EAF3F8;color:var(--blue);font-weight:700}.record-statements p{font-size:16px;line-height:1.5;color:var(--deep);margin:3px 0 0}
.gate-screen{height:100%;display:grid;grid-template-rows:58px 1fr;gap:14px}.gate-question{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;overflow:auto}.gate-question h2{font-size:24px;color:var(--blue);margin:4px 0 16px}.gate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.gate-card{position:relative;min-height:148px;background:#fff;border:1.5px solid var(--line2);border-radius:14px;padding:16px 48px 16px 16px;text-align:left;cursor:pointer}.gate-card:hover{border-color:var(--blue)}.gate-card.selected{border-color:var(--blue);background:#F3F8FA}.gate-card .gate-number{display:block;font-size:14px;font-weight:700;color:var(--green-dark);margin-bottom:6px}.gate-card strong{display:block;font-size:18px;line-height:1.3;color:var(--deep);margin-bottom:6px}.gate-card p{font-size:14px;line-height:1.45;color:var(--text2);margin:0}.gate-card .radio{position:absolute;right:16px;top:18px}.gate-card.selected .radio{border-color:var(--blue);box-shadow:inset 0 0 0 5px #fff;background:var(--blue)}
.single-column{grid-template-columns:1fr}.justify-card{padding:20px 22px}.justify-card .option{min-height:70px}
.case-summary{height:100%;display:grid;grid-template-rows:auto auto 1fr;gap:18px}.result-pathway{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:8px}.result-pathway article{min-height:88px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;align-items:center;gap:10px}.result-pathway article>span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#F1F4F5;color:var(--muted);font-weight:700;flex:0 0 auto}.result-pathway article.achieved{border-color:#9ADBC8;background:#F7FCFA}.result-pathway article.achieved>span{background:#EAF9F4;color:var(--green-dark)}.result-pathway article.next{border-color:#8FB5CA;background:#F3F8FA}.result-pathway article.next>span{background:#EAF3F8;color:var(--blue)}.result-pathway svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}.result-pathway strong{display:block;font-size:14px;color:var(--deep)}.result-pathway small{display:block;font-size:12px;line-height:1.3;color:var(--text2);margin-top:3px}.result-pathway>i{font-style:normal;color:var(--green-dark);font-size:22px}.decision-summary{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:16px;padding:20px}.decision-summary span{display:block;font-size:14px;font-weight:700;color:var(--green-dark);margin-bottom:8px}.decision-summary p{font-size:18px;line-height:1.5;color:var(--deep);margin:0}.compact-summary article{grid-template-columns:1.1fr 1.4fr 2fr;padding:12px 14px}.compact-summary .summary-person img{width:48px;height:48px}
@media(max-width:900px){.record-statements{grid-template-columns:1fr 1fr}.gate-grid{grid-template-columns:1fr 1fr}.result-pathway{grid-template-columns:1fr}.result-pathway>i{transform:rotate(90deg);justify-self:center}.compact-summary article{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.simple-grid,.record-statements,.gate-grid{grid-template-columns:1fr}.simple-card{grid-template-columns:64px 1fr auto}.simple-card>img{width:64px;height:64px}.gate-card{min-height:auto}.compact-summary article{grid-template-columns:1fr}.result-pathway article{min-height:auto}}
/* V05 — UI/UX refinements from review notes */
.bridge-copy>p{max-width:1040px;margin-top:12px}
.bridge-note-inline{margin-top:18px;max-width:1120px}
.bridge-focus{grid-template-rows:auto 1fr}
.record-focus{grid-template-rows:auto auto 1fr}
.record-guidance{font-size:16px;line-height:1.5;color:var(--text2);margin:0;max-width:980px}
.visual-record{grid-template-columns:1fr;align-content:start;gap:12px}
.visual-record article{min-height:76px;grid-template-columns:46px 1fr;align-items:center;padding:16px 18px;background:linear-gradient(90deg,#fff,#FBFDFD)}
.visual-record .record-marker{width:38px;height:38px;background:#EAF3F8;border:1px solid #D7E6ED}
.gate-card{min-height:108px;display:flex;flex-direction:column;justify-content:center}
.gate-card strong{margin-bottom:0;padding-right:4px}
.gate-card p{display:none}
.simplified-summary{grid-template-rows:auto 1fr;align-content:start}
.simplified-summary .result-pathway{align-self:start;margin-top:10px}
.final-positions article{grid-template-columns:1.1fr 1.9fr}
@media(max-width:900px){.final-positions article{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.final-positions article{grid-template-columns:1fr}}
/* V06 — refinements from annotated review */
.bridge-redesign{grid-template-rows:auto 1fr;gap:24px;align-content:start}
.bridge-intro-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:24px;align-items:center}
.bridge-intro-copy h2{font-size:24px;line-height:1.18;color:var(--blue);margin:0 0 10px}
.bridge-intro-copy p{font-size:16px;line-height:1.5;color:var(--text2);margin:0;max-width:920px}
.bridge-task{background:#F1F7FA;border-left:5px solid var(--blue);border-radius:12px;padding:14px 16px}
.bridge-task span{display:block;font-size:14px;font-weight:700;color:var(--green-dark);margin-bottom:4px}
.bridge-task p{font-size:16px;line-height:1.5;color:var(--text);margin:0}
.bridge-redesign .journey-flow{align-self:center}
.bridge-redesign .journey-flow article{min-height:164px}

/* Match the established trainee dashboard proportions used in prior activities. */
.simple-card{min-height:176px;grid-template-columns:80px 1fr auto;padding:20px;gap:16px}
.simple-card>img{width:80px;height:80px}
.simple-card>div strong{font-size:20px}

/* Keep all four rationale options visible without an internal scrollbar. */
.justify-card{overflow:hidden;display:flex;flex-direction:column}
.justify-card h2{margin-bottom:0;max-width:1100px}
.justify-card .option-list{grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;align-content:start}
.justify-card .option{min-height:104px;padding:14px 16px}

/* More deliberate case-summary composition. */
.polished-summary{height:100%;display:grid;grid-template-rows:auto 1fr;gap:18px;align-content:start}
.summary-hero-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.summary-profile img{width:72px;height:72px}
.confirmed-gate{min-width:330px;border-left:4px solid var(--green-dark);background:#F3FBF8;border-radius:0 14px 14px 0;padding:13px 16px}
.confirmed-gate span{display:block;font-size:14px;color:var(--text2);margin-bottom:4px}
.confirmed-gate strong{display:block;font-size:24px;line-height:1.18;color:var(--green-dark);margin-bottom:3px}
.confirmed-gate small{display:block;font-size:16px;line-height:1.4;color:var(--deep)}
.pathway-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;align-self:start}
.pathway-panel-heading{margin-bottom:16px}
.pathway-panel-heading p{font-size:16px;line-height:1.5;color:var(--text2);margin:5px 0 0}
.pathway-panel .result-pathway article{min-height:106px;padding:14px}
.pathway-panel .result-pathway strong{font-size:16px}
.pathway-panel .result-pathway small{font-size:14px;line-height:1.35}

@media(max-width:900px){
  .bridge-intro-panel{grid-template-columns:1fr}
  .justify-card .option-list{grid-template-columns:1fr 1fr}
  .summary-hero-card{align-items:flex-start}
  .confirmed-gate{min-width:280px}
}
@media(max-width:700px){
  .bridge-intro-panel{padding:16px}
  .simple-card{min-height:128px;grid-template-columns:64px 1fr auto;padding:16px}
  .simple-card>img{width:64px;height:64px}
  .justify-card{overflow:visible}
  .justify-card .option-list{grid-template-columns:1fr}
  .justify-card .option{min-height:auto}
  .summary-hero-card{display:grid;grid-template-columns:1fr}
  .confirmed-gate{min-width:0;width:100%}
}

/* V07 — annotated UI/UX refinements */
/* Context → pathway → task: one clear reading sequence. */
.bridge-redesign{
  grid-template-rows:auto 1fr auto;
  gap:18px;
  align-content:stretch;
}
.bridge-intro-panel{
  display:block;
  padding:18px 24px;
}
.bridge-intro-copy{
  max-width:1080px;
}
.bridge-redesign .journey-flow{
  align-self:stretch;
}
.bridge-redesign .journey-flow article{
  min-height:0;
  height:100%;
}
.bridge-redesign .bridge-task{
  max-width:none;
  width:100%;
}

/* Keep dashboard proportions identical to the established 2 × 2 trainee pattern. */
.simple-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:176px;
  gap:16px;
}
.simple-card{
  min-height:176px;
  height:176px;
  grid-template-columns:80px minmax(0,1fr) 28px;
  padding:20px;
  gap:16px;
}
.simple-card>img{width:80px;height:80px}

/* Let the gate choices use the available question area instead of floating at the top. */
.gate-question{
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  align-content:stretch;
}
.gate-question h2{margin-bottom:16px}
.gate-grid{
  height:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px;
}
.gate-card{
  min-height:0;
  height:100%;
  padding:20px 64px 20px 20px;
  justify-content:center;
}
.gate-card .radio{
  right:20px;
  top:50%;
  transform:translateY(-50%);
}

@media(max-width:900px){
  .bridge-redesign{grid-template-rows:auto auto auto}
  .bridge-redesign .journey-flow article{height:auto;min-height:132px}
  .simple-grid{grid-auto-rows:164px}
  .simple-card{height:164px;min-height:164px}
}
@media(max-width:700px){
  .simple-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .simple-card{height:auto;min-height:128px}
  .gate-question{overflow:visible;display:block}
  .gate-grid{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .gate-card{height:auto;min-height:92px}
}

/* V08 — final annotated refinements and design-token audit */
/* Remove secondary green header labels; the screen title already provides sufficient context. */
.header-step{display:none!important}

/* Bridge screen: context, task, then the visual progression. */
.bridge-redesign{
  grid-template-rows:auto auto minmax(0,1fr);
  gap:16px;
  align-content:stretch;
}
.bridge-redesign .bridge-task{
  width:100%;
  max-width:none;
}
.bridge-redesign .journey-flow{
  min-height:0;
  align-self:stretch;
}
.bridge-redesign .journey-flow article{
  min-height:0;
  height:100%;
  padding:20px;
  align-items:center;
  text-align:center;
}
.bridge-redesign .journey-flow article span{
  margin:0 auto 12px;
}
.bridge-redesign .journey-flow article strong{
  font-size:var(--font-sub);
  line-height:1.18;
}
.bridge-redesign .journey-flow article small{
  font-size:var(--font-label);
  line-height:1.35;
}

/* Use approved type roles only. */
.gate-card strong{font-size:var(--font-sub);line-height:1.18}
.result-pathway small{font-size:var(--font-label);line-height:1.35}
.decision-summary p{font-size:var(--font-body)}

/* Rationale screen: let the four choices occupy the available question area. */
.justify-card{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  min-height:0;
  overflow:hidden;
}
.justify-card .option-list{
  height:100%;
  min-height:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:16px;
  align-content:stretch;
}
.justify-card .option{
  min-height:0;
  height:100%;
  padding:18px 20px;
}

/* Case summary: fill the content canvas without adding redundant copy. */
.polished-summary{
  grid-template-rows:auto minmax(0,1fr);
  gap:18px;
  align-content:stretch;
}
.pathway-panel{
  align-self:stretch;
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  min-height:0;
}
.pathway-panel .result-pathway{
  height:100%;
  min-height:0;
  align-items:stretch;
}
.pathway-panel .result-pathway article{
  min-height:0;
  height:100%;
  align-items:center;
}

@media(max-width:900px){
  .bridge-redesign{grid-template-rows:auto auto auto}
  .bridge-redesign .journey-flow article{height:auto;min-height:132px}
}
@media(max-width:700px){
  .justify-card{display:block;overflow:visible}
  .justify-card .option-list{height:auto;grid-template-columns:1fr;grid-template-rows:none}
  .justify-card .option{height:auto;min-height:72px}
  .pathway-panel{height:auto;display:block}
  .pathway-panel .result-pathway{height:auto}
  .pathway-panel .result-pathway article{height:auto;min-height:88px}
}

/* V09 — final spacing, typography, and progression-layout refinements */
/* Keep the bridge content in one deliberate reading sequence. */
.bridge-redesign{
  grid-template-rows:auto auto minmax(0,1fr);
  gap:16px;
}
.bridge-intro-panel{padding:18px 24px}
.bridge-intro-copy h2{font-size:var(--font-head);line-height:1.18}
.bridge-intro-copy p,
.bridge-task p{font-size:var(--font-body);line-height:1.5}
.bridge-task span{font-size:var(--font-label);line-height:1.35}
.bridge-redesign .journey-flow article strong{
  font-size:var(--font-sub);
  line-height:1.18;
}
.bridge-redesign .journey-flow article small{
  font-size:var(--font-label);
  line-height:1.35;
  max-width:250px;
}

/* The two question screens use one shared option geometry. */
.gate-question,
.justify-card{
  padding:18px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  min-height:0;
  overflow:hidden;
}
.gate-question h2,
.justify-card h2{
  font-size:var(--font-head);
  line-height:1.18;
  margin:4px 0 16px;
  max-width:none;
}
.gate-grid,
.justify-card .option-list{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:0;
  align-content:stretch;
}
.gate-card,
.justify-card .option{
  height:100%;
  min-height:0;
  border:1.5px solid var(--line2);
  border-radius:14px;
  padding:18px 58px 18px 18px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.gate-card{flex-direction:column;align-items:flex-start;justify-content:center}
.gate-card .gate-number{font-size:var(--font-label);line-height:1.35;margin-bottom:6px}
.gate-card strong,
.justify-card .option strong{
  font-size:var(--font-body);
  line-height:1.5;
  color:var(--deep);
}
.gate-card .radio{
  right:18px;
  top:50%;
  transform:translateY(-50%);
}
.justify-card .option{padding-right:18px}
.justify-card .option .radio{width:24px;height:24px}

/* Keep every text role on the approved design-system scale. */
.activity-header h1,
.screen-heading h2,
.record-person h2,
.question-card h2,
.gate-question h2,
.bridge-intro-copy h2{font-size:var(--font-head)}
.screen-heading p,
.record-guidance,
.record-statements p,
.question-context span,
.option strong,
.bridge-intro-copy p,
.bridge-task p,
.pathway-panel-heading p,
.confirmed-gate small{font-size:var(--font-body)}
.eyebrow,
.count-pill,
.question-context span,
.gate-card .gate-number,
.bridge-task span,
.result-pathway small{font-size:var(--font-label)}

/* Centre pathway arrows against the full height of their neighbouring cards. */
.pathway-panel .result-pathway>i{
  align-self:center;
  justify-self:center;
  display:grid;
  place-items:center;
  height:100%;
  line-height:1;
}

@media(max-width:700px){
  .gate-question,.justify-card{display:block;overflow:visible}
  .gate-grid,.justify-card .option-list{height:auto;grid-template-columns:1fr;grid-template-rows:none;margin-top:16px}
  .gate-card,.justify-card .option{height:auto;min-height:92px}
}

/* V10: direct transition from start page to trainee dashboard */
.dashboard-intro{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:20px 24px;
  margin-bottom:20px;
  background:#F5F9FA;
  border:1px solid #D4DEE0;
  border-radius:16px;
}
.dashboard-intro>div{max-width:980px}
.dashboard-intro p{
  margin:0 0 8px;
  color:#2F3B3E;
  font-size:16px;
  line-height:1.5;
  font-weight:400;
}
.dashboard-intro strong{
  display:block;
  color:#00416B;
  font-size:16px;
  line-height:1.5;
  font-weight:700;
}
.dashboard-intro .count-pill{flex:0 0 auto;margin-top:0}
@media(max-width:700px){
  .dashboard-intro{flex-direction:column;padding:16px;margin-bottom:16px}
}


/* V11 — dashboard intro alignment refinement */
.dashboard-intro{
  display:block;
  padding:16px 24px;
  margin-bottom:20px;
}
.dashboard-intro>div{max-width:none;width:100%}
.dashboard-intro p{max-width:none;width:100%;margin:0 0 8px}
.header-count{margin-left:auto;white-space:nowrap}
@media (min-width:1200px){
  .dashboard-intro p{white-space:nowrap}
}
@media (max-width:1199px){
  .dashboard-intro p{white-space:normal}
}
@media(max-width:700px){
  .header-count{padding:6px 10px}
}

/* V12 — small-screen learner experience refinements */
@media (max-width: 700px) {
  html, body {
    min-height: 100dvh;
  }

  .activity-shell,
  .screen,
  .activity-screen {
    height: auto;
    min-height: 100dvh;
  }

  .activity-screen {
    grid-template-rows: auto 1fr auto;
  }

  .activity-header,
  .action-rail {
    padding: 12px 16px;
  }

  .activity-header {
    min-height: 64px;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
  }

  .activity-header h1 {
    font-size: 22px;
    line-height: 1.2;
  }

  .activity-content {
    padding: 14px 16px 18px;
    overflow: visible;
  }

  .action-rail {
    gap: 10px;
    flex-wrap: wrap;
  }

  .action-rail .btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  .dashboard-intro {
    padding: 16px;
    margin-bottom: 14px;
  }

  .header-count {
    margin-left: 0;
    align-self: flex-start;
  }

  .simple-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
  }

  .simple-card {
    height: auto;
    min-height: 118px;
    grid-template-columns: 64px minmax(0, 1fr) 20px;
    gap: 14px;
    padding: 16px;
  }

  .simple-card > img {
    width: 64px;
    height: 64px;
  }

  .simple-card > div {
    min-width: 0;
  }

  .simple-card > div strong {
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .simple-card > div span,
  .simple-card > div em {
    font-size: 14px;
    line-height: 1.4;
  }

  .record-person.large-person,
  .summary-hero-card,
  .question-context {
    align-items: flex-start;
  }

  .record-guidance {
    font-size: 16px;
    line-height: 1.5;
  }

  .visual-record {
    gap: 10px;
  }

  .visual-record article {
    min-height: 72px;
    padding: 14px 16px;
  }

  .question-layout {
    grid-template-rows: auto auto;
    gap: 12px;
  }

  .question-context {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .question-context img {
    width: 48px;
    height: 48px;
  }

  .question-context div {
    min-width: 0;
  }

  .question-context strong {
    font-size: 18px;
    line-height: 1.25;
  }

  .question-context span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.4;
  }

  .question-context button {
    grid-column: 1 / -1;
    margin-left: 0;
    justify-self: flex-start;
  }

  .gate-question,
  .question-card,
  .justify-card,
  .pathway-panel,
  .bridge-intro-panel,
  .bridge-task,
  .summary-hero-card {
    padding: 16px;
  }

  .gate-question,
  .question-card,
  .justify-card {
    overflow: visible;
  }

  .gate-question h2,
  .question-card h2,
  .justify-card h2,
  .bridge-intro-copy h2,
  .record-person h2,
  .summary-profile h2 {
    font-size: 22px;
    line-height: 1.24;
    margin: 6px 0 14px;
  }

  .gate-grid,
  .justify-card .option-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
    gap: 12px;
  }

  .gate-card,
  .justify-card .option {
    height: auto;
    min-height: 88px;
    padding: 16px;
  }

  .gate-card {
    padding-right: 48px;
  }

  .gate-card .radio {
    right: 16px;
  }

  .justify-card .option strong,
  .gate-card strong {
    font-size: 16px;
    line-height: 1.45;
  }

  .result-pathway {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .result-pathway > i,
  .pathway-panel .result-pathway > i {
    transform: rotate(90deg);
    justify-self: center;
    align-self: center;
    height: auto;
  }

  .result-pathway article,
  .pathway-panel .result-pathway article {
    min-height: auto;
    height: auto;
    padding: 14px;
  }

  .confirmed-gate {
    width: 100%;
    min-width: 0;
    border-left-width: 4px;
  }

  .completion-card {
    padding: 32px 24px;
  }
}


/* ===== 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;
  }
}


/* ===== Activity 5: Gate cards — radio LEFT without collapsing text ===== */
.gate-card{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;

  /* Reserve a fixed area for the radio on the left. */
  padding:16px 20px 16px 76px!important;
  min-width:0!important;
}

.gate-card .radio{
  position:absolute!important;
  left:22px!important;
  right:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
}

.gate-card .gate-number,
.gate-card strong{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  text-align:left!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}

.gate-card .gate-number{
  margin:0 0 6px!important;
}

.gate-card strong{
  margin:0!important;
  padding:0!important;
  line-height:1.3!important;
}

/* Keep the same readable layout on narrower screens. */
@media(max-width:700px){
  .gate-card{
    padding:16px 18px 16px 68px!important;
  }
  .gate-card .radio{
    left:20px!important;
  }
}