v4: every inline editor ends in a btn-primary Save and a btn-secondary Cancel — comments drew their own .comment-submit-btn and .comment-cancel-btn, the profile's email its own .profile-email-btn pair, the bio a plain-text form-cancel, and the chat's edit box shrank the shared buttons with a rule of its own; they were four sizes, two orders of chrome, and the comment button's white label sat on Smooth's yellow accent. They all take the shared classes now, and the new .btn-sm is the one compact size, for the comment forms, the chat edit box and the email editor; the bio and the dump title stay full size. .btn-secondary gets a disabled state, as btn-primary has. The bespoke rules are gone, with GeoCities' bevel for the comment buttons, which btn-primary and btn-secondary already have. 670 frontend tests pass, and tsc, eslint and deno fmt are clean; the comment, reply, chat edit, email and bio editors were checked in screenshots in Smooth, Kanagawa, Brutalist and GeoCities at 1100 and 360px.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/App.css

@@ -2459,50 +2459,6 @@ body.has-player .chat-fab {
   gap: 0.4rem;
 }
 
-.profile-email-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.75rem;
-  padding: 0 0.65rem;
-  border-radius: var(--radius-sm);
-  border: 1.5px solid;
-  font-size: var(--text-xs);
-  font-family: inherit;
-  font-weight: 500;
-  cursor: pointer;
-  box-sizing: border-box;
-  transition: background var(--dur-base), border-color var(--dur-base), color
-    var(--dur-base);
-}
-
-.profile-email-btn--save {
-  background: var(--color-accent);
-  color: var(--color-on-accent);
-  border-color: var(--color-accent);
-}
-
-.profile-email-btn--save:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  border-color: var(--color-accent-hover);
-}
-
-.profile-email-btn--save:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.profile-email-btn--cancel {
-  background: transparent;
-  color: var(--color-text-muted);
-  border-color: var(--color-border);
-}
-
-.profile-email-btn--cancel:hover {
-  color: var(--color-text);
-  border-color: var(--color-text-muted);
-}
-
 .profile-description-actions {
   display: flex;
   align-items: center;
@@ -3512,6 +3468,20 @@ body.has-player .chat-fab {
   color: var(--color-accent);
 }
 
+.btn-secondary:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* The compact size, for the inline editors that sit in a narrow column or
+   beside small text: a comment, a chat message, the profile's email. Every
+   inline editor ends in a btn-primary Save then a btn-secondary Cancel. */
+.btn-sm {
+  font-size: var(--text-sm);
+  padding: 0.25rem 0.75rem;
+}
+
 .btn-danger {
   background: var(--color-danger-bg);
   color: var(--color-text);
@@ -4907,15 +4877,6 @@ body.has-player .chat-fab {
   gap: 0.4rem;
 }
 
-/* Compact buttons for the inline edit box — the full-size form buttons are too
-   bulky for the narrow message column. */
-.chat-edit-actions .btn-primary,
-.chat-edit-actions .btn-secondary {
-  font-size: var(--text-xs);
-  padding: 0.25rem 0.7rem;
-  box-shadow: none;
-}
-
 .chat-composer {
   display: flex;
   gap: 0.5rem;
@@ -5837,46 +5798,6 @@ body.has-player .chat-fab {
   align-items: center;
 }
 
-.comment-submit-btn {
-  background: var(--color-accent);
-  color: #fff;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.4rem 1rem;
-  font-family: inherit;
-  font-size: var(--text-sm);
-  font-weight: 700;
-  cursor: pointer;
-  transition: background var(--dur-base), opacity var(--dur-base);
-  letter-spacing: 0.02em;
-}
-
-.comment-submit-btn:not(:disabled):hover {
-  background: var(--color-accent-hover);
-}
-
-.comment-submit-btn:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.comment-cancel-btn {
-  background: transparent;
-  border: 1.5px solid var(--color-border-subtle);
-  border-radius: var(--radius-md);
-  padding: 0.4rem 1rem;
-  font-family: inherit;
-  font-size: var(--text-sm);
-  color: var(--color-text);
-  opacity: 0.6;
-  cursor: pointer;
-  transition: opacity var(--dur-base);
-}
-
-.comment-cancel-btn:hover {
-  opacity: 1;
-}
-
 .comment-node-inner--deleted {
   opacity: 0.35;
 }

src/components/chat/ChatEditBox.tsx

@@ -78,13 +78,17 @@ export function ChatEditBox(
       <div className="chat-edit-actions">
         <button
           type="button"
-          className="btn-primary"
+          className="btn-primary btn-sm"
           onClick={save}
           disabled={!sendable(draft)}
         >
           <Trans>Save</Trans>
         </button>
-        <button type="button" className="btn-secondary" onClick={onCancel}>
+        <button
+          type="button"
+          className="btn-secondary btn-sm"
+          onClick={onCancel}
+        >
           <Trans>Cancel</Trans>
         </button>
       </div>

src/components/comment/CommentForm.tsx

@@ -109,7 +109,7 @@ export function CommentForm({
       <FormError title={errorTitle} />
       <div className="comment-form-actions">
         <SubmitButton
-          className="comment-submit-btn"
+          className="btn-primary btn-sm"
           pendingLabel={pendingLabel}
           disabled={disabled}
         >
@@ -118,7 +118,7 @@ export function CommentForm({
         {showCancel && (
           <button
             type="button"
-            className="comment-cancel-btn"
+            className="btn-secondary btn-sm"
             onClick={() => {
               form.reset({ body: "" });
               onCancel?.();

src/components/profile/DescriptionEditor.tsx

@@ -90,7 +90,7 @@ export function DescriptionEditor(
           </SubmitButton>
           <button
             type="button"
-            className="form-cancel"
+            className="btn-secondary"
             onClick={onCancel}
             disabled={submitting}
           >

src/components/profile/EmailEditor.tsx

@@ -68,7 +68,7 @@ export function EmailEditor(
         />
         <div className="profile-email-actions">
           <SubmitButton
-            className="profile-email-btn profile-email-btn--save"
+            className="btn-primary btn-sm"
             pendingLabel={<Trans>Saving…</Trans>}
             disabled={!email.trim()}
           >
@@ -76,7 +76,7 @@ export function EmailEditor(
           </SubmitButton>
           <button
             type="button"
-            className="profile-email-btn profile-email-btn--cancel"
+            className="btn-secondary btn-sm"
             onClick={onCancel}
             disabled={submitting}
           >

src/themes/geocities.css

@@ -174,8 +174,6 @@
 [data-style="geocities"] .invite-btn,
 [data-style="geocities"] .btn-add-playlist,
 [data-style="geocities"] .load-more-btn,
-[data-style="geocities"] .comment-submit-btn,
-[data-style="geocities"] .comment-cancel-btn,
 [data-style="geocities"] .search-bar-btn {
   border: 3px outset var(--color-border);
   box-shadow: none;