Force light mode, fix iOS dark-mode hijack, stack 3 comparison tables on mobile, shrink spectrum bar on narrow screens

app.py

@@ -554,41 +554,106 @@ THEME = gr.themes.Soft(
 )
 
 CUSTOM_CSS = f"""
-.gradio-container {{max-width: 1280px !important;}}
-footer {{visibility: hidden;}}
+/* Force LIGHT mode regardless of OS / browser preference (iOS dark-mode hijack fix) */
+:root, html, body, .gradio-container, .dark {{
+  color-scheme: light !important;
+  background-color: #ffffff !important;
+  color: #0f172a !important;
+}}
+.dark {{ color-scheme: light !important; }}
+.gradio-container, .gradio-container * {{
+  --body-background-fill: #ffffff !important;
+  --body-text-color: #0f172a !important;
+  --block-background-fill: #ffffff !important;
+  --block-label-background-fill: transparent !important;
+  --background-fill-primary: #ffffff !important;
+  --background-fill-secondary: #f8fafc !important;
+  --input-background-fill: #ffffff !important;
+}}
+.gradio-container {{ max-width: 1280px !important; background: #ffffff !important; }}
+footer {{ visibility: hidden; }}
+
+/* Labels: plain dark text, no chip background */
 .gradio-container label, .gradio-container .label,
-.gradio-container [data-testid="block-label"], .gradio-container .block-label {{
-  color: #0f172a !important; font-weight: 600 !important; background: transparent !important;
+.gradio-container [data-testid="block-label"], .gradio-container .block-label,
+.gradio-container .gr-block-label, .gradio-container span.label-wrap {{
+  color: #0f172a !important; font-weight: 600 !important;
+  background: transparent !important; box-shadow: none !important;
+  padding: 0 !important; border: none !important;
+}}
+
+/* Tab labels readable */
+.gradio-container button[role="tab"] {{
+  color: #334155 !important; font-weight: 500 !important; background: transparent !important;
 }}
-.gradio-container button[role="tab"] {{ color: #334155 !important; font-weight: 500 !important; }}
 .gradio-container button[role="tab"][aria-selected="true"] {{
   color: {KAIKAKU_ACCENT} !important; border-bottom-color: {KAIKAKU_ACCENT} !important; font-weight: 700 !important;
 }}
+
+/* Primary button */
 .gradio-container button.primary, .gradio-container .primary > button {{
   background: {KAIKAKU_ACCENT} !important; color: #ffffff !important;
   border-color: {KAIKAKU_ACCENT} !important; font-weight: 600 !important;
 }}
-.gradio-container table thead th {{
+
+/* Tables readable on white */
+.gradio-container table thead th,
+.gradio-container .gr-dataframe thead th,
+.gradio-container [class*="dataframe"] thead th {{
   color: #0f172a !important; font-weight: 700 !important; background: #f8fafc !important;
 }}
-.gradio-container table tbody td {{ color: #0f172a !important; }}
+.gradio-container table tbody td,
+.gradio-container .gr-dataframe tbody td,
+.gradio-container [class*="dataframe"] tbody td {{
+  color: #0f172a !important; background: #ffffff !important;
+}}
+.gradio-container [class*="dataframe"] tbody tr:nth-child(even) td {{
+  background: #fafbfc !important;
+}}
+
+/* Dropdown / Textbox readable */
+.gradio-container input, .gradio-container textarea, .gradio-container .gr-dropdown,
+.gradio-container [data-testid="dropdown"] {{
+  background: #ffffff !important; color: #0f172a !important;
+}}
+.gradio-container .token, .gradio-container .gr-dropdown .token {{
+  background: #f1f5f9 !important; color: #0f172a !important;
+}}
 
 /* Spectrum bar */
 .spectrum-bar {{
-  display: flex; align-items: stretch; margin: 12px 0 4px 0; height: 56px;
+  display: flex; align-items: stretch; margin: 12px 0 4px 0; min-height: 56px;
   border-radius: 8px; overflow: hidden;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05);
 }}
 .spectrum-cell {{
   flex: 1; display: flex; flex-direction: column; justify-content: center;
-  padding: 6px 14px; color: #0f172a;
+  padding: 8px 12px; color: #0f172a !important; min-width: 0;
+}}
+.spectrum-cell-1 {{ background: #f0f9f6 !important; }}
+.spectrum-cell-2 {{ background: #d8efe7 !important; }}
+.spectrum-cell-3 {{ background: #b8dfd1 !important; }}
+.spectrum-name {{ font-weight: 700; font-size: 0.95em; color: #0f172a !important; }}
+.spectrum-sub {{ font-size: 0.78em; color: #475569 !important; line-height: 1.3; }}
+.spectrum-arrow {{ width: 18px; background: transparent !important; display: flex; align-items: center; justify-content: center; color: #94a3b8 !important; flex-shrink: 0; }}
+
+/* Mobile responsive: stack the three sibling result tables on narrow screens */
+@media (max-width: 768px) {{
+  .gradio-container .compare-row {{ flex-direction: column !important; }}
+  .gradio-container .compare-row > * {{ width: 100% !important; min-width: 0 !important; }}
+  .spectrum-cell {{ padding: 6px 8px; }}
+  .spectrum-sub {{ font-size: 0.7em; }}
+  .spectrum-name {{ font-size: 0.85em; }}
+  .spectrum-bar {{ min-height: 64px; }}
+  .gradio-container {{ padding: 0 8px !important; }}
+  h1 {{ font-size: 1.4em !important; }}
+}}
+@media (max-width: 480px) {{
+  .spectrum-sub {{ display: none; }}
+  .spectrum-arrow {{ width: 12px; }}
+  .spectrum-bar {{ min-height: 40px; }}
+  .spectrum-cell {{ padding: 4px 6px; }}
 }}
-.spectrum-cell-1 {{ background: #f0f9f6; }}
-.spectrum-cell-2 {{ background: #d8efe7; }}
-.spectrum-cell-3 {{ background: #b8dfd1; }}
-.spectrum-name {{ font-weight: 700; font-size: 0.95em; }}
-.spectrum-sub {{ font-size: 0.8em; color: #475569; }}
-.spectrum-arrow {{ width: 16px; background: transparent; display:flex; align-items:center; justify-content:center; color: #94a3b8; }}
 """
 
 SPECTRUM_BAR = """
@@ -658,7 +723,7 @@ Three sibling ingredient embeddings from [arXiv:2605.22391](https://arxiv.org/ab
                 label="Try a basket (one click)",
             )
 
-            with gr.Row():
+            with gr.Row(elem_classes=["compare-row"]):
                 ex_nb_cooc = gr.Dataframe(value=_INIT_NB_COOC, headers=["Cooc","cos"],
                                           label="Cooc (recipe-context)", interactive=False)
                 ex_nb_core = gr.Dataframe(value=_INIT_NB_CORE, headers=["Core","cos"],
@@ -667,7 +732,7 @@ Three sibling ingredient embeddings from [arXiv:2605.22391](https://arxiv.org/ab
                                           label="Chem (chemistry)", interactive=False)
 
             with gr.Accordion("Closest modes (per sibling)", open=False):
-                with gr.Row():
+                with gr.Row(elem_classes=["compare-row"]):
                     ex_md_cooc = gr.Dataframe(value=_INIT_MD_COOC, headers=["id","label","kind","cos"],
                                               label="Cooc top modes", interactive=False, wrap=True)
                     ex_md_core = gr.Dataframe(value=_INIT_MD_CORE, headers=["id","label","kind","cos"],