/* The task page and the task list (view-tasks.js). Tokens and shared controls are in styles.css. */

.page { display: grid; gap: 12px; align-content: start; }
.lede { max-width: 64ch; }
.big { font: 600 var(--fs-headline)/var(--lh-headline) var(--font-display); }
.task-status { display: grid; gap: 12px; justify-items: start; padding: 12px 0 8px; }
.task-status .meta:empty { display: none; }
.task-section { display: grid; gap: 8px; margin-top: 24px; }
.task-section .crit-text { display: block; overflow: visible; -webkit-line-clamp: unset; } /* the full text here */
/* Open questions: each of a group's links on its own line, wrapping on a phone (two never make one long line) */
.task-asks-group > .link-inline { display: block; width: fit-content; max-width: 100%; white-space: normal; }
.legend-box { margin-top: 16px; }
.legend { display: grid; gap: 8px; }
.legend div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: baseline; }
.legend dd { font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--label-2); }
/* The task list: design A's quiet table (title, then how far it is). */
.tasks { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tasks th, .tasks td { text-align: left; font-weight: 400; padding: 12px; vertical-align: top; }
.tasks thead th { padding-top: 0; font-size: var(--fs-footnote); line-height: var(--lh-footnote); color: var(--label-3); }
.tasks tbody tr { border-top: 1px solid var(--separator); }
.tasks tbody tr:hover > * { background: var(--surface-2); }
.task-link { font-weight: 600; overflow-wrap: anywhere; color: var(--label); text-decoration: none; }
.task-link:hover { text-decoration: underline; }
.task-progress { color: var(--label-2); white-space: nowrap; }
.task-facts { margin-top: -4px; }
@media (max-width: 760px) {
  .legend div { grid-template-columns: 1fr; gap: 4px; }
  .tasks th, .tasks td { padding: 12px 8px; }
  .task-progress { white-space: normal; }
}