/* ---- 16d. Tasks (Todoist-style grouped checklist) -----------------------
 * The legacy `tasks` block at full parity: one glass card, sections divided
 * by hairlines, each headed by a coloured dot + label + count; rows are
 * circular priority-tinted checkboxes, title links, and trailing metadata
 * (due pill / priority flag / assignee avatar), with a subtle add affordance
 * under each section.
 *
 * The card composes `.glass-card` for the material but owns its own box, so
 * it is selected with `section.tasks` — specificity beats vitrine's late
 * `.glass-card` padding and keeps order from mattering (worklist §3.5). */

section.tasks {
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: var(--ta-r-xl);
}

/* Title bar — only when the list carries an action (the reference's rule:
 * otherwise the section headers are the chrome). */
.tasks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--ta-border);
}

.tasks-heading {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.014em;
}

.tasks-section+.tasks-section {
  border-top: 1px solid var(--ta-border);
}

.tasks-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--ta-border);
}

/* The section dot — the group option's hue (or a quiet gray when the group
   declares none). */
.tasks-dot {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--ta-muted) 50%, transparent);
}

.tasks-dot.dot-cat-1,
.tasks-dot.dot-cat-2,
.tasks-dot.dot-cat-3,
.tasks-dot.dot-cat-4,
.tasks-dot.dot-cat-5,
.tasks-dot.dot-cat-6,
.tasks-dot.dot-cat-7,
.tasks-dot.dot-cat-8 {
  background: var(--task-cat);
}

.tasks-group-title {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.tasks-count {
  color: var(--ta-muted);
  font-size: 0.75rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.tasks-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  transition: background-color 0.12s ease;
}

.task-row+.task-row {
  border-top: 1px solid var(--ta-divide);
}

.task-row:hover {
  background: var(--ta-accent-soft);
}

.task-toggle {
  display: flex;
  flex: none;
}

/* Circular, priority-tinted checkbox. `unstyled` on the element (it is a
   submit button) so the button base never paints it as an accent pill —
   worklist §3.2. */
.task-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid color-mix(in oklab, var(--ta-muted) 40%, transparent);
  border-radius: 9999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.task-ring svg {
  width: 0.75rem;
  height: 0.75rem;
  stroke-width: 3;
}

/* Not done with a priority: the ring takes the priority hue; without one it
   is a quiet gray. */
.task-ring.ring-cat-1,
.task-ring.ring-cat-2,
.task-ring.ring-cat-3,
.task-ring.ring-cat-4,
.task-ring.ring-cat-5,
.task-ring.ring-cat-6,
.task-ring.ring-cat-7,
.task-ring.ring-cat-8 {
  border-color: var(--task-cat);
}

/* Done: fills with the priority hue (or muted gray), check in white. */
.task-ring.is-done {
  background: var(--task-cat, var(--ta-muted));
  border-color: transparent;
}

.task-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ta-text);
  text-decoration: none;
}

.task-link:hover {
  text-decoration: underline;
}

.task-row.is-done .task-link {
  color: var(--ta-muted);
  text-decoration: line-through;
}

.task-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.625rem;
}

/* Due pill: calendar icon + a humanised date; rose when overdue and not
   done (the reference's `text-destructive-ink`). */
.task-due {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--ta-muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.task-due svg {
  width: 0.875rem;
  height: 0.875rem;
}

.task-due.overdue {
  color: var(--ta-err);
}

/* Priority flag — only high/medium priorities carry one. */
.task-flag {
  display: flex;
  color: var(--task-cat, var(--ta-muted));
}

.task-flag svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Assignee avatar — the suite's round initials chip. */
.task-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--task-cat);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  user-select: none;
}

/* Todoist's subtle add affordance under each section. */
.task-add {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ta-muted);
  text-decoration: none;
  transition: color 0.12s ease;
}

.task-add:hover {
  color: var(--ta-cat-6);
}

.task-add svg {
  width: 1rem;
  height: 1rem;
}

/* ── Category palette (shared with the thread components in feed.css) ──── */
.cat-1 {
  --task-cat: var(--ta-cat-1);
}

.cat-2 {
  --task-cat: var(--ta-cat-2);
}

.cat-3 {
  --task-cat: var(--ta-cat-3);
}

.cat-4 {
  --task-cat: var(--ta-cat-4);
}

.cat-5 {
  --task-cat: var(--ta-cat-5);
}

.cat-6 {
  --task-cat: var(--ta-cat-6);
}

.cat-7 {
  --task-cat: var(--ta-cat-7);
}

.cat-8 {
  --task-cat: var(--ta-cat-8);
}