1 files changed, 142 insertions, 24 deletions

diff --git a/web/style.css b/web/style.css
index 91466ee..106ae04 100644
--- a/web/style.css
+++ b/web/style.css
@@ -115,10 +115,39 @@ main {
   padding: 0.5rem 0;
   margin-bottom: 0.75rem;
   border-bottom: 1px solid var(--border);
+  gap: 0;
+}
+
+.filter-tab {
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.3em 0.75em;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  margin-bottom: -1px;
+}
+
+.filter-tab:hover {
+  color: var(--text);
+}
+
+.filter-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+/* Spacer to push remaining toolbar items to the right */
+.task-list-toolbar .filter-tab:last-of-type {
+  margin-right: auto;
 }
 
 /* Task list */
-.task-list {
+.task-list,
+.active-task-list {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
@@ -343,29 +372,6 @@ main {
   color: var(--state-failed);
 }
 
-.hidden-tasks-info {
-  font-size: 0.78rem;
-  color: var(--text-muted);
-  text-align: center;
-  padding: 0.5rem 0;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  width: 100%;
-}
-
-.hidden-tasks-info:hover {
-  color: var(--text);
-}
-
-.hidden-tasks-fold {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  opacity: 0.6;
-  margin-top: 0.5rem;
-}
-
 /* Primary button */
 .btn-primary {
   font-size: 0.85rem;
@@ -1009,6 +1015,11 @@ dialog label select:focus {
   margin-top: 8px;
 }
 
+.log-error {
+  color: #f87171;
+  font-style: italic;
+}
+
 /* ── Validate section ────────────────────────────────────────────────────── */
 
 .validate-section {
@@ -1045,3 +1056,110 @@ dialog label select:focus {
 .validate-suggestion {
   color: #94a3b8;
 }
+
+/* ── Task delete button ──────────────────────────────────────────────────── */
+
+.task-card {
+  position: relative;
+}
+
+.btn-delete-task {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: transparent;
+  border: none;
+  color: #64748b;
+  font-size: 0.75rem;
+  line-height: 1;
+  padding: 2px 5px;
+  border-radius: 3px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+
+.task-card:hover .btn-delete-task {
+  opacity: 1;
+}
+
+.btn-delete-task:hover {
+  background: var(--state-failed, #ef4444);
+  color: #fff;
+}
+
+/* ── Inline task editor ─────────────────────────────────────────────────────── */
+
+.task-card--editable:hover {
+  background: rgba(56, 189, 248, 0.04);
+}
+
+.task-inline-edit {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--border);
+}
+
+.task-inline-edit label {
+  display: block;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 0.625rem;
+}
+
+.task-inline-edit label input,
+.task-inline-edit label textarea,
+.task-inline-edit label select {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.375rem;
+  color: var(--text);
+  padding: 0.4em 0.6em;
+  font-size: 0.9rem;
+  font-family: inherit;
+}
+
+.task-inline-edit label input:focus,
+.task-inline-edit label textarea:focus,
+.task-inline-edit label select:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.inline-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+
+.inline-edit-actions button[type="button"]:not(.btn-primary) {
+  font-size: 0.85rem;
+  padding: 0.4em 1em;
+  border-radius: 0.375rem;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.inline-edit-actions button[type="button"]:not(.btn-primary):hover {
+  background: var(--border);
+  color: var(--text);
+}
+
+.inline-edit-error {
+  color: var(--state-failed);
+  font-size: 0.82rem;
+  margin-top: 0.5rem;
+}
+
+.inline-edit-success {
+  color: var(--state-completed);
+  font-size: 0.82rem;
+  margin-top: 0.25rem;
+  text-align: right;
+}