Ghost-style the add-card/status icon buttons; convert the last one

- .btn-icon: transparent background, muted icon that turns accent on
  hover -- matching .title-back's treatment exactly, instead of a
  solid accent-filled square.
- The "all tasks" tab's "Add card" button is now the same .btn-icon
  as the kanban/inbox/status ones, so every "add" action in the app
  looks and behaves the same.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/style.css

@@ -1039,12 +1039,14 @@ button[type="submit"]:disabled:not(.btn-icon),
   cursor: progress;
 }
 
-/* A small square icon button -- the compact "add to X" forms (a kanban
+/* A small square, transparent icon button -- every "add to X" form (a
-   column, the inbox, the status list) all used a full "Add" label until
+   kanban column, the inbox, the status list, the "all tasks" new-card form)
-   there were enough of them on screen at once to feel cluttered. Excluded
+   used a full "Add" label until there were enough of them on screen at once
-   (":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
+   to feel cluttered. Ghost styling and the hover colour change match
-   rather than out-specificity'd, so it isn't at the mercy of source order --
+   .title-back. Excluded (":not(.btn-icon)" above and on the
-   the same reasoning as .field's low specificity against input:focus. */
+   .field-row/.kanban__new overrides) rather than out-specificity'd, so it
+   isn't at the mercy of source order -- the same reasoning as .field's low
+   specificity against input:focus. */
 .btn-icon {
   flex: none;
   width: 2rem;
@@ -1052,8 +1054,8 @@ button[type="submit"]:disabled:not(.btn-icon),
   padding: 0;
   border: none;
   border-radius: var(--radius-sm);
-  background: var(--accent);
+  background: transparent;
-  color: var(--accent-text);
+  color: var(--muted);
   font-size: 1.1rem;
   line-height: 1;
   display: inline-flex;
@@ -1062,6 +1064,10 @@ button[type="submit"]:disabled:not(.btn-icon),
   cursor: pointer;
 }
 
+.btn-icon:hover:not(:disabled) {
+  color: var(--accent);
+}
+
 .btn-icon:disabled {
   opacity: var(--opacity-disabled);
   cursor: progress;

web/src/views/ProjectView.vue

@@ -211,9 +211,13 @@ async function onCreateInColumn(column: Column) {
             <span>New card</span>
             <input v-model="newText" class="field" type="text" maxlength="1000" required />
           </label>
-          <button type="submit" :disabled="submitting">
+          <button
-            {{ submitting ? 'Adding…' : 'Add card' }}
+            type="submit"
-          </button>
+            class="btn-icon"
+            :disabled="submitting"
+            :title="submitting ? 'Adding…' : 'Add card'"
+            :aria-label="submitting ? 'Adding…' : 'Add card'"
+          >+</button>
         </form>
       </div>