Give each task an assigned colour across the UI; lead links tasks

web/style.css

@@ -49,6 +49,18 @@
   --warn: #855600;
   --warn-tint: #fdf3dc;
   --ok: #1a7f37;
+  --task-0: #a4273f;
+  --task-1: #9f3501;
+  --task-2: #376e00;
+  --task-3: #027048;
+  --task-4: #026d64;
+  --task-5: #046a77;
+  --task-6: #06658e;
+  --task-7: #1f58b6;
+  --task-8: #5849b2;
+  --task-9: #793c9f;
+  --task-10: #942e79;
+  --task: var(--accent);
   --shadow: 0 8px 28px rgb(16 24 40 / 0.18);
   --font: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
   font: 13px/1.55 var(--font);
@@ -69,6 +81,17 @@
     --warn: #f2c66d;
     --warn-tint: #352a14;
     --ok: #7fd88f;
+    --task-0: #fe9fa6;
+    --task-1: #ffa383;
+    --task-2: #99d079;
+    --task-3: #68d7a1;
+    --task-4: #37d8c9;
+    --task-5: #2fd4ec;
+    --task-6: #69caff;
+    --task-7: #98bffe;
+    --task-8: #b6b4fe;
+    --task-9: #d7a6fc;
+    --task-10: #f59cd8;
     --shadow: 0 8px 28px rgb(0 0 0 / 0.5);
   }
 }
@@ -282,6 +305,24 @@ textarea {
   color: var(--text);
 }
 
+.task-pane > .pane-tabs {
+  background: color-mix(in srgb, var(--task) 12%, var(--bg));
+}
+
+.task-pane > .pane-tabs .task-picker {
+  color: var(--task);
+  font-weight: 700;
+}
+
+.task-pane > .pane-tabs button.active {
+  border-bottom-color: var(--task);
+}
+
+.task-name,
+a.task-link {
+  color: var(--task);
+}
+
 .pane-tabs button:hover:not(:disabled),
 .range-tabs button:hover:not(:disabled),
 .modes button:hover:not(:disabled) {
@@ -534,7 +575,7 @@ button.compact.danger {
 }
 
 .transcript.running {
-  border-color: var(--accent);
+  border-color: var(--task);
 }
 
 .spinner {
@@ -543,7 +584,7 @@ button.compact.danger {
   width: 5px;
   height: 10px;
   margin: 5px 1px;
-  background: var(--accent);
+  background: var(--task);
   -webkit-mask: var(--frames) 0 0 / 50px 10px no-repeat;
   mask: var(--frames) 0 0 / 50px 10px no-repeat;
   animation: braille 0.8s steps(10) infinite;
@@ -901,6 +942,14 @@ details.note .md {
   height: calc(4.5lh + 14px);
 }
 
+.task-pane .compose textarea {
+  border-color: var(--task);
+}
+
+.task-pane .compose textarea:focus {
+  box-shadow: 0 0 0 1px var(--task);
+}
+
 .compose-actions {
   display: flex;
   justify-content: flex-end;