internTaskCard(taskId) {
              const [projectCode, branch, task] = taskId.split('_');
              const { title, description, duration, durationType } = RIBC.getTaskDetails(taskId);
              const projectName = RIBC.getProjectDetails(projectCode).projectName;

              // per-intern state
              const { assignedTasks, completedTasks, failedTasks } = RIBC.getInternRecord(floGlobals.myFloID);
              const isCompleted = !!completedTasks?.[taskId];
              const isFailed = !!failedTasks?.[taskId];
              const showUpdateButton = !isCompleted && !isFailed;

              const linkifyDescription = createElement('p', {
                innerHTML: DOMPurify.sanitize(linkify(description)),
                className: `timeline-task__description ws-pre-line wrap-around`
              });

              // existing deadline/progress logic (used only for active/overdue)
              const { hasDeadlinePassed, taskDeadline, elapsedPercentage } = getTaskDeadline(taskId);

              // status/timeline block
              const timelineBlock = isCompleted
                ? html`
                    <div class="task__completion-timeline flex align-center">
                      <span class="assigned-intern assigned-intern--completed">
                        <span class="task-status task-status--completed">Completed</span>
                      </span>
                    </div>
                  `
                : (isFailed
                    ? html`
                        <div class="task__completion-timeline flex align-center">
                          <span class="assigned-intern assigned-intern--failed">
                            <span class="task-status task-status--failed">Failed</span>
                          </span>
                        </div>
                      `
                    : html`
                        <div class=${`task__completion-timeline flex align-center ${hasDeadlinePassed ? 'deadline-passed' : ''}`}>
                          ${hasDeadlinePassed ? html`
                            <h3>Overdue</h3>
                          ` : html`
                            <div class="flex flex-direction-column gap-0-3">
                              <div class="flex align-center gap-0-3">
                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z"/></svg>
                                <span style="font-size: 0.8rem; white-space: nowrap">Assigned</span>
                              </div>
                              <time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">
                                ${getFormattedTime(assignedTasks?.[taskId]?.assignedOn, 'date-only')}
                              </time>
                            </div>
                            <div class="task__completion-timeline__progress" role="progressbar">
                              <div class="task__completion-timeline__progress__bar" style=${`--progress: ${elapsedPercentage}%`}></div>
                              <div class="task__completion-timeline__progress__disc"></div>
                            </div>
                            <div class="flex flex-direction-column gap-0-3">
                              <div class="flex align-center gap-0-3">
                                <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M11,6H9V4h2V6z M15,4h-2v2h2V4z M9,14h2v-2H9V14z M19,10V8h-2v2H19z M19,14v-2h-2v2H19z M13,14h2v-2h-2V14z M19,4h-2v2h2 V4z M13,8V6h-2v2H13z M7,10V8h2V6H7V4H5v16h2v-8h2v-2H7z M15,12h2v-2h-2V12z M11,10v2h2v-2H11z M9,8v2h2V8H9z M13,10h2V8h-2V10z M15,6v2h2V6H15z"/></g></g></svg>
                                <span style="font-size: 0.8rem;">Due</span>
                              </div>
                              <time style="font-size: 0.9rem;font-weight: 500; white-space: nowrap">
                                ${getFormattedTime(taskDeadline, 'date-only')}
                              </time>
                            </div>
                          `}
                        </div>
                      `);

              return html`
                <li class="task-card" data-unique-id="${taskId}">
                  <span class="task__project-title">${projectName}</span>
                  <h4 class="task__title">${title}</h4>
                  ${timelineBlock}
                  ${linkifyDescription}
                  ${showUpdateButton ? html`
                    <button class="send-update-button button--small button--colored margin-left-auto" onclick=${initTaskUpdate}>
                      <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                        <path fill="none" d="M0 0h24v24H0z"/>
                        <path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/>
                      </svg>
                      Post an update
                    </button>
                  ` : ''}
                </li>
              `;
            },