Standardize header styles for test panel

The test panel drawer headers display inconsistent typography and
toggle indicators between the case creation form and test execution
status. This change aligns font properties and stateful indicator
styles across both sections to establish visual continuity in the
interview view.

Add a browser test under tests/browser/ to verify that both headers
share the same marker and typography styles, and that each marker
rotates when its section opens.

Author: Your Name

tests/browser/test-drawer-headers.test.js

@@ -0,0 +1,152 @@
+// Run with: node --test tests/browser/test-drawer-headers.test.js
+
+import { after, before, test } from "node:test";
+import assert from "node:assert/strict";
+
+import {
+  DEFAULT_RUNTIME_CONFIG,
+  launchChromium,
+  startStaticServer,
+} from "./source.js";
+
+let browser = null;
+let server = null;
+let base = "";
+
+before(async () => {
+  browser = await launchChromium();
+  if (!browser) return;
+  ({ server, base } = await startStaticServer({
+    runtimeConfig: DEFAULT_RUNTIME_CONFIG,
+  }));
+});
+
+after(async () => {
+  await browser?.close();
+  await new Promise((closed) => (server ? server.close(closed) : closed()));
+});
+
+async function waitForTransformTransition(marker, action) {
+  const transitionFinished = marker.evaluate(
+    (el) =>
+      new Promise((resolve) => {
+        const onTransitionEnd = (event) => {
+          if (event.propertyName !== "transform") return;
+          el.removeEventListener("transitionend", onTransitionEnd);
+          resolve();
+        };
+
+        el.addEventListener("transitionend", onTransitionEnd);
+      }),
+  );
+
+  await action();
+  await transitionFinished;
+}
+
+test("drawer headers share typography and toggle their chevrons", async (t) => {
+  if (!browser) return t.skip("playwright chromium unavailable");
+
+  const page = await browser.newPage();
+  try {
+    await page.goto(`${base}/interview.html`, {
+      waitUntil: "domcontentloaded",
+    });
+
+    const headers = [
+      {
+        selector: "#candidate-case > summary",
+        open: async () =>
+          page.locator("#candidate-case").evaluate((el) => {
+            el.open = true;
+          }),
+        close: async () =>
+          page.locator("#candidate-case").evaluate((el) => {
+            el.open = false;
+          }),
+      },
+      {
+        selector: "#results-toggle",
+        open: async () =>
+          page.locator("#results-toggle").evaluate((el) => {
+            el.classList.add("open");
+          }),
+        close: async () =>
+          page.locator("#results-toggle").evaluate((el) => {
+            el.classList.remove("open");
+          }),
+      },
+    ];
+
+    const styles = await Promise.all(
+      headers.map(({ selector }) =>
+        page.locator(selector).evaluate((header) => {
+          const style = getComputedStyle(header);
+          const marker = header.querySelector(".drawer-chevron");
+          const markerStyle = getComputedStyle(marker);
+          return {
+            fontFamily: style.fontFamily,
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            markerTransform: markerStyle.transform,
+            markerTransition: markerStyle.transition,
+          };
+        }),
+      ),
+    );
+
+    assert.deepEqual(
+      styles[0],
+      styles[1],
+      "both headers should share typography and chevron styles",
+    );
+
+    for (const header of headers) {
+      const marker = page.locator(`${header.selector} .drawer-chevron`);
+
+      assert.equal(await marker.count(), 1);
+
+      const closedTransform = await marker.evaluate(
+        (el) => getComputedStyle(el).transform,
+      );
+
+      await waitForTransformTransition(marker, header.open);
+
+      const openTransform = await marker.evaluate(
+        (el) => getComputedStyle(el).transform,
+      );
+
+      const openRotation = await marker.evaluate((el) => {
+        const { a, b } = new DOMMatrixReadOnly(getComputedStyle(el).transform);
+        return Math.round(Math.atan2(b, a) * (180 / Math.PI));
+      });
+
+      assert.equal(
+        openRotation,
+        90,
+        `${header.selector} chevron should rotate 90 degrees when opened`,
+      );
+
+      assert.notEqual(
+        openTransform,
+        closedTransform,
+        `${header.selector} chevron should change when opened`,
+      );
+
+      await waitForTransformTransition(marker, header.close);
+
+      const restoredTransform = await marker.evaluate(
+        (el) => getComputedStyle(el).transform,
+      );
+
+      assert.equal(
+        restoredTransform,
+        closedTransform,
+        `${header.selector} chevron should return when closed`,
+      );
+    }
+  } finally {
+    await page.close();
+  }
+});

web/interview.html

@@ -264,7 +264,10 @@ <h1 id="problem-title">Loading interview...</h1>
         ></div>
         <section id="test-drawer" class="test-drawer">
           <details id="candidate-case">
-            <summary>Add a case</summary>
+            <summary>
+              <span class="drawer-chevron" aria-hidden="true"></span>
+              <span>Add a case</span>
+            </summary>
             <label
               >Input JSON
               <textarea
@@ -284,8 +287,12 @@ <h1 id="problem-title">Loading interview...</h1>
             <ol id="candidate-case-list" class="small"></ol>
           </details>
           <button id="results-toggle" type="button">
+            <span
+              id="results-chevron"
+              class="drawer-chevron"
+              aria-hidden="true"
+            ></span>
             <span id="results-label">Test results</span>
-            <span id="results-chevron">v</span>
           </button>
           <div id="results-body" class="results-body">
             <p class="muted small">

web/styles.css

@@ -1425,16 +1425,41 @@ p {
   flex-basis: auto;
 }
 
+.test-drawer summary::-webkit-details-marker,
+.test-drawer summary::marker {
+  display: none;
+}
+
+.test-drawer summary,
 #results-toggle {
   display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
-  justify-content: space-between;
+  padding: 0.5rem 1rem;
   border: 0;
   background: transparent;
   color: var(--sub);
-  padding: 0.5rem 1rem;
-  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.875rem;
   font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+}
+
+.drawer-chevron {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 6px solid var(--sub);
+  transition: transform 120ms ease;
+}
+
+.test-drawer details[open] .drawer-chevron,
+#results-toggle.open .drawer-chevron {
+  transform: rotate(90deg);
 }
 
 .results-body {