frontend/src/components/react/admin/Editor.tsx

@@ -291,10 +291,11 @@ export default function Editor({ editSlug }: Props) {
             <button
               type="button"
               onClick={() => setVimEnabled(v => !v)}
-              className={`btn btn--ghost btn--sm${vimEnabled ? ' is-active' : ''}`}
+              className={`btn btn--ghost btn--sm vim-toggle${vimEnabled ? ' is-active' : ''}`}
-              title={vimEnabled ? 'Vim mode ON' : 'Vim mode OFF'}
+              aria-pressed={vimEnabled}
+              title={vimEnabled ? 'Vim mode ON — click to disable' : 'Vim mode OFF — click to enable'}
             >
-              {vimEnabled ? 'VIM' : 'vim'}
+              {vimEnabled ? 'Vim on' : 'Vim off'}
             </button>
             <button
               type="button"

frontend/src/styles/partials/50-controls.css

@@ -75,11 +75,26 @@
   background: var(--red);
   border-color: var(--red);
 }
-/* Pressed/selected state for toggle & tab buttons */
+/* Pressed/selected state for toggle & tab buttons. Solid accent fill so an
-.btn.is-active {
+ * engaged toggle is unmistakable (label alone is too subtle). The
-  color: var(--mauve);
+ * `.btn--ghost.is-active` selector carries enough specificity (0,3,0) to beat
-  border-color: color-mix(in srgb, var(--mauve) 55%, var(--surface2));
+ * the theme `.cybersigil/.breakcore .btn--ghost` rules (0,2,0) that load in
-  background: color-mix(in srgb, var(--mauve) 14%, transparent);
+ * later partials — without it the active state is invisible on those themes. */
+.btn.is-active,
+.btn.btn--ghost.is-active {
+  color: var(--rosewater);
+  background: var(--mauve);
+  border-color: var(--mauve);
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--crust) 35%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent);
+}
+
+/* The vim toggle is desktop-only — vim mode auto-disables below 768px, so the
+ * button is a no-op there. Unlayered media query (Tailwind `hidden` would
+ * lose the cascade to `.btn { display: inline-flex }`). */
+@media (max-width: 767px) {
+  .btn.vim-toggle { display: none !important; }
 }
 
 /* Sizes */