.learner-task-page { background:#f5f6f8; color:#222936; }
.learner-task-main { min-width:0; padding:72px 28px 36px; }
.learner-task-header { max-width:1260px; margin:0 auto 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.learner-task-eyebrow { display:block; color:#287b72; font-size:12px; font-weight:700; margin-bottom:5px; }
.learner-task-header h1 { margin:0; font-size:26px; line-height:1.35; font-weight:750; letter-spacing:0; }
.learner-task-header p { margin:7px 0 0; color:#6b7280; font-size:13px; }
.learner-icon-btn { width:38px; height:38px; border:1px solid #dfe3e8; background:#fff; color:#485264; display:grid; place-items:center; font-size:20px; cursor:pointer; border-radius:6px; }
.learner-task-tabs { max-width:1260px; margin:0 auto 16px; border-bottom:1px solid #dfe3e8; display:flex; gap:4px; overflow-x:auto; }
.learner-task-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; color:#667085; padding:10px 14px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.learner-task-tabs button.active { color:#225f59; border-bottom-color:#287b72; }
.learner-task-tabs span { margin-left:7px; padding:1px 6px; background:#e8eaed; color:#68707d; border-radius:999px; font-size:10px; }
.learner-task-tabs button.active span { background:#dceeea; color:#225f59; }
.learner-task-workspace { max-width:1260px; margin:0 auto; min-height:620px; display:grid; grid-template-columns:minmax(320px, 0.85fr) minmax(520px, 1.45fr); border:1px solid #dfe3e8; background:#fff; }
.learner-task-list { border-right:1px solid #dfe3e8; background:#fafbfc; overflow:auto; max-height:calc(100vh - 190px); }
.learner-task-row { width:100%; border:0; border-bottom:1px solid #e8ebee; background:transparent; display:flex; gap:12px; align-items:flex-start; padding:16px; color:inherit; text-align:left; cursor:pointer; }
.learner-task-row:hover { background:#f3f7f6; }
.learner-task-row.active { background:#edf5f3; box-shadow:inset 3px 0 #287b72; }
.learner-task-type { width:36px; height:36px; flex:0 0 36px; border-radius:6px; background:#e3eeec; color:#287b72; display:grid; place-items:center; font-size:18px; }
.learner-task-row-body { min-width:0; flex:1; display:flex; flex-direction:column; gap:6px; }
.learner-task-row-top { display:flex; align-items:flex-start; justify-content:space-between; gap:9px; }
.learner-task-row-top strong { font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.learner-task-row em,.learner-task-detail em { flex:none; border-radius:999px; padding:3px 7px; font-style:normal; font-size:10px; font-weight:700; white-space:nowrap; }
.status-pending { background:#eef0f3; color:#5d6675; }
.status-in_progress { background:#e4f0fb; color:#236796; }
.status-submitted { background:#fff0d9; color:#996110; }
.status-verified { background:#dff2e8; color:#25704b; }
.status-remediation { background:#fbe4e2; color:#a6433c; }
.status-skipped { background:#ececef; color:#6c6c74; }
.learner-task-meta,.learner-task-due { color:#717987; font-size:11px; line-height:1.5; }
.learner-task-due.overdue { color:#b5473f; }
.learner-task-chevron { margin-top:8px; color:#9aa1ad; }
.learner-task-detail { min-width:0; padding:24px 28px 36px; overflow:auto; max-height:calc(100vh - 190px); }
.learner-task-detail-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:18px; border-bottom:1px solid #e5e8eb; }
.learner-task-detail-head span { color:#287b72; font-size:11px; font-weight:700; }
.learner-task-detail-head h2 { margin:6px 0 0; font-size:20px; line-height:1.45; letter-spacing:0; overflow-wrap:anywhere; }
.learner-task-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; border-bottom:1px solid #e5e8eb; }
.learner-task-facts div { padding:15px 12px; border-right:1px solid #e8ebee; }
.learner-task-facts div:first-child { padding-left:0; }
.learner-task-facts div:last-child { border-right:0; }
.learner-task-facts dt { color:#818896; font-size:10px; margin-bottom:5px; }
.learner-task-facts dd { margin:0; color:#343c49; font-size:12px; font-weight:650; overflow-wrap:anywhere; }
.learner-task-section { padding:20px 0 0; }
.learner-task-section h3,.learner-task-form h3 { margin:0 0 10px; color:#394150; font-size:13px; }
.learner-task-section p { margin:0; color:#606978; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.learner-task-tags { display:flex; flex-wrap:wrap; gap:7px; }
.learner-task-tags span { padding:5px 8px; background:#f1f3f5; border:1px solid #e4e7ea; color:#58616f; border-radius:4px; font-size:11px; }
.learner-material { border-top:1px solid #edf0f2; padding:11px 0; }
.learner-material>div { display:flex; align-items:center; gap:8px; }
.learner-material>div>i { color:#287b72; font-size:18px; }
.learner-material strong { color:#343c49; font-size:12px; }
.learner-material span { color:#858d99; font-size:10px; }
.learner-material a,.submission-summary a { color:#236e67; font-size:11px; text-decoration:none; }
.learner-material>a { display:inline-block; margin:7px 0 0 26px; }
.learner-material p { margin:9px 0 0 26px; max-height:180px; overflow:auto; padding:10px; background:#f7f8f9; }
.submission-summary p+p { margin-top:7px; }
.learner-task-review { margin-top:20px; display:flex; gap:10px; background:#eaf5ef; border-left:3px solid #39805d; padding:12px; color:#31644d; }
.learner-task-review.is-remediation { background:#fff0ee; border-left-color:#bd554b; color:#8d4039; }
.learner-task-review>i { font-size:20px; }
.learner-task-review strong { font-size:12px; }
.learner-task-review p { margin:4px 0 0; font-size:11px; line-height:1.6; }
.learner-task-form { margin-top:22px; padding-top:20px; border-top:1px solid #e5e8eb; }
.learner-task-form label { display:block; margin-top:13px; }
.learner-task-form label>span { display:block; margin-bottom:6px; color:#4b5563; font-size:11px; font-weight:650; }
.learner-task-form b { color:#b5473f; }
.learner-task-form textarea,.learner-task-form input { width:100%; box-sizing:border-box; border:1px solid #d5dae0; border-radius:5px; padding:10px 11px; background:#fff; color:#2f3743; font:12px/1.65 inherit; outline:none; resize:vertical; }
.learner-task-form textarea:focus,.learner-task-form input:focus { border-color:#287b72; box-shadow:0 0 0 2px rgba(40,123,114,.11); }
.learner-task-actions { margin-top:20px; display:flex; justify-content:flex-end; }
.learner-primary-btn { min-height:38px; border:0; border-radius:5px; padding:9px 16px; background:#287b72; color:#fff; font-size:12px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.learner-primary-btn:hover { background:#216a62; }
.learner-primary-btn:disabled { opacity:.6; cursor:wait; }
.learner-task-waiting { margin-top:22px; padding:12px; background:#fff7e9; color:#8a631f; font-size:12px; display:flex; align-items:center; gap:8px; }
.learner-task-empty,.learner-task-notice { max-width:1260px; min-height:280px; margin:0 auto; border:1px solid #dfe3e8; background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#76808e; }
.learner-task-empty i { font-size:34px; }
.learner-task-notice { min-height:auto; padding:16px; flex-direction:row; }
.learner-task-notice button { border:0; background:transparent; color:#287b72; cursor:pointer; font-weight:700; }
@media (max-width:960px) {
  .learner-task-main { padding:66px 14px 24px; }
  .learner-task-workspace { grid-template-columns:1fr; }
  .learner-task-list { border-right:0; max-height:none; }
  .learner-task-detail { border-top:1px solid #dfe3e8; max-height:none; padding:20px; }
  .learner-task-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .learner-task-facts div:nth-child(2) { border-right:0; }
}
@media (max-width:520px) {
  .learner-task-header h1 { font-size:22px; }
  .learner-task-tabs button { padding:9px 10px; }
  .learner-task-row { padding:13px 11px; }
  .learner-task-detail { padding:18px 14px 26px; }
  .learner-task-facts { grid-template-columns:1fr; }
  .learner-task-facts div { border-right:0; padding:10px 0; }
  .learner-task-detail-head { flex-direction:column; }
  .learner-primary-btn { width:100%; justify-content:center; }
}