Give the add-icon buttons a border matching the compact field

A borderless icon next to a bordered input looked adrift. Same
1px solid var(--border) as .field, turning var(--accent) on hover
(alongside the icon itself, as before).

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

web/src/style.css

@@ -1039,20 +1039,20 @@ button[type="submit"]:disabled:not(.btn-icon),
   cursor: progress;
 }
 
-/* A small square, transparent icon button -- every "add to X" form (a
+/* A small square icon button, bordered like the compact field it sits
-   kanban column, the inbox, the status list, the "all tasks" new-card form)
+   beside -- every "add to X" form (a kanban column, the inbox, the status
-   used a full "Add" label until there were enough of them on screen at once
+   list, the "all tasks" new-card form) used a full "Add" label until there
-   to feel cluttered. Ghost styling and the hover colour change match
+   were enough of them on screen at once to feel cluttered, then a borderless
-   .title-back. Excluded (":not(.btn-icon)" above and on the
+   ghost icon on its own looked adrift next to that field. Excluded
-   .field-row/.kanban__new overrides) rather than out-specificity'd, so it
+   (":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
-   isn't at the mercy of source order -- the same reasoning as .field's low
+   rather than out-specificity'd, so it isn't at the mercy of source order --
-   specificity against input:focus. */
+   the same reasoning as .field's low specificity against input:focus. */
 .btn-icon {
   flex: none;
   width: 2rem;
   height: 2rem;
   padding: 0;
-  border: none;
+  border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--muted);
@@ -1065,6 +1065,7 @@ button[type="submit"]:disabled:not(.btn-icon),
 }
 
 .btn-icon:hover:not(:disabled) {
+  border-color: var(--accent);
   color: var(--accent);
 }