Polish cross-judge toggle UX and accessibility

script.js

@@ -371,6 +371,19 @@ function getDeltaClass(delta) {
   return delta > 0 ? "positive" : "negative";
 }
 
+function createToggleButton(label, isActive, onClick) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `toggle-btn${isActive ? " active" : ""}`;
+  button.textContent = label;
+  button.setAttribute("aria-pressed", String(isActive));
+  if (isActive) {
+    button.setAttribute("aria-current", "true");
+  }
+  button.addEventListener("click", onClick);
+  return button;
+}
+
 function renderControls() {
   if (!taskToggleRoot || !judgeToggleRoot || !metricToggleRoot) {
     return;
@@ -383,13 +396,13 @@ function renderControls() {
   ];
   taskToggleRoot.innerHTML = "";
   taskItems.forEach((item) => {
-    const button = document.createElement("button");
-    button.type = "button";
-    button.className = `toggle-btn${item.key === crossJudgeState.activeTask ? " active" : ""}`;
-    button.textContent = item.label === "MC" ? "MC (main benchmark)" : "OE (cross-judge)";
-    button.addEventListener("click", () => {
-      renderResultsPanel(item.key, crossJudgeState.activeJudge, crossJudgeState.activeMetric);
-    });
+    const button = createToggleButton(
+      item.label === "MC" ? "MC (main benchmark)" : "OE (cross-judge)",
+      item.key === crossJudgeState.activeTask,
+      () => {
+        renderResultsPanel(item.key, crossJudgeState.activeJudge, crossJudgeState.activeMetric);
+      }
+    );
     taskToggleRoot.appendChild(button);
   });
 
@@ -407,11 +420,7 @@ function renderControls() {
       { key: "gemini", label: "Gemini-2.5-Flash" }
     ];
     judgeItems.forEach((item) => {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.className = `toggle-btn${item.key === crossJudgeState.activeJudge ? " active" : ""}`;
-      button.textContent = item.label;
-      button.addEventListener("click", () => {
+      const button = createToggleButton(item.label, item.key === crossJudgeState.activeJudge, () => {
         renderResultsPanel(crossJudgeState.activeTask, item.key, crossJudgeState.activeMetric);
       });
       judgeToggleRoot.appendChild(button);
@@ -422,11 +431,7 @@ function renderControls() {
       { key: "oeScr", label: "OE_scr" }
     ];
     metricItems.forEach((item) => {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.className = `toggle-btn${item.key === crossJudgeState.activeMetric ? " active" : ""}`;
-      button.textContent = item.label;
-      button.addEventListener("click", () => {
+      const button = createToggleButton(item.label, item.key === crossJudgeState.activeMetric, () => {
         renderResultsPanel(crossJudgeState.activeTask, crossJudgeState.activeJudge, item.key);
       });
       metricToggleRoot.appendChild(button);
@@ -438,10 +443,8 @@ function renderControls() {
   if (judgeToggleRow) {
     judgeToggleRow.classList.add("is-hidden");
   }
-  const mcButton = document.createElement("button");
-  mcButton.type = "button";
-  mcButton.className = "toggle-btn active";
-  mcButton.textContent = "MC_acc";
+  const mcButton = createToggleButton("MC_acc", true, () => {});
+  mcButton.disabled = true;
   metricToggleRoot.appendChild(mcButton);
 }
 

styles.css

@@ -502,12 +502,12 @@ code {
 
 .cross-toolbar {
   display: grid;
-  gap: 7px;
+  gap: 8px;
   margin-bottom: 8px;
-  padding: 9px;
-  border: 1px solid #e4dfd2;
-  border-radius: 11px;
-  background: #f8f6f1;
+  padding: 10px;
+  border: 1px solid #e2ddcf;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #faf8f2 0%, #f5f2e9 100%);
 }
 
 .toolbar-row {
@@ -535,24 +535,26 @@ code {
 .toggle-group {
   display: flex;
   flex-wrap: wrap;
-  gap: 7px;
+  gap: 6px;
+  align-items: center;
 }
 
 .toggle-btn {
-  border: 1px solid #cac4b8;
+  border: 1px solid #c9c2b4;
   border-radius: 999px;
-  padding: 5px 11px;
+  padding: 6px 12px;
   background: #f8f5ee;
-  color: #47423a;
+  color: #454038;
   font: inherit;
   font-size: 0.83rem;
   font-weight: 600;
   cursor: pointer;
-  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
+  min-height: 34px;
+  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
 }
 
 .toggle-btn:hover {
-  border-color: #bcb5a7;
+  border-color: #b6ae9f;
   background: #f1ede4;
 }
 
@@ -560,7 +562,12 @@ code {
   border-color: #171717;
   background: #151515;
   color: #ffffff;
-  box-shadow: 0 2px 8px rgb(17 17 17 / 15%);
+  box-shadow: 0 2px 8px rgb(17 17 17 / 16%);
+}
+
+.toggle-btn:disabled {
+  opacity: 1;
+  cursor: default;
 }
 
 .is-hidden {