:root{
  --scfhs-blue:#00416B;
  --scfhs-blue-deep:#002343;
  --scfhs-green:#00C08B;
  --scfhs-green-dark:#008661;
  --scfhs-green-soft:#EAF9F4;
  --scfhs-blue-soft:#EEF6FA;
  --scfhs-orange:#B96500;
  --scfhs-orange-soft:#FFF5E8;
  --scfhs-bg:#F7FAFA;
  --scfhs-surface:#FFFFFF;
  --scfhs-text:#2F3B3E;
  --scfhs-text-secondary:#586466;
  --scfhs-text-muted:#6C787A;
  --scfhs-line:#D4DEE0;
  --scfhs-line-strong:#B8C6C9;
  --scfhs-danger:#B03D32;
  --scfhs-danger-soft:#FCEFED;

  --font-family:"DIN Next LT Arabic","DIN Next","DINNextLTArabic","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-label:14px;
  --fs-body:16px;
  --fs-subtitle:20px;
  --fs-heading:24px;
  --fs-display:32px;
  --lh-label:1.35;
  --lh-body:1.5;
  --lh-heading:1.18;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --radius-card:16px;
  --radius-control:12px;
  --control-h:48px;
  --activity-h:680px;
  --shadow-low:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);
  --shadow-raised:0 6px 16px rgba(0,35,67,.10);
  --shadow-modal:0 18px 42px rgba(0,35,67,.20);
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:var(--activity-h);min-height:var(--activity-h);max-height:var(--activity-h);overflow:hidden;background:#fff;color:var(--scfhs-text);font-family:var(--font-family);font-size:var(--fs-body);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid rgba(0,192,139,.28);outline-offset:2px}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,h4,p{margin:0}

.activity-shell{width:100%;height:var(--activity-h);padding:8px;background:#fff;overflow:hidden;position:relative}
.screen{width:100%;height:100%;min-width:0;min-height:0;background:var(--scfhs-bg);border:1px solid var(--scfhs-line);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-low)}
.icon{width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 auto}
.icon.small{width:16px;height:16px}

.btn{height:var(--control-h);min-height:var(--control-h);border-radius:var(--radius-control);border:1px solid transparent;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-body);font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.btn .icon{width:18px;height:18px}
.btn.primary{background:var(--scfhs-green);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.btn.primary:hover{background:var(--scfhs-green-dark);box-shadow:var(--shadow-raised)}
.btn.secondary{background:#fff;color:var(--scfhs-blue);border-color:var(--scfhs-line-strong)}
.btn.secondary:hover{background:#F8FBFC}
.btn:disabled{background:#F5F7F7;color:#9AA7AA;border-color:#DCE4E6;cursor:not-allowed;box-shadow:none;opacity:1}

/* Locked Activity 1 start template */
.start-screen{position:relative;display:flex;align-items:center;padding:32px 48px;background:#fff;isolation:isolate}
.start-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}
.start-visual{position:absolute;inset:0;z-index:0;overflow:hidden;background:#fff}
.start-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.start-copy{position:relative;z-index:2;width:min(660px,54%);max-width:660px;padding-left:8px;text-align:left}
.start-copy h1{font-size:var(--fs-display);line-height:var(--lh-heading);font-weight:700;letter-spacing:-.01em;color:var(--scfhs-blue);margin-bottom:16px;max-width:650px}
.start-copy p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary);margin-bottom:24px;max-width:590px}
.start-copy .btn{min-width:196px}

/* Shared internal shell */
.activity-screen{display:grid;grid-template-rows:72px minmax(0,1fr) 72px;background:#fff}
.activity-header{padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fff;border-bottom:1px solid var(--scfhs-line)}
.activity-header h1{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress{display:flex;align-items:flex-start;gap:10px;flex:0 0 auto}
.progress-step{width:72px;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--scfhs-text-muted)}
.progress-marker{width:38px;height:38px;border-radius:999px;background:#EEF1F2;color:var(--scfhs-text-muted);display:grid;place-items:center;font-size:var(--fs-label);font-weight:700;border:1px solid transparent}
.progress-label{font-size:var(--fs-label);line-height:var(--lh-label);font-weight:500}
.progress-step.active{color:var(--scfhs-blue)}
.progress-step.active .progress-marker{background:var(--scfhs-green);color:#fff}
.progress-step.complete{color:var(--scfhs-green-dark)}
.progress-step.complete .progress-marker{background:var(--scfhs-green-soft);color:var(--scfhs-green-dark);border-color:var(--scfhs-green)}
.progress-line{width:32px;height:1px;background:var(--scfhs-line-strong);margin-top:19px}
.activity-content{min-height:0;overflow:hidden;background:var(--scfhs-bg);padding:16px 24px}
.action-rail{padding:12px 24px;background:#fff;border-top:1px solid var(--scfhs-line);display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Dashboard aligned to Activity 1 */
.dashboard-content{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.screen-heading h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:6px}
.screen-heading p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary)}
.trainee-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:16px;min-height:0}
.trainee-card{border:1px solid var(--scfhs-line);border-radius:var(--radius-card);background:#fff;padding:16px 20px;display:grid;grid-template-columns:92px minmax(0,1fr) 26px;align-items:center;gap:16px;text-align:left;min-height:0;box-shadow:0 1px 2px rgba(16,24,40,.035)}
.trainee-card.active{cursor:pointer;border-color:var(--scfhs-green);box-shadow:0 0 0 1px var(--scfhs-green),var(--shadow-low)}
.trainee-card.active:hover{box-shadow:0 0 0 1px var(--scfhs-green),var(--shadow-raised)}
.trainee-card.disabled{background:#F5F7F7;color:#9AA7AA}
.trainee-card img{width:92px;height:92px;border-radius:50%;object-fit:cover;border:5px solid #EEF5F8;background:#fff}
.trainee-card.disabled img{filter:grayscale(.45);opacity:.58}
.trainee-copy{display:flex;flex-direction:column;gap:8px;min-width:0}
.trainee-name{font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue)}
.trainee-card.disabled .trainee-name,.trainee-card.disabled .trainee-meta{color:#8C989A}
.trainee-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;font-size:var(--fs-body);line-height:1.35;color:var(--scfhs-text-secondary)}
.trainee-meta span{display:flex;align-items:center;gap:7px;min-width:0}
.trainee-meta .icon{width:18px;height:18px;color:var(--scfhs-blue)}
.trainee-card.disabled .trainee-meta .icon{color:#9AA7AA}
.trainee-chevron{width:22px;height:22px;color:var(--scfhs-blue)}
.trainee-card.disabled .trainee-chevron{color:var(--scfhs-line-strong)}

/* Realistic e-Portfolio record */
.record-content{height:100%;display:grid;grid-template-rows:minmax(0,1fr);min-height:0}
.record-file{height:100%;min-height:0;background:#fff;border:1px solid var(--scfhs-line);border-radius:var(--radius-card);overflow:hidden;display:grid;grid-template-rows:58px minmax(0,1fr);box-shadow:var(--shadow-low)}
.record-bar{padding:0 20px;background:var(--scfhs-blue-deep);color:#fff;display:flex;align-items:center;gap:12px}
.record-bar .mark{width:36px;height:36px;border-radius:10px;background:var(--scfhs-green);color:var(--scfhs-blue-deep);display:grid;place-items:center}
.record-bar strong{font-size:var(--fs-body);font-weight:700}
.record-scroll{min-height:0;overflow:hidden;padding:14px 18px 16px;display:grid;grid-template-rows:68px 42px minmax(0,1fr) 104px;gap:10px}
.profile-row{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:14px;border-bottom:1px solid var(--scfhs-line);padding-bottom:10px}
.profile-row img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #EEF5F8}
.profile-row h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:3px}
.profile-row p{font-size:var(--fs-body);line-height:1.35;color:var(--scfhs-text-secondary)}
.encounter-summary{display:flex;align-items:center;gap:12px;padding:0 2px}
.encounter-summary strong{font-size:var(--fs-body);color:var(--scfhs-blue)}
.encounter-summary span{font-size:var(--fs-body);color:var(--scfhs-text)}
.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}
.evidence-card{border:1px solid var(--scfhs-line);border-radius:12px;padding:14px 16px;min-height:0;background:#fff}
.evidence-card.observed{background:var(--scfhs-green-soft);border-color:#B8E4D6}
.evidence-card.missing{background:var(--scfhs-orange-soft);border-color:#F0D0A3}
.evidence-card h3{font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.evidence-card.observed h3{color:var(--scfhs-green-dark)}
.evidence-card.missing h3{color:var(--scfhs-orange)}
.evidence-card ul{margin:0;padding-left:22px;font-size:var(--fs-body);line-height:1.42;color:var(--scfhs-text)}
.comment-record{border-top:1px solid var(--scfhs-line);padding-top:10px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px;align-items:start}
.comment-record .label h3{font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:3px}
.comment-record .label p{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--scfhs-text-secondary)}
.comment-box{border:1px solid var(--scfhs-line-strong);border-radius:12px;background:#fff;padding:14px 18px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text)}

/* Compose */
.compose-content{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px;min-height:0}
.compose-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.compose-heading h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:5px}
.compose-heading p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary)}
.compose-workspace{min-height:0;background:#fff;border:1px solid var(--scfhs-line);border-radius:var(--radius-card);padding:14px 16px;display:grid;grid-template-rows:132px auto minmax(0,1fr);gap:10px;box-shadow:var(--shadow-low)}
.narrative-editor{border:1.5px solid var(--scfhs-line-strong);border-radius:12px;background:#fff;padding:14px 16px;display:flex;align-items:center;min-height:0}
.narrative-flow{width:100%;display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:8px 10px;font-size:var(--fs-subtitle);line-height:1.45;color:var(--scfhs-blue-deep);font-weight:700}
.fixed-phrase{white-space:nowrap}
.narrative-slot{min-height:50px;border-radius:12px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;vertical-align:middle;font-size:var(--fs-body);line-height:1.35;font-weight:400;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s}
.narrative-slot.empty{min-width:260px;border:1.5px dashed #6D9ED2;background:#F8FBFD;color:var(--scfhs-blue);cursor:pointer}
.narrative-slot.empty.ready{border-color:var(--scfhs-blue);background:var(--scfhs-blue-soft)}
.narrative-slot.empty.drag-over{border-color:var(--scfhs-green);background:var(--scfhs-green-soft);box-shadow:0 0 0 3px rgba(0,192,139,.14)}
.narrative-slot.filled{max-width:460px;border:1.5px solid #6D9ED2;background:var(--scfhs-blue-soft);color:var(--scfhs-text)}
.remove-statement{width:30px;height:30px;flex:0 0 30px;border:0;border-radius:8px;background:#fff;color:var(--scfhs-blue);display:grid;place-items:center;cursor:pointer}
.remove-statement .icon{width:16px;height:16px}
.bank-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.bank-heading h3{font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:2px}
.bank-heading p,.selection-status{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--scfhs-text-secondary)}
.selection-status{font-weight:500;color:var(--scfhs-blue)}
.statement-grid{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
.statement-card{min-height:0;border:1.5px solid var(--scfhs-line);border-radius:12px;background:#fff;padding:10px 12px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;text-align:left;color:var(--scfhs-text);font-size:var(--fs-body);line-height:var(--lh-body);cursor:grab;transition:border-color .15s,background .15s,box-shadow .15s}
.statement-card:hover{border-color:#83AFC9;box-shadow:0 2px 8px rgba(0,65,107,.08)}
.statement-card.selected{border-color:var(--scfhs-blue);background:var(--scfhs-blue-soft);box-shadow:0 0 0 2px rgba(0,65,107,.10)}
.statement-card.used{background:#F4F6F6;color:#879294;border-color:#DDE4E5;cursor:not-allowed}
.statement-card.dragging{opacity:.55}
.statement-handle{width:24px;height:24px;color:var(--scfhs-blue);display:grid;place-items:center}
.statement-card.used .statement-handle{color:#879294}

/* Review */
.review-content{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.review-card{min-height:0;background:#fff;border:1px solid var(--scfhs-line);border-radius:var(--radius-card);padding:16px 20px;display:grid;grid-template-rows:72px minmax(0,1fr) 82px;gap:12px;box-shadow:var(--shadow-low)}
.review-profile{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;border-bottom:1px solid var(--scfhs-line);padding-bottom:12px}
.review-profile img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #EEF5F8}
.review-profile h3{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:3px}
.review-profile p{font-size:var(--fs-body);line-height:1.35;color:var(--scfhs-text-secondary)}
.final-comment{border:1px solid #A9DACA;border-radius:12px;background:var(--scfhs-green-soft);padding:18px 20px;font-size:var(--fs-body);line-height:1.55;color:var(--scfhs-text);display:flex;align-items:center}
.validation-summary{border:1px solid var(--scfhs-line);border-radius:12px;background:#fff;padding:12px 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.validation-summary span{display:flex;align-items:center;gap:8px;color:var(--scfhs-text-secondary);font-size:var(--fs-body);line-height:1.35}
.validation-summary .icon{width:24px;height:24px;color:var(--scfhs-green-dark)}

/* Informational guidance + feedback overlays */
.overlay{position:absolute;inset:8px;z-index:50;border-radius:var(--radius-card);background:rgba(0,35,67,.38);display:grid;place-items:center;padding:24px}
.guidance-card{width:min(620px,100%);background:#fff;border:1px solid var(--scfhs-line);border-radius:16px;padding:24px;box-shadow:var(--shadow-modal);display:grid;grid-template-rows:auto auto auto;gap:16px;text-align:left}
.guidance-head{display:flex;align-items:flex-start;gap:14px}
.guidance-icon{width:56px;height:56px;border-radius:50%;background:var(--scfhs-green-soft);color:var(--scfhs-green-dark);display:grid;place-items:center;flex:0 0 56px}
.guidance-icon .icon{width:28px;height:28px}
.guidance-head h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:6px}
.guidance-head p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary)}
.guidance-criteria{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.guidance-criteria div{border:1px solid var(--scfhs-line);border-radius:12px;background:#FAFCFC;padding:12px}
.guidance-criteria strong{display:block;font-size:var(--fs-body);line-height:1.35;color:var(--scfhs-blue);margin-bottom:3px}
.guidance-criteria span{display:block;font-size:var(--fs-label);line-height:var(--lh-label);color:var(--scfhs-text-secondary)}
.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;border-top:1px solid var(--scfhs-line);padding-top:16px}
.feedback-card{width:min(900px,100%);background:#fff;border:1px solid var(--scfhs-line);border-radius:16px;padding:24px;box-shadow:var(--shadow-modal);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}
.feedback-card.error .feedback-icon{background:var(--scfhs-danger-soft);color:var(--scfhs-danger)}
.feedback-card.success .feedback-icon{background:var(--scfhs-green-soft);color:var(--scfhs-green-dark)}
.feedback-icon .icon{width:28px;height:28px}
.feedback-copy h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:6px}
.feedback-copy p,.feedback-copy li{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary)}
.feedback-copy ul{margin:8px 0 0;padding-left:22px}
.evidence-modal{width:min(780px,100%);max-height:92%;overflow:auto;background:#fff;border:1px solid var(--scfhs-line);border-radius:16px;padding:24px;box-shadow:var(--shadow-modal)}
.evidence-modal h2{font-size:var(--fs-heading);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:16px}
.evidence-modal .evidence-grid{margin-bottom:16px}

/* Locked Activity 1 completion template */
.complete-screen{display:grid;place-items:center;padding:30px;background:linear-gradient(180deg,#F9FCFC,#F2FBF8)}
.complete-card{width:min(760px,100%);background:#fff;border:1px solid var(--scfhs-line);border-radius:24px;padding:42px 34px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:var(--shadow-low)}
.complete-mark{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--scfhs-green-soft);color:var(--scfhs-green-dark);margin-bottom:16px}
.complete-mark .icon{width:32px;height:32px}
.complete-card h1{font-size:var(--fs-display);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);margin-bottom:10px}
.complete-card p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary);max-width:560px}

@media (max-width:1200px){
  .activity-header{padding:0 18px}.activity-content{padding:14px 18px}.action-rail{padding:12px 18px}
  .trainee-card{padding:14px 16px;grid-template-columns:78px minmax(0,1fr) 22px;gap:12px}.trainee-card img{width:78px;height:78px}
  .trainee-meta{gap:5px 12px}
  .record-scroll{padding:12px 14px 14px}
  .compose-workspace{padding:12px 14px}
  .statement-card{padding:9px 10px}
}

@media (max-width:900px){
  .activity-header h1{max-width:48%}
  .trainee-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}
  .trainee-card{grid-template-columns:64px minmax(0,1fr) 22px;padding:8px 12px;gap:10px}.trainee-card img{width:64px;height:64px;border-width:3px}.trainee-copy{gap:4px}.trainee-meta{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.trainee-name{font-size:var(--fs-subtitle)}
  .record-scroll{overflow:auto;grid-template-rows:auto auto auto auto}.evidence-grid{grid-template-columns:1fr}.comment-record{grid-template-columns:1fr}
  .compose-content,.review-content{overflow:auto;padding-bottom:4px}
  .compose-workspace{grid-template-rows:auto auto auto}.statement-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}.statement-card{min-height:96px}
  .narrative-flow{align-items:flex-start}.narrative-slot.filled{max-width:100%}
}

@media (max-width:700px){
  :root{--fs-subtitle:18px;--fs-heading:22px;--fs-display:28px}
  .activity-shell{padding:4px}
  .screen{border-radius:12px}
  .activity-screen{grid-template-rows:64px minmax(0,1fr) 68px}
  .activity-header{padding:0 12px;gap:10px}.activity-header h1{font-size:var(--fs-subtitle);max-width:58%}
  .progress{gap:4px}.progress-step{width:46px}.progress-marker{width:32px;height:32px}.progress-label{display:none}.progress-line{width:18px;margin-top:16px}
  .activity-content{padding:10px 12px;overflow:auto}.action-rail{padding:10px 12px}
  .btn{min-height:44px;height:44px;padding:0 14px}
  .start-screen{padding:24px}.start-screen::before{background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.95) 55%,rgba(255,255,255,.18) 100%)}.start-copy{width:100%;max-width:100%;padding:0;align-self:flex-start;margin-top:24px}.start-copy h1{max-width:100%}.start-copy p{max-width:100%}
  .dashboard-content{grid-template-rows:auto auto}.trainee-grid{grid-template-rows:none}.trainee-card{min-height:96px}.trainee-meta{grid-template-columns:1fr 1fr}
  .record-file{height:auto;min-height:100%}.record-scroll{overflow:visible}
  .compose-content{height:auto;overflow:visible}.compose-heading{align-items:stretch}.compose-heading .btn{flex:0 0 auto}.compose-workspace{height:auto}.narrative-editor{align-items:flex-start}.narrative-flow{display:grid;grid-template-columns:1fr;gap:8px;font-size:var(--fs-subtitle)}.fixed-phrase{white-space:normal}.narrative-slot.empty,.narrative-slot.filled{width:100%;min-width:0;max-width:none}
  .statement-grid{grid-template-columns:1fr}.statement-card{min-height:88px}
  .review-content{height:auto;overflow:visible}.review-card{grid-template-rows:auto auto auto}.validation-summary{grid-template-columns:1fr}
  .guidance-criteria{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%}.modal-actions{display:grid;grid-template-columns:1fr 1fr}.modal-actions .btn{width:100%}
}

@media (max-width:480px){
  .activity-header h1{max-width:52%}
  .trainee-card{grid-template-columns:58px minmax(0,1fr) 18px}.trainee-card img{width:58px;height:58px}.trainee-meta{grid-template-columns:1fr}.trainee-meta span:nth-child(n+3){display:none}
  .compose-heading{display:grid;grid-template-columns:1fr}.compose-heading .btn{width:100%}
  .modal-actions{grid-template-columns:1fr}.action-rail .btn{max-width:48%}
}

/* V28 — staged audit and revision flow */
.record-scroll{grid-template-rows:68px 42px minmax(0,1fr) auto}
.comment-record{display:block;border-top:1px solid var(--scfhs-line);padding-top:10px;min-width:0}
.comment-heading{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;min-width:0}
.comment-heading h3{font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue);white-space:nowrap}
.comment-heading p{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--scfhs-text-secondary);white-space:nowrap}
.comment-entry{width:100%;min-height:68px;border:1.5px solid var(--scfhs-line-strong);border-radius:12px;background:#fff;padding:12px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;text-align:left;color:var(--scfhs-text);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.comment-entry:hover{border-color:#83AFC9;background:#FBFDFE;box-shadow:0 2px 8px rgba(0,65,107,.08)}
.comment-quote{font-size:var(--fs-body);line-height:var(--lh-body);min-width:0}
.comment-review-cue{display:inline-flex;align-items:center;gap:7px;color:var(--scfhs-blue);font-size:var(--fs-label);font-weight:500;white-space:nowrap}
.comment-review-cue .icon{width:18px;height:18px}

.identify-mode{grid-template-rows:auto minmax(0,1fr)}
.audit-workspace{min-height:0;background:#fff;border:1px solid var(--scfhs-line);border-radius:var(--radius-card);padding:16px;box-shadow:var(--shadow-low);display:flex;align-items:center;justify-content:center}
.audit-card{width:min(1180px,100%);border:1px solid var(--scfhs-line-strong);border-radius:12px;background:#fff;padding:16px 20px}
.audit-card-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--scfhs-line);padding-bottom:10px;margin-bottom:14px}
.audit-card-heading h3{font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700;color:var(--scfhs-blue)}
.audit-card-heading span,.audit-helper{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--scfhs-text-secondary)}
.audit-comment{font-size:var(--fs-subtitle);line-height:1.75;color:var(--scfhs-text);padding:8px 0 10px;display:flex;align-items:center;align-content:center;flex-wrap:wrap;gap:7px 5px}
.audit-segment{border:1.5px solid transparent;border-radius:9px;background:transparent;padding:4px 7px;color:var(--scfhs-text);font-size:var(--fs-subtitle);line-height:1.45;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.audit-segment:hover{border-color:var(--scfhs-line-strong);background:#F8FAFA}
.audit-segment.selected{border-color:#6D9ED2;background:var(--scfhs-blue-soft);box-shadow:0 0 0 2px rgba(0,65,107,.08)}
.audit-punctuation{font-size:var(--fs-subtitle);font-weight:700;color:var(--scfhs-text)}
.audit-helper{border-top:1px solid var(--scfhs-line);padding-top:10px;margin-top:4px}

.revise-mode .compose-workspace{grid-template-rows:148px auto minmax(0,1fr);gap:10px}
.revise-mode .narrative-editor{padding:12px 14px;align-items:center}
.revise-mode .narrative-flow{gap:7px 8px;font-size:var(--fs-subtitle);line-height:1.5;align-items:center}
.revise-mode .narrative-slot{min-height:44px;padding:6px 10px;border-radius:10px;gap:6px;line-height:1.4}
.revise-mode .narrative-slot.empty{min-width:210px}
.revise-mode .narrative-slot.filled{max-width:390px;width:auto}
.revise-mode .remove-statement{width:28px;height:28px;flex-basis:28px}
.revise-mode .statement-grid{gap:10px}
.revise-mode .statement-card{padding:9px 11px;align-content:center}

@media (max-width:1200px){
  .comment-heading{gap:8px}
  .revise-mode .narrative-slot.filled{max-width:340px}
  .revise-mode .narrative-slot.empty{min-width:185px}
  .audit-card{padding:14px 16px}
}

@media (max-width:900px){
  .record-scroll{grid-template-rows:auto auto auto auto;overflow:auto}
  .comment-heading{display:block}.comment-heading p{margin-top:3px;white-space:normal}
  .comment-entry{grid-template-columns:1fr}.comment-review-cue{justify-self:start}
  .audit-workspace{align-items:flex-start;overflow:auto}
  .audit-card-heading{display:block}.audit-card-heading span{display:block;margin-top:4px}
  .audit-comment{font-size:var(--fs-body)}
  .audit-segment,.audit-punctuation{font-size:var(--fs-body)}
  .revise-mode .compose-workspace{grid-template-rows:auto auto auto}
  .revise-mode .narrative-slot.filled{max-width:100%}
}

@media (max-width:700px){
  .comment-heading h3{font-size:var(--fs-subtitle);white-space:normal}
  .comment-entry{padding:12px}
  .audit-workspace{padding:12px}
  .audit-card{padding:12px}
  .audit-comment{display:block;line-height:1.9}
  .audit-segment{display:inline;margin:2px 1px;padding:3px 5px}
  .revise-mode .narrative-flow{display:block;line-height:1.8}
  .revise-mode .fixed-phrase{display:inline;white-space:normal}
  .revise-mode .narrative-slot.empty,.revise-mode .narrative-slot.filled{display:flex;width:100%;max-width:none;margin:7px 0}
}

/* V28 layout correction: keep the revised comment readable at all desktop widths */
.revise-mode .narrative-flow{display:grid;grid-template-columns:1fr;gap:7px;width:100%}
.narrative-sentence{display:flex;align-items:center;flex-wrap:wrap;gap:7px 8px;min-width:0}
.revise-mode .narrative-slot.filled{max-width:min(720px,78%)}
.revise-mode .compose-workspace{grid-template-rows:minmax(148px,auto) auto minmax(0,1fr)}
@media (max-width:1200px){.revise-mode .narrative-slot.filled{max-width:72%}}
@media (max-width:900px){
  .revise-mode .compose-workspace{grid-template-rows:auto auto auto}
  .revise-mode .narrative-slot.filled{max-width:100%}
}
@media (max-width:700px){
  .narrative-sentence{display:block}
  .revise-mode .narrative-slot.empty,.revise-mode .narrative-slot.filled{display:flex;width:100%;max-width:none;margin:7px 0}
}

/* V28 final visual refinements */
.audit-workspace{padding:0;border:0;background:transparent;box-shadow:none;align-items:stretch}
.audit-card{width:100%;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;padding:16px 20px}
.audit-card-heading{width:100%;align-self:start}
.audit-comment{align-self:center;padding:12px 8px}
.audit-helper{width:100%;align-self:end}
.statement-card.used{align-content:center;justify-content:start}
.statement-card.used .statement-handle{color:var(--scfhs-green-dark)}
.used-label{font-weight:500;color:var(--scfhs-text-secondary)}
.revise-mode .statement-grid{grid-template-rows:repeat(2,minmax(54px,1fr))}

/* V28 responsive containment and approved body typography */
.activity-screen,.activity-header,.activity-content,.action-rail{min-width:0;width:100%}
.activity-header h1{min-width:0;flex:1 1 auto}
.progress{min-width:0}
.audit-comment,.audit-segment,.audit-punctuation{font-size:var(--fs-body)}

@media (max-width:820px){
  .activity-header{gap:10px}
  .activity-header h1{max-width:none}
  .progress{gap:4px;flex:0 0 auto}
  .progress-step{width:46px}
  .progress-marker{width:32px;height:32px}
  .progress-label{display:none}
  .progress-line{width:18px;margin-top:16px}
}

/* V28 progressive disclosure for the statement bank on smaller LMS canvases */
.bank-tools{display:flex;align-items:flex-end;gap:12px}
.bank-pager{display:none;align-items:center;gap:8px}
.bank-pager button{width:44px;height:44px;border:1px solid var(--scfhs-line-strong);border-radius:12px;background:#fff;color:var(--scfhs-blue);display:grid;place-items:center;cursor:pointer}
.bank-pager button:disabled{color:#9AA7AA;background:#F5F7F7;border-color:#DCE4E6;cursor:not-allowed}
.bank-pager .icon{width:18px;height:18px}
.bank-pager span{font-size:var(--fs-label);line-height:var(--lh-label);color:var(--scfhs-text-secondary);font-weight:500;white-space:nowrap}

@media (max-width:1200px){
  .selection-status{display:none}
  .bank-pager{display:flex}
  .statement-grid .statement-card{display:none}
  .statement-grid .statement-card.current-bank-page{display:grid}
  .revise-mode .statement-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(96px,1fr)}
}
@media (max-width:900px){
  .bank-heading{align-items:center}
  .bank-tools{align-items:center}
  .revise-mode .statement-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(96px,auto)}
}
@media (max-width:700px){
  .bank-heading{align-items:flex-start}
  .bank-tools{width:100%;justify-content:flex-end}
  .revise-mode .statement-grid{grid-template-columns:1fr;grid-auto-rows:minmax(88px,auto)}
}

/* Keep one statement-bank row on tablet landscape; stack only below 700px */
@media (min-width:701px) and (max-width:900px){
  .revise-mode .statement-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(132px,auto);grid-auto-rows:auto}
}

/* V29 — review annotations: direct comment affordance, compact audit, continuous revision */
.rail-spacer{width:1px;height:1px;display:block}

/* Record: the submitted comment itself is the only review control */
.comment-record{padding-top:10px}
.comment-heading{margin-bottom:8px}
.comment-heading h3{white-space:nowrap}
.comment-heading p{white-space:normal}
.comment-entry{position:relative;display:block;width:100%;min-height:68px;padding:13px 18px;text-align:left;overflow:hidden}
.comment-entry .comment-quote{display:block;width:100%;font-size:var(--fs-body);line-height:var(--lh-body)}
.comment-entry.attention{border-color:#83AFC9;animation:commentAttention 2.4s ease-in-out infinite}
.comment-entry.attention::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,192,139,.16)}
@keyframes commentAttention{
  0%,100%{box-shadow:0 0 0 0 rgba(0,192,139,0),0 1px 2px rgba(16,24,40,.04)}
  50%{box-shadow:0 0 0 5px rgba(0,192,139,.12),0 5px 14px rgba(0,65,107,.09)}
}
@media (prefers-reduced-motion:reduce){
  .comment-entry.attention{animation:none;box-shadow:0 0 0 4px rgba(0,192,139,.10)}
}

/* Guidance: establish the situation before explaining the quality criteria */
.guidance-card{width:min(700px,100%);grid-template-rows:auto auto auto auto;gap:14px}
.guidance-explanation{border-left:3px solid var(--scfhs-green);padding-left:14px}
.guidance-explanation strong{display:block;font-size:var(--fs-subtitle);line-height:var(--lh-heading);color:var(--scfhs-blue);margin-bottom:5px}
.guidance-explanation p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--scfhs-text-secondary)}

/* Audit: content-driven card with natural sentence spacing */
.identify-mode{grid-template-rows:auto auto;align-content:start}
.identify-mode .audit-workspace{align-items:flex-start;overflow:visible}
.identify-mode .audit-card{height:auto;display:block;padding:16px 20px}
.identify-mode .audit-card-heading{margin-bottom:12px}
.audit-text-area{border:1px solid var(--scfhs-line);border-radius:12px;background:#FBFCFC;padding:18px 20px}
.identify-mode .audit-comment{display:block;width:100%;padding:0;margin:0;font-size:var(--fs-body);line-height:2.05;color:var(--scfhs-text);text-align:left}
.identify-mode .audit-segment{display:inline-block;margin:2px 1px;padding:4px 7px;font-size:var(--fs-body);line-height:1.45;vertical-align:middle}
.identify-mode .audit-punctuation{display:inline-block;margin-right:2px;font-size:var(--fs-body);vertical-align:middle}
.identify-mode .audit-helper{margin-top:12px}

/* Revision: two clauses share the first row; the next-step clause spans the width */
.revise-mode .compose-workspace{grid-template-rows:minmax(150px,auto) auto minmax(0,1fr);gap:12px}
.revise-mode .narrative-editor{padding:14px 16px;align-items:stretch}
.revise-mode .narrative-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;width:100%;align-items:start;font-size:var(--fs-subtitle);line-height:1.45}
.revise-mode .narrative-sentence{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;padding:2px 0}
.revise-mode .sentence-next{grid-column:1/-1}
.revise-mode .fixed-phrase{flex:0 0 auto;white-space:nowrap;color:var(--scfhs-blue-deep);font-size:var(--fs-subtitle);line-height:var(--lh-heading);font-weight:700}
.revise-mode .sentence-period{flex:0 0 auto;color:var(--scfhs-blue-deep);font-weight:700}
.revise-mode .narrative-slot{flex:1 1 260px;min-width:0;max-width:none!important;width:auto;min-height:52px;height:auto;padding:8px 10px;justify-content:flex-start;text-align:left;overflow:hidden}
.revise-mode .narrative-slot.empty{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0;border:1.5px dashed #D88A1D;background:var(--scfhs-orange-soft);color:var(--scfhs-text)}
.revise-mode .narrative-slot.empty.ready{border-color:var(--scfhs-blue);background:var(--scfhs-blue-soft)}
.slot-label{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 9px;border-radius:999px;background:#fff;color:var(--scfhs-orange);border:1px solid #F0D0A3;font-size:var(--fs-label);line-height:1;font-weight:700;white-space:nowrap}
.slot-original{min-width:0;font-size:var(--fs-body);line-height:1.4;color:var(--scfhs-text-secondary);overflow-wrap:anywhere}
.revise-mode .narrative-slot.filled{display:flex;align-items:center;background:var(--scfhs-blue-soft);border-color:#6D9ED2}
.slot-text{min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.revise-mode .remove-statement{margin-left:auto}

/* Statement cards retain their text after use and grow with content */
.revise-mode .statement-grid{grid-template-rows:none;grid-auto-rows:minmax(74px,auto);align-content:stretch}
.revise-mode .statement-card{min-height:74px;height:auto;grid-template-columns:24px minmax(0,1fr) auto;align-items:start;align-content:start;padding:10px 12px;overflow:visible}
.statement-text{min-width:0;overflow-wrap:anywhere}
.statement-card.used{opacity:.78}
.statement-card.used .statement-text{color:var(--scfhs-text-secondary)}
.used-label{align-self:start;justify-self:end;display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border-radius:999px;background:var(--scfhs-green-soft);color:var(--scfhs-green-dark);font-size:var(--fs-label);line-height:1;font-weight:700;white-space:nowrap}

@media (max-width:1200px){
  .revise-mode .narrative-flow{grid-template-columns:1fr}
  .revise-mode .sentence-next{grid-column:auto}
  .revise-mode .statement-grid{grid-template-rows:minmax(104px,auto)}
}
@media (max-width:900px){
  .guidance-card{width:min(640px,100%)}
  .identify-mode .audit-card{padding:14px 16px}
  .audit-text-area{padding:16px}
  .revise-mode .narrative-slot{flex-basis:100%;width:100%}
  .revise-mode .fixed-phrase{white-space:normal}
}
@media (max-width:700px){
  .comment-heading h3{white-space:normal}
  .guidance-explanation{padding-left:12px}
  .identify-mode .audit-comment{line-height:1.9}
  .revise-mode .narrative-flow{display:block}
  .revise-mode .narrative-sentence{display:block;margin-bottom:12px}
  .revise-mode .narrative-slot{display:flex!important;width:100%;margin:7px 0}
  .revise-mode .narrative-slot.empty{grid-template-columns:1fr}
  .slot-label{justify-self:start;width:max-content}
  .used-label{grid-column:2;justify-self:start;margin-top:4px}
}

/* V29 containment correction: reserve enough height for two complete statement rows */
.revise-mode .compose-workspace{grid-template-rows:minmax(124px,auto) auto minmax(0,1fr)}
.revise-mode .narrative-editor{padding:10px 14px}
.revise-mode .narrative-flow{gap:8px 14px}
.revise-mode .narrative-sentence{gap:6px 8px;padding:0}
.revise-mode .narrative-slot{min-height:44px;padding:6px 10px}

/* V29 responsive statement pagination: two readable cards per page, one on mobile */
.statement-card.used{grid-template-columns:24px minmax(0,1fr);align-items:center}
.statement-card.used .used-label{justify-self:start;margin:0}
@media (max-width:1200px){
  .revise-mode .statement-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(104px,auto);grid-auto-rows:auto}
}
@media (max-width:700px){
  .revise-mode .statement-grid{grid-template-columns:1fr;grid-template-rows:minmax(96px,auto)}
}
@media (min-width:701px) and (max-width:1200px){
  .revise-mode .statement-grid{grid-template-rows:minmax(112px,auto)}
}
@media (max-width:820px){
  .revise-mode .statement-grid{grid-template-columns:1fr;grid-template-rows:minmax(96px,auto)}
}

/* V30 final polish: natural inline comment flow and content-safe statement cards */
.identify-mode .audit-text-area{
  padding:18px 20px;
}
.identify-mode .audit-comment{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  font-size:var(--fs-body);
  line-height:2;
  letter-spacing:0;
  word-spacing:0;
  text-align:left;
}
.identify-mode .audit-static,
.identify-mode .audit-segment{
  display:inline;
  vertical-align:baseline;
  margin:0;
  font-size:var(--fs-body);
  line-height:inherit;
  white-space:normal;
}
.identify-mode .audit-static{
  color:var(--scfhs-text);
}
.identify-mode .audit-segment{
  appearance:none;
  -webkit-appearance:none;
  border:1.5px solid transparent;
  border-radius:8px;
  background:transparent;
  padding:3px 4px;
  color:var(--scfhs-text);
  font-family:inherit;
  cursor:pointer;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.identify-mode .audit-segment:hover{
  border-color:var(--scfhs-line-strong);
  background:#F8FAFA;
}
.identify-mode .audit-segment.selected{
  border-color:#6D9ED2;
  background:var(--scfhs-blue-soft);
  box-shadow:0 0 0 2px rgba(0,65,107,.08);
}

/* The revised comment behaves like one editable paragraph, not a row of boxes. */
.revise-mode .compose-workspace{
  grid-template-rows:minmax(116px,auto) auto minmax(0,1fr);
  gap:10px;
}
.revise-mode .narrative-editor{
  padding:12px 16px;
  align-items:center;
  overflow:visible;
}
.revise-mode .narrative-flow{
  display:block;
  width:100%;
  margin:0;
  color:var(--scfhs-blue-deep);
  font-size:var(--fs-subtitle);
  line-height:1.9;
  font-weight:700;
  text-align:left;
}
.revise-mode .fixed-phrase{
  display:inline;
  white-space:normal;
  font-size:var(--fs-subtitle);
  line-height:inherit;
  font-weight:700;
  color:var(--scfhs-blue-deep);
}
.revise-mode .narrative-unit{
  display:inline-block;
  max-width:100%;
  vertical-align:middle;
  white-space:nowrap;
  margin:2px 4px 2px 3px;
}
.revise-mode .narrative-slot{
  display:inline-flex!important;
  width:auto!important;
  min-width:0!important;
  max-width:min(760px,calc(100vw - 180px))!important;
  min-height:42px;
  height:auto;
  margin:0;
  padding:6px 10px;
  vertical-align:middle;
  white-space:normal;
  line-height:1.45;
  overflow:visible;
}
.revise-mode .narrative-slot.empty{
  min-width:280px!important;
  grid-template-columns:auto minmax(0,1fr);
}
.revise-mode .narrative-slot.filled{
  align-items:flex-start;
}
.revise-mode .slot-text,
.revise-mode .slot-original{
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}
.revise-mode .remove-statement{
  align-self:center;
}
.revise-mode .sentence-period{
  display:inline;
  margin-left:2px;
  color:var(--scfhs-blue-deep);
  font-weight:700;
  vertical-align:middle;
}

/* All six desktop cards remain fully contained; smaller widths keep pagination. */
.revise-mode .statement-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(118px,auto));
  grid-auto-rows:minmax(118px,auto);
  gap:10px;
  min-height:0;
  align-content:stretch;
}
.revise-mode .statement-card{
  min-height:118px;
  height:auto;
  padding:10px 12px;
  overflow:hidden;
  align-items:flex-start;
  align-content:flex-start;
  line-height:1.45;
}
.revise-mode .statement-text{
  display:block;
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
  word-break:normal;
}

@media (max-width:1200px){
  .revise-mode .narrative-slot{
    max-width:calc(100vw - 150px)!important;
  }
  .revise-mode .statement-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:minmax(112px,auto);
    grid-auto-rows:minmax(112px,auto);
  }
}
@media (max-width:900px){
  .revise-mode .narrative-flow{
    line-height:1.8;
  }
  .revise-mode .narrative-slot{
    max-width:calc(100vw - 96px)!important;
  }
}
@media (max-width:820px){
  .revise-mode .statement-grid{
    grid-template-columns:1fr;
    grid-template-rows:minmax(100px,auto);
    grid-auto-rows:minmax(100px,auto);
  }
}
@media (max-width:700px){
  .identify-mode .audit-text-area{padding:14px 16px}
  .identify-mode .audit-comment{line-height:1.85}
  .revise-mode .narrative-flow{font-size:var(--fs-subtitle);line-height:1.75}
  .revise-mode .fixed-phrase{font-size:var(--fs-subtitle)}
  .revise-mode .narrative-unit{display:block;margin:6px 0}
  .revise-mode .narrative-slot{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
  }
  .revise-mode .narrative-slot.empty{min-width:0!important}
}

/* V30 containment refinement: content-driven bank rows avoid overflow after long phrases are inserted. */
.revise-mode .statement-grid{
  grid-template-rows:none;
  grid-auto-rows:auto;
}
.revise-mode .statement-card{
  min-height:74px;
}
@media (max-width:1200px){
  .revise-mode .statement-grid{
    grid-template-rows:auto;
    grid-auto-rows:auto;
  }
  .revise-mode .statement-card{min-height:88px}
}
@media (max-width:820px){
  .revise-mode .statement-grid{
    grid-template-rows:auto;
    grid-auto-rows:auto;
  }
  .revise-mode .statement-card{min-height:88px}
}

/* V30 inline sizing refinement: phrases shrink to their content and wrap like a word-processor paragraph. */
.revise-mode .narrative-flow{line-height:1.65}
.revise-mode .narrative-slot{
  flex:none!important;
  width:fit-content!important;
}
.revise-mode .narrative-slot[data-drop-slot="performance"],
.revise-mode .narrative-slot[data-drop-slot="gap"]{
  max-width:min(760px,68%)!important;
}
.revise-mode .narrative-slot[data-drop-slot="next"]{
  max-width:min(700px,calc(100% - 430px))!important;
}
@media (max-width:900px){
  .revise-mode .narrative-flow{line-height:1.6}
  .revise-mode .narrative-slot[data-drop-slot="performance"],
  .revise-mode .narrative-slot[data-drop-slot="gap"]{max-width:68%!important}
  .revise-mode .narrative-slot[data-drop-slot="next"]{max-width:calc(100% - 420px)!important}
}
@media (max-width:700px){
  .revise-mode .narrative-flow{line-height:1.65}
  .revise-mode .narrative-slot[data-drop-slot]{
    width:100%!important;
    max-width:100%!important;
  }
}

/* V30 true inline flow: the inserted wording participates in one paragraph. */
.revise-mode .narrative-unit{
  display:inline;
  max-width:none;
  white-space:normal;
  margin:0;
}
.revise-mode .narrative-slot{
  margin:2px 4px 2px 3px;
}
.revise-mode .sentence-period{
  white-space:nowrap;
  margin-left:-2px;
}
@media (max-width:700px){
  .revise-mode .narrative-unit{display:block;margin:6px 0}
}

/* V30 desktop height balance: retain 16px text while removing excess vertical air. */
.revise-mode .compose-workspace{gap:8px}
.revise-mode .narrative-editor{padding:8px 14px}
.revise-mode .narrative-flow{line-height:1.5}
.revise-mode .narrative-slot{margin:1px 3px}
@media (max-width:900px){.revise-mode .narrative-flow{line-height:1.55}}
@media (max-width:700px){.revise-mode .narrative-flow{line-height:1.65}}
.revise-mode .narrative-editor{padding-top:6px;padding-bottom:6px}

/* V31: all comment segments are equally selectable; no visual clue reveals the answer. */
.identify-mode .audit-static{display:none!important}
.identify-mode .audit-comment{
  display:block;
  line-height:2.15;
}
.identify-mode .audit-segment{
  display:inline;
  margin:0;
  padding:3px 4px;
  border:1.5px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--scfhs-text);
  font:inherit;
  line-height:inherit;
  vertical-align:baseline;
  white-space:normal;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.identify-mode .audit-segment:hover,
.identify-mode .audit-segment:focus-visible{
  border-color:var(--scfhs-line-strong);
  background:#F8FAFA;
  outline:none;
}
.identify-mode .audit-segment.selected{
  border-color:#6D9ED2;
  background:var(--scfhs-blue-soft);
  box-shadow:0 0 0 2px rgba(0,65,107,.08);
}

/* V31: the revised narrative behaves as one flowing paragraph. Long wording wraps across the editor width, not inside fixed boxes. */
.revise-mode .narrative-flow{
  display:block!important;
  width:100%;
  margin:0;
  font-size:var(--fs-subtitle);
  line-height:2.05;
  text-align:left;
}
.revise-mode .fixed-phrase,
.revise-mode .narrative-unit,
.revise-mode .sentence-period{
  display:inline!important;
  white-space:normal!important;
  vertical-align:baseline!important;
}
.revise-mode .narrative-unit{
  margin:0!important;
  max-width:none!important;
}
.revise-mode .narrative-slot{
  display:inline!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  margin:0 3px!important;
  padding:4px 7px!important;
  vertical-align:baseline!important;
  white-space:normal!important;
  line-height:inherit!important;
  overflow:visible!important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.revise-mode .narrative-slot.filled{
  background:var(--scfhs-blue-soft);
  border:1.5px solid #6D9ED2;
  border-radius:8px;
}
.revise-mode .narrative-slot.empty{
  display:inline!important;
  min-width:0!important;
  border:1.5px dashed #D88A1D;
  border-radius:8px;
  background:var(--scfhs-orange-soft);
}
.revise-mode .slot-text,
.revise-mode .slot-original,
.revise-mode .slot-label{
  display:inline!important;
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.revise-mode .slot-label{margin-right:6px}
.revise-mode .remove-statement{
  display:inline-flex!important;
  width:28px!important;
  height:28px!important;
  margin:0 5px 0 -1px!important;
  vertical-align:middle!important;
  transform:translateY(-1px);
}
.revise-mode .sentence-period{
  margin-left:0!important;
  white-space:nowrap!important;
}
@media (max-width:700px){
  .revise-mode .narrative-flow{line-height:1.9}
  .revise-mode .narrative-unit{display:inline!important;margin:0!important}
  .revise-mode .narrative-slot{display:inline!important;width:auto!important;max-width:none!important}
}


/* ===== 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;isolation:auto!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;text-align:left!important;
  margin:0!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{font-size:16px!important;line-height:1.5!important;max-width:560px!important;margin:0!important}
.start-copy .btn{margin-top:8px!important}
.start-visual{display:none!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;width:100%!important;max-width:none!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;
  }
}