Deploy main eacf1e7 to prod

Replaces #559, which conflicted.

Model: opus-5-5

static/css/input.css

@@ -1,7 +1,10 @@
-@import "tailwindcss";
-
-/* Source the templates */
+/* Classes are taken only from the files named below. A class written in
+   any other file is not generated: name that file here too. */
+@import "tailwindcss" source(none);
 @source "../../templates/**/*.html";
+@source "../js/app.js";
+/* targetStatus picks a target's status colour class */
+@source "../../internal/handlers/recent_events.go";
 
 /* Material Design inspired theme customization */
 @theme {
@@ -53,10 +56,6 @@
     @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-error-500 text-white hover:bg-error-700 active:bg-red-800 focus:ring-red-500 shadow-elevation-1 hover:shadow-elevation-2;
   }
 
-  .btn-text {
-    @apply inline-flex items-center justify-center px-4 py-2 rounded-md font-medium text-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed text-primary-600 hover:bg-primary-50 active:bg-primary-100;
-  }
-
   /* Cards */
   .card {
     @apply bg-white rounded-lg shadow-elevation-1 overflow-hidden;

static/css/style.css

@@ -1 +1,56 @@
-/* Webhooker custom styles — see input.css for Tailwind theme */
+/*
+ * The two shared styles for the controls a user clicks, and the rule that
+ * hides an element marked x-cloak. Every page loads this file after
+ * tailwind.css. It is plain CSS: make css does not build it.
+ *
+ * A button is btn-primary, btn-secondary or btn-danger, from input.css.
+ * A secondary or inline action, such as Copy beside an entrypoint URL or
+ * Edit beside a target, is btn-small.
+ *
+ * Each card on the webhook list is a card-elevated link as a whole. It
+ * shows an Open label in btn-small and takes btn-small's focus outline.
+ *
+ * The rules join tailwind.css's components layer, where input.css puts
+ * its own, so a utility class on an element still overrides them.
+ */
+@layer components {
+    /* input.css gives its buttons no pointer cursor. */
+    .btn-primary,
+    .btn-secondary,
+    .btn-danger {
+        cursor: pointer;
+    }
+
+    .btn-small {
+        display: inline-flex;
+        align-items: center;
+        padding: 0.25rem 0.625rem;
+        border: 1px solid var(--color-gray-300);
+        border-radius: var(--radius-md);
+        background-color: var(--color-white);
+        color: var(--color-primary-700);
+        font-size: var(--text-xs);
+        line-height: 1rem;
+        font-weight: var(--font-weight-medium);
+        cursor: pointer;
+    }
+
+    .btn-small:hover {
+        border-color: var(--color-primary-500);
+        background-color: var(--color-primary-50);
+    }
+
+    .btn-small:focus-visible,
+    .card-elevated:focus-visible {
+        outline: 2px solid var(--color-primary-500);
+        outline-offset: 2px;
+    }
+}
+
+/*
+ * Alpine.js removes x-cloak from an element once it has started, so
+ * something Alpine hides is not seen on the page while it loads.
+ */
+[x-cloak] {
+    display: none !important;
+}