/* Task detail (WP4) — additions on top of views.css / components.css. Spec §5.7–§5.10, A.6, A.7. All values from tokens.css. */

/* Header card */
.task-head .head-actions.quiet { justify-content: flex-start; align-items: center; gap: var(--s3); }
.task-head .people-line .people-for { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.task-head .person-link { color: inherit; border-radius: var(--r-full); }
.task-head .person-link:hover { text-decoration: none; color: var(--text); }
.task-head .person-link:hover .person-chip span:last-child { text-decoration: underline; }
.task-head .person-link:focus-visible { outline: none; box-shadow: var(--focus); }
.task-head .due-banner { display: flex; align-items: center; gap: 8px; }
.task-head .due-banner .i { flex: 0 0 auto; }
.task-head .sent-back { display: flex; align-items: flex-start; gap: 8px; }
.task-head .sent-back .i { flex: 0 0 auto; margin-top: 3px; }
.task-head .sent-back b { font-weight: 700; }

/* Verification panel (assigner, awaiting) */
.verify-panel .vp-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3); }
.verify-panel .vp-row .thumbs { flex: 0 1 auto; }
.verify-panel .vp-note.sm { font: var(--t-sm); }
.verify-panel .warning-text { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 719px) { .verify-panel .actions { display: none; } } /* the sticky bar carries Send back / Verify on phones */

/* Proof of work */
.proof-group .eyebrow { margin: 0; }
.file-list { display: flex; flex-direction: column; }
#proof .actions .caption { margin-left: auto; }
.upload-list { display: flex; flex-direction: column; gap: var(--s2); }
.upload-list:empty { display: none; }
.upload-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 8px; align-items: center; }
.upload-row .i { color: var(--text-3); grid-row: 1 / span 2; }
.upload-row .up-name { font: var(--t-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-row .up-pct { font: var(--t-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
.upload-row .progress { grid-column: 2 / span 2; }

/* Team progress */
.member-list { display: flex; flex-direction: column; }
.member-row + .member-row { border-top: 1px solid var(--border); }
.member-row.you + .member-row, .member-row.you { border-top: 0; }
.member-row { flex-wrap: wrap; row-gap: 2px; }
.member-row .part { flex: 0 1 auto; max-width: 50%; white-space: normal; text-align: right; justify-content: flex-end; }
.member-row .part .i { flex: 0 0 auto; }
.member-row .mr-note { flex: 1 1 100%; padding-left: calc(36px + var(--s3)); } /* the member's note sits under the name on every width */

/* Checklist */
#checklist .add-row { display: flex; align-items: flex-end; gap: var(--s2); }
#checklist .add-row .field { flex: 1; min-width: 0; margin: 0; }
#checklist .banner.success .btn { margin-left: auto; flex: 0 0 auto; }

/* Timeline */
#timeline .card-head .switch-row { min-height: 32px; padding: 0; gap: var(--s2); flex: 0 0 auto; }
#timeline .card-head .switch-row .switch-text { flex: 0 0 auto; }
#timeline .tl-item.sending { opacity: .65; }
#timeline .tl-item.sending .tl-time { display: inline-flex; align-items: center; gap: 6px; }
#timeline .tl-item.sending .spinner { width: 12px; height: 12px; }
#timeline .tl-item.event .thumbs { margin-top: 4px; }
#timeline .composer-actions .composer-hint { margin-right: auto; }
#timeline .composer textarea { max-height: calc(4 * 24px + 20px); }
@media (min-width: 1024px) {
  /* The right column is sticky; the list scrolls inside it so the composer stays in view (spec §5.10). */
  .sticky-col #timeline { max-height: calc(100vh - var(--header-h) - var(--s6) * 2); max-height: calc(100dvh - var(--header-h) - var(--s6) * 2); }
  .sticky-col #timeline .timeline { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
}

/* Sticky action bar (phone) */
@media (max-width: 719px) {
  .actionbar .quiet-line .btn-link { white-space: nowrap; }
  .actionbar .quiet-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Load error */
.task-error { padding: var(--s6) var(--card-pad); }