Make tab 3 reachable on mobile; restyle the tab bar; rename tabs

Gradio's .tab-container is flex-wrap:nowrap with overflow-x:hidden. At 375px tab 3
extends to 544px with no scroll, swipe or arrow to reach it -- a phone visitor could
not open the conformal risk control tab at all. Measured on the live DOM.
overflow-x:auto plus a narrow-viewport media query fixes it at any label length.

The active tab also differed from the inactive ones by colour alone: identical
font-weight, no fill, no border. Now three independent signals -- weight, fill, and a
real 3px underline. Selectors target .tab-container and [aria-selected] rather than the
svelte-* hash, which is regenerated on SDK rebuilds.

Renames: "Can it be fooled?" -> "Can We Fool the Model?"; "What can you actually
prove?" -> "What We'd Show an Auditor" -- the old title promised proof, the one word
that tab spends its length disclaiming. Numbers kept; the intro asserts the tabs are an
argument read in order.

Mirrors llm-wiki commit 0731cb9.

app.py

@@ -118,8 +118,42 @@ function() {
 }
 """
 
+# The tab bar is how a visitor discovers that tabs 2 and 3 exist at all, and those
+# carry the whole contribution. Gradio's default marks the active tab by colour alone
+# -- same weight, no fill, no border -- which is a weak cue and useless to anyone with
+# red-green colour deficiency; and its container is flex-wrap:nowrap + overflow:hidden,
+# so on a 375px phone tab 3 lands offscreen with no way to scroll to it. Below: three
+# independent active-state signals (weight, fill, underline) and a scrollable bar.
+# Targets .tab-container and aria-selected rather than Gradio's svelte-* hash, which is
+# regenerated on every SDK rebuild and would silently stop matching.
+TAB_CSS = """
+.tab-container { gap: 6px; overflow-x: auto; scrollbar-width: none; }
+.tab-container::-webkit-scrollbar { display: none; }
+.tab-container button[role="tab"] {
+    flex: 0 0 auto;
+    white-space: nowrap;
+    font-size: 15px;
+    font-weight: 500;
+    padding: 11px 20px;
+    color: #52525b;
+    background: #f4f4f5;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px 8px 0 0;
+}
+.tab-container button[role="tab"]:hover { background: #ececee; color: #27272a; }
+.tab-container button[role="tab"][aria-selected="true"] {
+    font-weight: 600;
+    color: #9a3412;
+    background: #ffffff;
+    border-bottom: 3px solid #f97316;
+}
+@media (max-width: 640px) {
+    .tab-container button[role="tab"] { font-size: 13px; padding: 9px 12px; }
+}
+"""
+
 with gr.Blocks(title="Explainable & Auditable Alloy Defect Detection",
-               js=FORCE_LIGHT_THEME) as demo:
+               css=TAB_CSS, js=FORCE_LIGHT_THEME) as demo:
     gr.Markdown(
         """
         # Explainable & Auditable Alloy Defect Detection
@@ -136,7 +170,7 @@ with gr.Blocks(title="Explainable & Auditable Alloy Defect Detection",
         guarantee, plus the lesson that audit tools need auditing before you trust them.
         """
     )
-    with gr.Tab("1 · Classify & explain"):
+    with gr.Tab("1 - Classify & Explain"):
         gr.Markdown(
             "Upload a micrograph (or pick an example below). The model predicts the "
             "most likely defect class; the heatmap shows which pixels drove that "
@@ -163,7 +197,7 @@ with gr.Blocks(title="Explainable & Auditable Alloy Defect Detection",
         run_button.click(predict, inputs=image_input, outputs=[overlay_output, label_output])
         image_input.change(predict, inputs=image_input, outputs=[overlay_output, label_output])
 
-    with gr.Tab("2 · Can it be fooled?"):
+    with gr.Tab("2 - Can We Fool the Model?"):
         gr.Markdown(SPURIOUS_SETUP)
         gr.Image(
             value="assets/spurious-correlation.png",
@@ -172,7 +206,7 @@ with gr.Blocks(title="Explainable & Auditable Alloy Defect Detection",
         )
         gr.Markdown(SPURIOUS_MARKDOWN)
 
-    with gr.Tab("3 · What can you actually prove?"):
+    with gr.Tab("3 - What We'd Show an Auditor"):
         gr.Markdown(
             """
             ### First: can we even tell whether the heatmap is faithful?