/* ─────────────────────────────────────────────────────────────────
 * tasks.css — Tasks tab styles.
 *
 * Step 4 of the per-tab cockpit architecture
 * (_arch/cockpit-architecture-proposal.md §2 + §3).
 *
 * Selectors moved verbatim from public/index.html L388-431 (frozen at
 * cockpit.lock v2026.06.07.4-step4), each prefixed with `#view-tasks`.
 * ─────────────────────────────────────────────────────────────── */

#view-tasks .tasks-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#view-tasks .tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

#view-tasks .task-list {
  background: linear-gradient(180deg, rgba(11, 13, 20, 0.65), rgba(7, 9, 16, 0.55));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--elev-1);
}
#view-tasks .task-list h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 14px; font-weight: 600; }

#view-tasks .task-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(15, 18, 30, 0.55);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 9px;
  backdrop-filter: blur(6px);
  transition: all 0.15s ease;
}
#view-tasks .task-row:hover { border-color: var(--border-strong); background: rgba(30, 28, 54, 0.4); }

#view-tasks .task-check {
  width: 19px; height: 19px;
  border: 1.5px solid rgba(167, 139, 250, 0.35);
  border-radius: 5px; cursor: pointer; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
#view-tasks .task-check:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167,139,250,0.12); }
#view-tasks .task-check.done {
  background: linear-gradient(135deg, #34d399, #10b981);
  border-color: #34d399;
  color: #0a0a14; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 12px rgba(52,211,153,0.35);
}

#view-tasks .task-body { flex: 1; font-size: 13px; color: var(--text); }
#view-tasks .task-body.done { text-decoration: line-through; color: var(--text-faint); }
#view-tasks .task-prospect { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
#view-tasks .task-due { font-size: 11px; margin-top: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
#view-tasks .task-due.red { color: #f87171; }
#view-tasks .task-due.amber { color: #fbbf24; }
#view-tasks .task-due.green { color: #34d399; }
#view-tasks .done-strip { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--text-faint); }