fix: use outline badge style for 'auto' label for reliable dark theme contrast

Badge tokens (--badge-bg/fg) resolved to low-contrast colors in some
dark themes. Switch to a theme-agnostic outline style that uses
--text-secondary for both the border and text color, with a transparent
background. This works in all themes since the color inherits from the
editor's description text, which always has sufficient contrast.

Also moves the badge styling into a dedicated .auto-badge CSS class
instead of inline styles.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: rajbos

vscode-extension/src/webview/usage/main.ts

@@ -260,7 +260,7 @@ function renderToolsTable(byTool: { [key: string]: number }, limit = 10, nameRes
 		const friendly = escapeHtml(nameResolver(tool));
 		const idEscaped = escapeHtml(tool);
 		const autoBadge = AUTOMATIC_TOOL_SET_WV.has(tool)
-			? `<span title="Automatic tool — Copilot uses this internally and it does not count toward fluency scoring" style="margin-left:6px; padding:1px 5px; font-size:10px; border-radius:3px; background:var(--badge-bg); color:var(--badge-fg); vertical-align:middle;">auto</span>`
+			? `<span class="auto-badge" title="Automatic tool — Copilot uses this internally and it does not count toward fluency scoring">auto</span>`
 			: '';
 		return `
 		    <tr>

vscode-extension/src/webview/usage/styles.css

@@ -354,4 +354,17 @@ background: var(--list-hover-bg);
 color: var(--text-primary);
 border-bottom-color: var(--link-color);
 background: var(--bg-tertiary);
+}
+
+.auto-badge {
+	display: inline-block;
+	margin-left: 6px;
+	padding: 1px 5px;
+	font-size: 10px;
+	border-radius: 3px;
+	border: 1px solid var(--text-secondary);
+	color: var(--text-secondary);
+	background: transparent;
+	vertical-align: middle;
+	line-height: 1.4;
 }