content.py

import re


def create_gradio_anchor_id(text: str, validation) -> str:
    """
    Replicates the ID format created by gr.Markdown(header_links=True).
    Example: "Paper Finder Validation" -> "h-paper-finder-validation"
    """
    text = text.lower()
    text = re.sub(r'\s+', '-', text) # Replace spaces with hyphens
    text = re.sub(r'[^\w-]', '', text) # Remove non-word characters
    if validation:
        return f"h-{text}-leaderboard-1"
    return f"h-{text}-leaderboard"


TITLE = """<h1 align="left" id="space-title">OpenHands Index</h1>"""

INTRO_PARAGRAPH = """
<h1 class="intro-page-title">The OpenHands Index</h1>
<p>
    This is a comprehensive benchmark for evaluating AI coding agents across real-world software engineering tasks. As agents become more capable, we need ways to measure their performance across diverse challenges, from fixing bugs to building applications.
</p>
<p>
    The index assesses models across five categories: <strong>Issue Resolution</strong> (fixing bugs), <strong>Greenfield</strong> (building new apps), <strong>Frontend</strong> (UI development), <strong>Testing</strong> (test generation), and <strong>Information Gathering</strong>. All models are currently evaluated using the <a href="https://github.com/OpenHands/software-agent-sdk">OpenHands Software Agent SDK</a>. This provides a single view of both <strong>performance</strong> and <strong>cost efficiency</strong>, enabling fair comparisons between agents.
</p>
<p>
    For methodology details, see the <a href="/about" class="intro-link">About</a> page.
</p>
"""
SCATTER_DISCLAIMER = """
**Note:** Agents without cost data are displayed to the right of the vertical divider line.
"""
PARETO_DISCLAIMER = """
Agents names that are green are Pareto optimal, meaning they achieve the best performance for their cost. 
"""
BUG_FIXING_DESCRIPTION = """
The **Issue Resolution** category evaluates how well agents can diagnose and fix bugs in real-world codebases. This tests their ability to understand GitHub issues, navigate repositories, identify root causes, and implement correct fixes.
<br><br>
The scores shown below reflect performance aggregated across two distinct benchmarks: SWE-bench (text-based bug reports) and SWE-bench-multimodal (issues with visual context like screenshots or diagrams). 
<br><br>
For detailed results, use the links above to explore individual benchmarks.
<br>
"""
APP_CREATION_DESCRIPTION = """
The **Greenfield** category in OpenHands Index evaluates an agent's ability to build complete applications from scratch based on natural language specifications. This tests whether agents can understand requirements, design architecture, write modular code, and create working applications.
<br><br>
This category currently includes Commit0, which challenges agents to implement complete features and applications by generating the initial commit for a project.
<br><br>
For detailed results, use the links above to explore individual benchmark pages.
<br>
"""
FRONTEND_DEVELOPMENT_DESCRIPTION = """
The **Frontend** category evaluates agents on their ability to build user interfaces and web applications. This tests skills in HTML, CSS, JavaScript frameworks, responsive design, and creating interactive user experiences.
<br><br>
This category uses the dev set of <a href="https://huggingface.co/datasets/SWE-bench/SWE-bench_Multimodal" target="_blank" rel="noopener noreferrer">SWE-bench Multimodal (Verified)</a>, a version of SWE-bench Multimodal that includes only <a href="https://github.com/OpenHands/benchmarks/blob/main/benchmarks/swebenchmultimodal/ambiguity_annotations.json" target="_blank" rel="noopener noreferrer">problems verified as solveable</a> by human review.
<br>
"""
TEST_GENERATION_DESCRIPTION = """
The **Testing** category evaluates agents on their ability to create comprehensive test suites for existing code. This tests their understanding of code behavior, edge cases, and the ability to write effective unit tests, integration tests, and end-to-end tests.
<br><br>
This category includes SWT-bench (Software Testing Benchmark), which challenges agents to generate high-quality test cases that achieve good coverage and catch real bugs.
<br>
"""

INFORMATION_GATHERING_DESCRIPTION = """
The **Information Gathering** category tests whether agents can effectively search for information, synthesize knowledge from multiple sources, and answer complex questions that require tool use and reasoning.
<br><br>
This category includes GAIA (General AI Assistant benchmark), which evaluates agents on real-world assistant tasks that require web search, file manipulation, and multi-step reasoning to gather and process information.
<br>
"""
SUBMISSION_CONFIRMATION = """
**Your agent has been submitted to OpenHands Index for evaluation.**
<br><br>
🙏 Thanks for contributing!
<br><br>
You'll receive a confirmation email from our team within 2 business days with next steps. We will reach out to you directly if further information is needed.
<br><br>
We appreciate your support in advancing scientific AI.
"""

# External URLs for benchmark descriptions
SCHOLAR_QA_CS_URL = "https://www.semanticscholar.org/paper/OpenScholar%3A-Synthesizing-Scientific-Literature-LMs-Asai-He/b40df4b273f255b3cb5639e220c8ab7b1bdb313e"
LITQA2_URL = "https://www.semanticscholar.org/paper/Language-agents-achieve-superhuman-synthesis-of-Skarlinski-Cox/fa5f9aa1cb6f97654ca8e6d279ceee1427a87e68"
ARXIV_DIGESTABLES_URL = "https://www.semanticscholar.org/paper/ArxivDIGESTables%3A-Synthesizing-Scientific-into-Newman-Lee/c7face35e84f2cb04fb1600d54298799aa0ed189"
SUPER_URL = "https://www.semanticscholar.org/paper/SUPER%3A-Evaluating-Agents-on-Setting-Up-and-Tasks-Bogin-Yang/053ef8299988680d47df36224bfccffc817472f1"
CORE_BENCH_URL = "https://www.semanticscholar.org/paper/CORE-Bench%3A-Fostering-the-Credibility-of-Published-Siegel-Kapoor/4c913d59d150fe7581386b87dfd9f90448a9adee"
DS1000_URL = "https://arxiv.org/abs/2211.11501"
DISCOVERY_BENCH_URL = "https://www.semanticscholar.org/paper/DiscoveryBench%3A-Towards-Data-Driven-Discovery-with-Majumder-Surana/48c83799530dc523ee01e6c1c40ad577d5c10a16"

# Helper function to create external links
def external_link(url, text, is_s2_url=False):
    url = f"{url}?utm_source=openhands_index" if is_s2_url else url
    return f"<a href='{url}' target='_blank' rel='noopener noreferrer'>{text}</a>"

def internal_leaderboard_link(text, validation):
    anchor_id = create_gradio_anchor_id(text, validation)
    return f"<a href='#{anchor_id}'>{text}</a>"

# Function to get benchmark descriptions with validation flag
def get_benchmark_description(benchmark_name, validation):
    descriptions = {
    'PaperFindingBench': (
        "PaperFindingBench assesses an agent's ability to locate sets of papers based on a natural language "
        "description that may involve both the papers' content and metadata, such as the author or publication year."
    ),
    'LitQA2-FullText-Search': (
        f"A version of {internal_leaderboard_link('LitQA2-FullText', validation)} that isolates the retrieval aspect of the task. "
        f"This benchmark features the same multi-choice questions as {internal_leaderboard_link('LitQA2-FullText', validation)}, but the agent is not evaluated on answering the actual question "
        "but rather on providing a ranked list of papers in which the answer is likely to be found."
    ),
    'ScholarQA-CS2': (
        "ScholarQA-CS2 assesses long-form model responses to literature review questions in the domain of computer science. "
        "Answers are expected to be comprehensive reports, such as those produced by deep research systems. "
        f"This benchmark advances on the previously released {external_link(SCHOLAR_QA_CS_URL, 'ScholarQA-CS', is_s2_url=True)} "
        "by using queries from real-world usage, and introducing new evaluation methods for coverage and precision "
        "of both the report text and its citations."
    ),
    'LitQA2-FullText': (
        f"{external_link(LITQA2_URL, 'LitQA2', is_s2_url=True)}, a benchmark introduced by FutureHouse, gauges a model's ability to answer questions that require document retrieval from the scientific literature. "
        "It consists of multiple-choice questions that necessitate finding a unique paper and analyzing its detailed full text to spot precise information; these questions cannot be answered from a paper’s abstract. "
        "While the original version of the benchmark provided for each question the title of the paper in which the answer can be found, it did not specify the overall collection to search over. In our version, "
        "we search over the index we provide as part of the standard toolset. The “-FullText” suffix indicates we consider only the subset of LitQA2 questions for which "
        "the full-text version of the answering paper is open source and available in our index."
    ),
    'ArxivDIGESTables-Clean': (
        f"{external_link(ARXIV_DIGESTABLES_URL, 'ArxivDIGESTables', is_s2_url=True)} assesses the ability of models to construct literature review tables, i.e., tables whose rows are papers and whose columns constitute a set of "
        "aspects used to compare and contrast the papers. The goal is to construct such tables given a set of related papers and a table caption describing the user's goal. Generated tables are evaluated by "
        "comparing them to actual tables published in ArXiv papers. The “-Clean” suffix indicates a curated subset of ArxivDIGESTables which drops tables that are either trivial or impossible to reconstruct from full-texts."
    ),
    'SUPER-Expert': (
        "SUPER-Expert evaluates the capability of models in setting up and executing tasks from low-resource "
        "research repositories—centralized databases containing research data and related materials. "
        f"The \"-Expert\" split indicates the name of the most challenging split in the {external_link(SUPER_URL, 'original SUPER benchmark', is_s2_url=True)} "
        "that involves solving reproduction tasks from scratch and without any intermediate hints or details "
        "about the important landmarks involved in each task."
    ),
    'CORE-Bench-Hard': (
        "Core-Bench-Hard tests computational reproducibility, a task involving reproducing the results of a study "
        "using provided code and data. It consists of both language-only and vision-language challenges across "
        "multiple difficulty levels. "
        f"The \"-Hard\" split refers to the name of the most challenging split in the original {external_link(CORE_BENCH_URL, 'Core-bench benchmark', is_s2_url=True)} "
        "where only a README file is provided with no instructions or an auxiliary Dockerfile."
    ),
    'DS-1000': (
        "DS-1000 is an established code generation benchmark containing Python data science coding questions "
        "originally sourced from StackOverflow. It's designed to reflect an array of diverse, realistic, and "
        "practical use cases and directly involves many of the Python libraries commonly used in data science "
        f"and machine learning research. We split the original {external_link(DS1000_URL, 'dataset')} "
        "into 100 validation and 900 test problems."
    ),
    'DiscoveryBench': (
        "DiscoveryBench is the first comprehensive benchmark to formalize the multi-step process of data-driven "
        "analysis and discovery (i.e., data loading, transformation, statistical analysis, and modeling). "
        f"Originally introduced {external_link(DISCOVERY_BENCH_URL, 'here', is_s2_url=True)}, it is designed to systematically "
        "evaluate how well current LLMs can replicate or reproduce published scientific findings across diverse "
        "domains, including social science, biology, history, and more."
    ),
    'E2E-Bench': (
        "E2E-Bench is the \"decathlon\" of AI-assisted research. It measures whether a system can run the entire "
        "research pipeline, starting with an initial task description, to designing and performing (software) "
        "experiments, to analyzing and writing up the results."
    ),
    'E2E-Bench-Hard': (
        f"E2E-Bench-Hard is a more challenging variant of {internal_leaderboard_link('E2E-Bench', validation)}. Tasks are generated using the HypER system, "
        "which identifies research trends and proposes new, underexplored problems. Unlike the regular version, "
        "these tasks are not simplified or curated for accessibility; they are reviewed only for feasibility. "
        "This version is intended to test whether systems can handle more complex and less-structured research "
        f"scenarios, following the same end-to-end process as {internal_leaderboard_link('E2E-Bench', validation)}."
    )
    }
    
    return descriptions.get(benchmark_name, "")

CITATION_BUTTON_LABEL = "Copy the following snippet to cite these results"
CITATION_BUTTON_TEXT = r"""@article{openhands-index,
    title={OpenHands Index},
    author={OpenHands Team},
    year={2025},
    eprint={TBD.TBD},
    archivePrefix={arXiv},
    primaryClass={cs.AI},
    secondaryClass={cs.CL}
}"""

LEGAL_DISCLAIMER_TEXT = """
<h2>Terms and Conditions</h2>
<p>
    OpenHands maintains this repository for agent evaluation submissions to OpenHands Index. To keep OpenHands Index fair and auditable, all evaluation logs and associated submission files will be made publicly available. This includes your benchmark inputs, model output responses, and other data and information related to your submission as needed to verify the results.
</p>
<br>
<p>
    Your submissions to OpenHands Index will be posted, scored, and ranked on the leaderboard at <a href="https://huggingface.co/spaces/OpenHands/openhands-index" target="_blank" rel="noopener noreferrer">https://huggingface.co/spaces/OpenHands/openhands-index</a>. You agree you have the rights to the materials you submit and that you will not share any personal, sensitive, proprietary, or confidential information.
</p>
"""

def format_error(msg):
    return f"<p style='color: red; font-size: 20px; text-align: center;'>{msg}</p>"


def format_warning(msg):
    return f"<p style='color: orange; font-size: 20px; text-align: center;'>{msg}</p>"


def format_log(msg):
    return f"<p style='color: green; font-size: 20px; text-align: center;'>{msg}</p>"


def hyperlink(link_url: str, text: str = "🔗") -> str:
    if not link_url or not isinstance(link_url, str):
        return str(text) # Or simply "" if link_url is bad
    return f'<a target="_blank" href="{link_url}">{text}</a>'


def hf_uri_to_web_url(uri: str) -> str:
    """
    Convert a Hugging Face-style URI like:
        hf://datasets/{namespace}/{repo}/{path...}
    into a public web URL:
        https://huggingface.co/datasets/{namespace}/{repo}/tree/main/{path...}
    """
    prefix = "hf://datasets/"
    if not uri.startswith(prefix):
        raise ValueError("URI must start with 'hf://datasets/'")

    parts = uri[len(prefix) :].split("/", 2)
    if len(parts) < 3:
        raise ValueError("Expected format: hf://datasets/{namespace}/{repo}/{path...}")

    namespace, repo, path = parts
    return f"https://huggingface.co/datasets/{namespace}/{repo}/tree/main/{path}"


css = """
/* OpenHands-Design tokens (OpenHands-Design/index.html, DESIGN.md) */
:root {
  --oh-bg: hsl(0 0% 5%);
  --oh-card: hsl(0 0% 7%);
  --oh-secondary: hsl(0 0% 8%);
  --oh-muted: hsl(0 0% 12%);
  /* Light mode: 1px strokes / dividers — same grey as top nav bar (#e4e4e7 zinc-200) */
  --oh-border: #e4e4e7;
  /* Slightly stronger on interactive hover (zinc-300) */
  --oh-border-hover: #d4d4d8;
  --oh-muted-hover: hsl(0 0% 18%);
  --oh-fg: hsl(0 0% 98%);
  --oh-fg-muted: hsl(0 0% 55%);
  --oh-primary: hsl(0 0% 100%);
  --oh-primary-fg: hsl(0 0% 0%);
  --oh-success: #22c55e;
  --oh-success-fg: #86efac;
  --oh-warning: #f59e0b;
  --oh-info: #3b82f6;
  --oh-destructive: #dc2626;
  --oh-ring: #cccccc;
  --oh-shadow-card: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
  --oh-font-sans: 'Inter', system-ui, sans-serif;
  --oh-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* DESIGN.md §5: spacing (4px scale) — index.html / section rhythm */
  --oh-pad-x-page: 24px;
  /* DESIGN.md: container max 1400px — page column + #page-content-wrapper */
  --oh-content-max: 87.5rem;
  /* DESIGN.md §4: dropdown item hover (light / dark) */
  --oh-form-hover-light: #f4f4f5;
  --oh-form-active-dark: hsl(0 0% 12% / 0.6);
  --oh-pad-y-section: 4rem;              /* 64px — .section in index.html */
  --oh-gap-prose-paragraph: 1rem;         /* 16px — gap-4 */
  --oh-gap-prose-tight: 0.5rem;           /* 8px — gap-2 */
  --oh-prose-size: 0.875rem;              /* 14px — text-sm, primary body */
  --oh-prose-leading: 1.5rem;            /* 24px — leading-6 w/ text-sm */
  /* DESIGN.md: inline links use --info; focus ring = --oh-ring */
  --oh-link-visited: hsl(217 60% 48%);
  --oh-link-hover: hsl(217 85% 62%);
  /* Legacy var names (charts, tables) — mapped to design surfaces */
  --color-primary-accent: #e8e8e5;
  --color-primary-light: #f5f5f4;
  --color-primary-dark: #a1a1aa;
  --color-secondary-accent: #22c55e;
  --color-secondary-dark: #16a34a;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f4f4f4;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0d0d0d;
  --color-primary-link: #404040;
  --color-primary-link-dark: #a3a3a3;
  --color-background-light: #fafafa;
  --color-background-dark: #0d0d0d;
  --color-text-dark: #0d0d0d;
  --color-text-light: #fafafa;
  --color-button-hover: #404040;
  --color-danger: #dc2626;
}

/* Dark theme: near-black strokes (DESIGN.md --border / #242424) */
html.dark,
body.dark,
html:has([class*="gradio-container-"].dark),
.gradio-container.dark,
[class*="gradio-container-"].dark {
  --oh-border: hsl(0 0% 14%);
  --oh-border-hover: hsl(0 0% 24%);
}

body, .gradio-container {
  font-family: var(--oh-font-sans) !important;
  -webkit-font-smoothing: antialiased;
}
code, kbd, pre, .cell-wrap.svelte-v1pjjd {
  font-family: var(--oh-font-mono) !important;
}

/* Markdown `---` → <hr>. Gradio preflight uses color:inherit on hr, which tracks body text, not the border line. */
/* Section divider: 1px solid var(--oh-border) — light #e4e4e7 (top nav), dark #242424 */
gradio-app hr,
.gradio-container hr,
#about-page-content-wrapper hr,
#page-content-wrapper hr,
.prose hr,
div[class*="markdown"] hr,
.divider-line hr,
[class~="divider-line"] hr {
    box-sizing: border-box;
    display: block;
    height: 0 !important;
    margin: 0.75rem 0 1.5rem 0;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--oh-border) !important;
    background: transparent !important;
    background-color: transparent !important;
    /* Some UAs use `color` for the default <hr> border; lock to the border token (not --body-text-color) */
    color: var(--oh-border) !important;
    opacity: 1 !important;
}

/* No top padding on gradio-app (control_page_title is a prop on this element) */
gradio-app {
    padding-top: 0;
    overflow: visible !important;
    display: block;
}
/* In-flow strip so the fixed <nav> does not sit on top of the first line of main content */
gradio-app::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}
html {
    scroll-padding-top: 56px;
    min-height: 100%;
    /* Full-viewport canvas; match body/gradio so gutter + Gradio block fills never show a wrong tone (About’s lighter DOM hides this) */
    background-color: var(--color-background-light, #fafafa);
}
html.dark,
html:has([class*="gradio-container-"].dark) {
    background-color: var(--color-background-dark, #0d0d0d);
}
/* Main column: cap width to match DESIGN.md; nav stays full-bleed (sibling, not inside .main) */
gradio-app .main,
gradio-app .main.fillable {
    max-width: var(--oh-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/*
 * OpenHands-Design §4: Dropdown — menu z-index, min-w, border bg-popover, shadow-md, p-1
 * + menu item: text-sm, rounded-md, px-2 py-1.5, data-[highlighted]:bg-muted/60
 * Gradio uses ul.options / li.item; active row uses bg-gray-100 / dark:bg-gray-600 — override to tokens.
 */
gradio-app ul.options {
    border: 1px solid var(--border-color-primary) !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem !important;
    background: var(--background-fill-primary) !important;
    box-shadow: var(--shadow-drop-lg) !important;
    scrollbar-width: thin;
    scrollbar-color: hsl(0 0% 55% / 0.45) transparent;
}
gradio-app ul.options li.item {
    font-size: 0.875rem !important;
    line-height: 1.25rem;
    border-radius: 0.25rem;
    padding: 0.375rem 0.5rem !important;
    margin: 0 0.125rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}
/* Light: hover / keyboard highlight — neutral chip */
gradio-app ul.options li.item:hover,
gradio-app ul.options li.item.active {
    background-color: var(--oh-form-hover-light) !important;
}
/* Dark: canonical hover:bg-muted/60 (DESIGN.md §2) */
html.dark gradio-app ul.options li.item:hover,
html.dark gradio-app ul.options li.item.active,
body.dark gradio-app ul.options li.item:hover,
body.dark gradio-app ul.options li.item.active,
html:has([class*="gradio-container-"].dark) gradio-app ul.options li.item:hover,
html:has([class*="gradio-container-"].dark) gradio-app ul.options li.item.active,
.gradio-container.dark gradio-app ul.options li.item:hover,
.gradio-container.dark gradio-app ul.options li.item.active,
[class*="gradio-container-"].dark gradio-app ul.options li.item:hover,
[class*="gradio-container-"].dark gradio-app ul.options li.item.active {
    background-color: var(--oh-form-active-dark) !important;
    color: var(--body-text-color) !important;
}
/* Touch target: min h-10 (40px) for dropdown / text field wrap (DESIGN.md §8) */
gradio-app .container > .wrap > .wrap-inner {
    min-height: 2.5rem;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Leaderboard filter column: form stacks checkboxes with no gap (Gradio form uses --form-gap-width) */
gradio-app .column.oh-leaderboard-filter-col .form {
    gap: 0 !important;
}
/* Gradio root: overflow: hidden; — keep visible; sticky still fails if scroll is on an inner .main, so nav uses position: fixed */
body > [class*="gradio-container-"],
body > div.gradio-container,
body > [class^="gradio-container"] {
    overflow: visible !important;
}
/* Multipage top <nav> — fixed + opaque background + single bottom edge (see .nav-holder: border removed) */
gradio-app nav.svelte-ti537g {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 200 !important;
    min-height: 56px !important;
    height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    /* Default = light top bar (Gradio / :root use dark design tokens, so we don’t use --oh-bg here) */
    background: #fafafa !important;
    background-color: #fafafa !important;
    border-bottom: 1px solid #e4e4e7 !important;
    box-shadow: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* Dark theme: restore near-black bar (html/body, or any [class*=gradio-container-] with .dark) */
html.dark gradio-app nav.svelte-ti537g,
body.dark gradio-app nav.svelte-ti537g,
html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g,
.gradio-container.dark gradio-app nav.svelte-ti537g,
[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g {
    background: var(--oh-bg) !important;
    background-color: var(--oh-bg) !important;
    border-bottom: 1px solid var(--oh-border) !important;
}

/* Global Styles */
h2 {
    overflow: hidden;
}

/* In-content links (DESIGN.md — semantic info for links; top nav is outside #page-content-wrapper) */
#page-content-wrapper a[href],
#about-page-content-wrapper a[href],
#about-content a[href],
#category-intro a[href],
#intro-paragraph a[href],
#intro-category-paragraph a[href],
.prose a[href],
table.gr-table a[href] {
    color: var(--oh-info) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}
#page-content-wrapper a[href]:hover,
#about-page-content-wrapper a[href]:hover,
#about-content a[href]:hover,
#category-intro a[href]:hover,
#intro-paragraph a[href]:hover,
#intro-category-paragraph a[href]:hover,
.prose a[href]:hover,
table.gr-table a[href]:hover {
    color: var(--oh-link-hover) !important;
}
#page-content-wrapper a[href]:visited,
#about-page-content-wrapper a[href]:visited,
#about-content a[href]:visited,
#category-intro a[href]:visited,
#intro-paragraph a[href]:visited,
#intro-category-paragraph a[href]:visited,
.prose a[href]:visited,
table.gr-table a[href]:visited {
    color: var(--oh-link-visited) !important;
}
#page-content-wrapper a[href]:focus-visible,
#about-page-content-wrapper a[href]:focus-visible,
#about-content a[href]:focus-visible,
#category-intro a[href]:focus-visible,
#intro-paragraph a[href]:focus-visible,
#intro-category-paragraph a[href]:focus-visible,
.prose a[href]:focus-visible,
table.gr-table a[href]:focus-visible {
    outline: 2px solid var(--oh-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

#intro-paragraph {
    font-size: var(--oh-prose-size);
    max-width: min(100%, 52rem);
    padding-left: 0;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: var(--oh-gap-prose-paragraph);
}
/* Theme-aware: Gradio’s --body-text-color (matches light/dark theme); prose overrides need same specificity */
#intro-paragraph h1.intro-page-title,
#intro-paragraph .prose h1.intro-page-title {
    font-size: clamp(2rem, 2.5rem + 1.2vw, 2.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 1.25rem 0 !important;
    color: var(--body-text-color, var(--color-neutral-950)) !important;
    text-align: left;
}
html.dark #intro-paragraph h1.intro-page-title,
html.dark #intro-paragraph .prose h1.intro-page-title,
body.dark #intro-paragraph h1.intro-page-title,
body.dark #intro-paragraph .prose h1.intro-page-title,
.gradio-container.dark #intro-paragraph h1.intro-page-title,
.gradio-container.dark #intro-paragraph .prose h1.intro-page-title,
[class*="gradio-container-"].dark #intro-paragraph h1.intro-page-title,
[class*="gradio-container-"].dark #intro-paragraph .prose h1.intro-page-title {
    color: var(--body-text-color, var(--oh-fg)) !important;
}
#intro-paragraph .html-container,
#intro-paragraph .prose {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
}

#intro-paragraph p,
#intro-paragraph li {
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
}
#intro-paragraph p,
#intro-paragraph .prose p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
#intro-paragraph p:last-child {
    margin-bottom: 0;
}

/* DESIGN.md: Label pattern — same link token, medium weight for explicit intro-link */
.intro-link {
    color: var(--oh-info) !important;
    text-decoration: none;
    font-weight: 500;
}
.intro-link:hover {
    color: var(--oh-link-hover) !important;
}

#intro-paragraph ul {
    margin: var(--oh-gap-prose-paragraph) 0;
    padding-left: 1.25rem;
}
#intro-paragraph ul li + li {
    margin-top: 0.35em;
}

#diagram-image {
    height: 100%;
}

#diagram-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
#intro-category-paragraph {
    font-size: var(--oh-prose-size);
    max-width: min(100%, 52rem);
    margin-top: 1.5rem;
    margin-bottom: var(--oh-gap-prose-paragraph);
}

#intro-category-paragraph p,
#intro-category-paragraph li {
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
}
#intro-category-paragraph p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
#intro-category-paragraph p:last-child {
    margin-bottom: 0;
}

#intro-category-paragraph ul {
    margin: var(--oh-gap-prose-paragraph) 0;
    padding-left: 1.25rem;
}
#intro-category-paragraph ul li + li {
    margin-top: 0.35em;
}

#about-content {
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
    max-width: min(100%, 42rem);
    padding-left: 0;
    margin-bottom: var(--oh-pad-y-section);
}
#about-content p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
#about-content p:last-child {
    margin-bottom: 0;
}
#category-intro {
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
    max-width: min(100%, 42rem);
    margin-bottom: var(--oh-gap-prose-paragraph);
}
#category-intro p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
#category-intro p:last-child {
    margin-bottom: 0;
}
#logo-image { 
    margin: 0;
    margin-bottom: 2rem; 
    justify-content: flex-start;        
    max-width: 250px;           
    height: auto;           
}
/* index.html hero/section: comfortable row gap for intro + diagram */
#intro-row {
    gap: 1.5rem;
    align-items: flex-start;
    width: 100%;
}
/* DESIGN.md: container max 1400px, horizontal padding 24px (index .section) */
#page-content-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, var(--oh-content-max));
    margin-left: auto;
    margin-right: auto;
    /* Match home: gradio-app::before (56px nav) + intro-paragraph’s former margin-top */
    padding: 1.5rem var(--oh-pad-x-page) 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* gap-6 between major blocks */
}
.table-component{
    height: auto !important;
    max-height: none !important;
}
.table-wrap {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
}
/* --- New Rules for Table Density --- */
table.gr-table th, table.gr-table td {
    padding: 4px 4px !important; 
    width: 1%;
    white-space: nowrap;
}
table.svelte-1e98i6s td {
    vertical-align: top !important;
}
table.gr-table {
    font-size: 14px !important;
}
.html-container {
    padding-top: 0 !important;
}
#scatter-disclaimer {
        overflow: visible !important;
}
#pareto-disclaimer {
    color: var(--oh-success) !important;
}
thead.svelte-1e98i6s th {
    background: var(--color-neutral-50) !important;
}
.dark thead.svelte-1e98i6s th {
    background: var(--color-neutral-900) !important;
}
.cell-wrap.svelte-v1pjjd {
    font-family: var(--oh-font-mono) !important;
}
/* Gradio 5.30: top route row — right-align; left padding reserves zone for wordmark (app.py) */
gradio-app .nav-holder > nav.svelte-ti537g,
gradio-app .nav-holder nav.svelte-ti537g,
gradio-app nav.svelte-ti537g {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    justify-content: flex-end !important;
    padding: 0 20px 0 164px !important;
}
nav.svelte-ti537g.svelte-ti537g {
    justify-content: flex-end !important;
}
/* First paint: default route chip text only — not .active (Gradio gives .active the block fill; we override in app.py last) */
gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active) {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #71717a !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
}
html.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
body.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
.gradio-container.dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active),
[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g > a[href]:not([href*="/home"]):not(.active) {
    color: var(--oh-fg-muted) !important;
}
/* Dedupe & trim root link before/after .oh-top-nav (mirrors app.py) */
gradio-app nav.svelte-ti537g a[href$="/"] {
    display: none !important;
}
gradio-app .nav-holder nav a[href="/home"]:not(.oh-nav-link) {
    display: none !important;
}
/* Gradio: .nav-holder had border-bottom in flow while <nav> is position:fixed — that border scrolled (moving line). No border/background on holder; edge lives on <nav> only. */
gradio-app .nav-holder,
.nav-holder.svelte-ti537g.svelte-ti537g {
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
}
/* Gradio 5.30: default nav has horizontal margin/padding; keep bar tight */
nav.oh-top-nav.svelte-ti537g.svelte-ti537g {
    margin: 0 !important;
}
/* .oh-top-nav is applied by oh_top_nav_script — Gradio 5.30+ has no .nav-holder */
.oh-top-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    align-content: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 20px 0 164px !important;
    margin: 0 !important;
    /* Opaque bar — default light; dark overrides follow */
    background: #fafafa !important;
    background-color: #fafafa !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #e4e4e7 !important;
    box-shadow: none !important;
    overflow: visible !important;
    list-style: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* Gradio .fillable limits max-width at breakpoints; keep route bar edge-to-edge (nav can be .fillable.svelte-ti537g) */
nav.oh-top-nav.fillable,
.oh-top-nav.fillable,
nav.fillable.oh-top-nav,
nav.oh-top-nav.svelte-ti537g.fillable {
    max-width: none !important;
    width: 100% !important;
}
/* Dark top bar: document and/or .dark on Gradio container (including :has when only container is .dark) */
html.dark .oh-top-nav,
body.dark .oh-top-nav,
html:has([class*="gradio-container-"].dark) .oh-top-nav,
.gradio-container.dark .oh-top-nav,
[class*="gradio-container-"].dark .oh-top-nav {
    background: var(--oh-bg) !important;
    background-color: var(--oh-bg) !important;
    border-bottom: 1px solid var(--oh-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Active route chip visuals: see app.py final_css (appended after this file; must beat Gradio a.active.svelte-ti537g) */
/* Avoid double line: nav border-bottom + first block border-top */
.oh-top-nav + * {
    border-top: none !important;
    box-shadow: none !important;
}
.oh-top-nav::-webkit-scrollbar { display: none !important; }
/* Gradio 5.30: every route <a> uses .svelte-ti537g; some (e.g. duplicate Home) lack .oh-nav-link — clear underline/visited */
.oh-top-nav a.svelte-ti537g,
.oh-top-nav a.svelte-ti537g:hover,
.oh-top-nav a.svelte-ti537g:focus,
.oh-top-nav a.svelte-ti537g:active,
.oh-top-nav a.svelte-ti537g:visited,
.oh-top-nav a.svelte-ti537g.active {
    text-decoration: none !important;
    text-decoration-line: none !important;
}
/* Gradio can set column layout on parents; keep links in one row */
.oh-top-nav > a.oh-nav-link,
.oh-top-nav a.oh-nav-link {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
}
#legend-markdown span {
    margin-right: 15px !important; 
}
#leaderboard-accordion .label-wrap {
    font-size: 1.4rem !important; 
    z-index: 10 !important;
    position: relative !important;
}
.dark #leaderboard-accordion .label-wrap {
    color: var(--oh-fg) !important;
}
.dark block.svelte-1svsvh2 {
    background: var(--color-background-dark) !important;
}
.padding.svelte-phx28p {
    padding: 0 !important;
}
.sub-nav-bar-container {
    display: flex !important;
    flex-wrap: wrap !important; 
    align-items: center !important; 
    gap: 0.5rem !important; /* gap-2 */
}
.dark .primary-link-button,
.primary-link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: var(--oh-prose-size);
    font-weight: 500;
    color: var(--oh-info);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.primary-link-button:hover {
    color: var(--oh-link-hover);
    text-decoration: none;
}
.primary-link-button:focus-visible {
    color: var(--oh-link-hover);
    text-decoration: none;
    outline: 2px solid var(--oh-ring);
    outline-offset: 2px;
    border-radius: 2px;
}
.sub-nav-label {
    font-weight: 600;
    font-size: var(--oh-prose-size);
    display: flex;
    align-items: center;
}
.wrap-header-df th span {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
    vertical-align: top !important;
    font-size: 12px !important;
    font-family: var(--oh-font-sans) !important;
}
.wrap-header-df th {
    height: auto !important;
}
.wrap-header-df .cell-wrap img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
#legend-markdown img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
/*------ Global tooltip styles ------*/
.tooltip-icon {
    display: inline-block;
    cursor: help;
    position: relative;
}
.tooltip-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    white-space: pre-line;
    width: max-content;
    text-align: left;
    pointer-events: none;
    max-width: 300px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}
@media (max-width: 768px) {
    .tooltip-icon::after {
        max-width: 250px;
    }
}
.tooltip-icon:hover::after {
    opacity: 1;
}
/*------ Openness label tooltip styles ------*/
.styler,
#openness-label-html,
#agent-tooling-label-html {
    overflow: visible !important;
}
/*------ Table cell tooltip styles ------*/
.wrap.default.full,
span.wrap[tabindex="0"][role="button"][data-editable="false"] {
  overflow: visible !important;
}

.cell-tooltip-icon::after {
    height: fit-content;
    top: 125%;
}
/*------ Table column description tooltip styles ------*/
#legend-markdown,
#leaderboard-accordion {
    overflow: visible !important;
}

/* --- inside table tooltips --- */
.native-tooltip-icon {
    cursor: help;
    text-decoration: none;
}
/* Route chips: do not require .oh-nav-link (JS adds it async — without it, .dark a and Gradio nav rules used to break hover/active) */
gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active) {
    font-family: var(--oh-font-sans) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #71717a !important;
    text-decoration: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
}
gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
.oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible {
    color: #fafafa !important;
    background-color: #18181b !important;
    border-color: transparent !important;
}
/* Dark: muted links on dark bar */
html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active),
[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active),
[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active),
[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active) {
    color: var(--oh-fg-muted) !important;
}
html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
html.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
html.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
html.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
body.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
body.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
body.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
html:has([class*="gradio-container-"].dark) gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
html:has([class*="gradio-container-"].dark) gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
html:has([class*="gradio-container-"].dark) .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
.gradio-container.dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
.gradio-container.dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
.gradio-container.dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible,
[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
[class*="gradio-container-"].dark gradio-app nav.oh-top-nav a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):hover,
[class*="gradio-container-"].dark gradio-app nav.svelte-ti537g a.svelte-ti537g:not([href*="/home"]):not(.active):focus-visible,
[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):hover,
[class*="gradio-container-"].dark .oh-top-nav a.oh-nav-link:not([href*="/home"]):not(.active):focus-visible {
    color: #ffffff !important;
    background-color: var(--oh-muted) !important;
}
/* Dark app shell (OpenHands-Design near-black) */
body.dark, .gradio-container.dark {
    --body-background-fill: #0d0d0d !important;
    /* Must match body: #121212 vs #0d0d0d on nested Gradio blocks reads as a full-height left band on leaderboard/row layouts; About is unaffected visually */
    --block-background-fill: #0d0d0d !important;
}
body.dark, .gradio-container.dark,
.gradio-container.dark .contain,
.gradio-container.dark .wrap,
.gradio-container.dark .main,
.gradio-container.dark {
    background-color: #0d0d0d !important;
    color: #fafafa !important;
}
.benchmark-main-subtitle {
    color: var(--oh-fg-muted);
    overflow: hidden;
    padding-top: 120px;
    font-size: var(--oh-prose-size);
    font-weight: 500;
    line-height: var(--oh-prose-leading);
}
.benchmark-title {
    color: var(--color-text-dark);
    margin-top: 2.5rem;
    /* DESIGN.md: section heading — text-lg / font-semibold */
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.dark .benchmark-title {
    color: var(--oh-fg);
}
.benchmark-description {
    margin: var(--oh-gap-prose-paragraph) 0 1.5rem;
    max-width: 52rem;
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
}
.benchmark-description p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
.benchmark-description p:last-child {
    margin-bottom: 0;
}

/* DESIGN.md: page heading — text-2xl / font-semibold */
.dark #main-header h2,
#main-header h2 {
    color: #fafafa !important;
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
.gradio-container:not(.dark) #main-header h2 {
    color: #0d0d0d !important;
}

/* --- New HTML-Based Tooltip Styles --- */
.tooltip-icon-legend {
    position: relative;
    cursor: help;
    display: inline-block;
}

/* The HTML pop-up card tooltips.*/
.tooltip-card {
    /* Hiding mechanism */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;
    /* Card appearance */
    position: fixed;
    z-index: 1000;
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    border-radius: 12px;
    padding: 15px;
    width: max-content;
    max-width: 400px;
    text-align: left;
}
.tooltip-card.visible {
    opacity: 1;
    visibility: visible;
} 
.tooltip-card h3 {
    font-size: 18px; 
    color: #fff; 
    margin-top: 0; 
    margin-bottom: 12px;
}
.tooltip-card .tooltip-description {
    margin-bottom: 20px; 
    line-height: 1.3;
}
.tooltip-card .tooltip-items-container {
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}
.tooltip-card .tooltip-legend-item {
    display: flex; 
    align-items: 
    flex-start; 
    gap: 10px;
}
.tooltip-card .tooltip-legend-item img {
    width: 20px; 
    height: 20px; 
    margin-top: 2px;
}
.tooltip-card .tooltip-legend-item div {
    display: flex; 
    flex-direction: column;
}
.tooltip-card .tooltip-legend-item strong {
    font-weight: 600; 
    color: #fff;
}
.tooltip-card .tooltip-legend-item span {
    font-size: 13px; 
    line-height: 1.3;
}
.tooltip-sub-list {
    list-style-type: '• '; 
    padding-left: 18px;         
    font-size: 13px;
    line-height: 1.3;  
    display: flex;
    flex-direction: column;   
} 
.table-legend-item {  
    display: flex; 
    align-items: center; 
    white-space: nowrap; 
    margin-top: 8px; 
    flex-wrap: wrap;
}

/* About Page CSS — nested in #page-content-wrapper for same horizontal + top padding as Home */
#about-page-content-wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem; /* 800px — readable line length */
    padding: 0;
    display: flex;
    flex-direction: column; 
    gap: 2.5rem; /* 40px — matches index .section-title margin rhythm */
    margin-top: 0;
    opacity: 0.85; 
    margin-bottom: 3.75rem; /* 60px */
    box-sizing: border-box;
}

/* Alternative Agents intro — align with Home / category hero width and heading scale */
#alternative-agents-intro {
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
    max-width: min(100%, 52rem);
}
#alternative-agents-intro h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
    color: var(--body-text-color, var(--oh-fg)) !important;
}
#alternative-agents-intro p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
#alternative-agents-intro p:last-child {
    margin-bottom: 0;
}
#about-page-content-wrapper h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 0.75rem 0;
    color: var(--body-text-color, var(--oh-fg)) !important;
}
#about-page-content-wrapper p,
#about-page-content-wrapper li {
    font-size: var(--oh-prose-size);
    line-height: var(--oh-prose-leading);
}
#about-page-content-wrapper p {
    margin: 0 0 var(--oh-gap-prose-paragraph) 0;
}
#about-page-content-wrapper p:last-child {
    margin-bottom: 0;
}
#about-page-content-wrapper .info-list {
    margin: var(--oh-gap-prose-paragraph) 0;
    padding-left: 1.25rem;
}
#about-page-content-wrapper .info-list li + li {
    margin-top: 0.35em;
}
.link-buttons-container {
    display: flex;
    flex-wrap: wrap; /* Allows buttons to stack on very narrow screens */
    gap: 16px;     
    margin-top: 16px;
}
.link-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1; 
    background-color: var(--color-neutral-800);
    padding: 16px 20px;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none; 
    transition: background-color 0.2s ease-in-out;
    color: var(--color-text-light);
}
.link-button:hover {
    background-color: var(--color-neutral-700);
}
.external-link-icon {
    font-size: 20px;
    line-height: 1;
    margin-left: 12px;
}

#leaderboard-accordion table {
    width: auto !important;
    margin-right: auto !important;
}
.info-list {
    padding-left: 20px;
}

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}
/* Home Page Styling */
.diagram-placeholder {
    width: 100%;
    height: 100%; 
    min-height: 250px; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-neutral-100);
    color: var(--color-primary-accent);
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}
/* 2. Responsive behavior for smaller screens */
@media (max-width: 900px) {
    #intro-row {
        flex-direction: column;
    }
}
/* Plot legend styles */
.plot-legend-container {
    min-height: 572px;
    background-color: #fff;
    padding: 24px 32px;
    border: 1px solid var(--oh-border);
    border-radius: 4px;
}

.dark .plot-legend-container {
    background: rgba(247, 248, 251, 0.1);
    border-color: var(--oh-border);
}

#plot-legend-logo {
    margin-bottom: 24px;
}

#plot-legend-logo img {
    height: 19px;
}

.plot-legend-category-heading {
    font-size: 16px;
    font-weight: 700;    
}

.plot-legend-item {
    display: flex;      
    margin-top: 8px;
}


.plot-legend-item-text .description {
    color: #888;
    font-size: 12px;
}

.plot-legend-item-svg {
    margin-top: 3px;
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.plot-legend-tooling-svg {
    height: 16px;
    width: 16px;
    margin-top: 2px;
}

#plot-legend-item-pareto-svg {
    width: 18px;
    height: 18px;
    margin-right: 2px;
}
h3 .header-link-icon {
    font-size: 12px;
    vertical-align: text-top;
    margin-left: 6px;
    text-decoration: none;
}

/* Targets all "overall stats" columns in the main leaderboard for each category */
#main-leaderboard td:nth-child(6) .prose,
#main-leaderboard td:nth-child(7) .prose {
    font-weight: 700 !important;
}

/* ====== Winners by Category Section ====== */
.winners-by-category-container {
    margin: 20px 0;
    overflow-x: auto;
    scrollbar-gutter: stable;
    /* Horizontal scrollbar: thin thumb, no visible track (OpenHands-Design) */
    scrollbar-width: thin;
    scrollbar-color: hsl(0 0% 40% / 0.5) transparent;
}
html.dark .winners-by-category-container,
body.dark .winners-by-category-container,
.gradio-container.dark .winners-by-category-container {
    scrollbar-color: hsl(0 0% 55% / 0.45) transparent;
}
.winners-by-category-container::-webkit-scrollbar {
    height: 6px;
}
.winners-by-category-container::-webkit-scrollbar-track {
    background: transparent;
}
.winners-by-category-container::-webkit-scrollbar-thumb {
    background: hsl(0 0% 40% / 0.5);
    border-radius: 9999px;
}
.winners-by-category-container::-webkit-scrollbar-thumb:hover {
    background: hsl(0 0% 35% / 0.7);
}
html.dark .winners-by-category-container::-webkit-scrollbar-thumb,
body.dark .winners-by-category-container::-webkit-scrollbar-thumb,
.gradio-container.dark .winners-by-category-container::-webkit-scrollbar-thumb {
    background: hsl(0 0% 55% / 0.5);
}
html.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover,
body.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover,
.gradio-container.dark .winners-by-category-container::-webkit-scrollbar-thumb:hover {
    background: hsl(0 0% 60% / 0.65);
}

.winners-unified-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: #fff;
    border: 1px solid var(--oh-border);
    border-radius: 12px;
    overflow: hidden;
}

.dark .winners-unified-table {
    background: rgba(247, 248, 251, 0.05);
    border-color: var(--oh-border);
}

/* Category header bar: flat neutral grey */
.winners-unified-table thead tr {
    background: hsl(0 0% 92%);
}

.dark .winners-unified-table thead tr {
    background: hsl(0 0% 12%);
}

.winners-unified-table .category-header {
    padding: 12px 8px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text-dark);
    border-bottom: 1px solid var(--oh-border) !important;
    border-right: 1px solid var(--oh-border) !important;
    white-space: nowrap;
}

.dark .winners-unified-table .category-header {
    color: #fff;
    border-bottom-color: var(--oh-border) !important;
    border-right-color: var(--oh-border) !important;
}

.winners-unified-table .category-header:last-child {
    border-right: none !important;
}

.winner-category-icon-small {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

.winners-unified-table td {
    padding: 8px 6px;
    vertical-align: middle;
    border-bottom: 1px solid var(--oh-border);
}

.dark .winners-unified-table td {
    border-bottom-color: var(--oh-border);
}

.winners-unified-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover: muted/60 style (DESIGN.md), not yellow */
.winners-unified-table tbody tr:hover {
    background: hsl(0 0% 0% / 0.04);
}

.dark .winners-unified-table tbody tr:hover {
    background: hsl(0 0% 12% / 0.5);
}

.winners-unified-table .score-cell {
    text-align: left;
    font-weight: 700;
    color: var(--color-primary-dark);
    padding-left: 12px;
    min-width: 50px;
    border-right: 1px solid var(--oh-border);
}

.dark .winners-unified-table .score-cell {
    color: var(--color-primary-accent);
    border-right-color: var(--oh-border);
}

.winners-unified-table .model-cell {
    white-space: nowrap;
    color: var(--color-text-dark);
    font-weight: 500;
    padding-right: 12px;
    border-right: 1px solid var(--oh-border);
}

.dark .winners-unified-table .model-cell {
    color: #fff;
    border-right-color: var(--oh-border);
}

.winners-unified-table td:nth-last-child(1) {
    border-right: none;
}

.company-logo-tiny {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Responsive adjustments for winners section */
@media (max-width: 900px) {
    .winners-unified-table {
        font-size: 11px;
    }
    
    .winners-unified-table .category-header {
        font-size: 11px;
        padding: 8px 4px;
    }
    
    .winner-category-icon-small {
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }
    
    .winners-unified-table td {
        padding: 6px 4px;
    }
    
    .company-logo-tiny {
        width: 14px;
        height: 14px;
        margin-right: 4px;
    }
    
    .model-name {
        font-size: 10px;
    }
}

/* ====== Dark Mode Plotly Charts ====== */
/* Invert chart background for dark mode, but leave logos untouched */
.dark .js-plotly-plot {
    filter: invert(0.88) hue-rotate(180deg);
}

/* Re-invert the modebar so icons display correctly, with transparent background */
.dark .js-plotly-plot .modebar {
    filter: invert(1) hue-rotate(180deg);
    background: transparent !important;
}

.dark .js-plotly-plot .modebar-container {
    background: transparent !important;
}

.dark .js-plotly-plot .modebar-group {
    background: transparent !important;
}

.dark .js-plotly-plot .modebar-btn {
    background: transparent !important;
}

/* Style modebar icons to match the light gray text color (after re-inversion) */
/* Since we apply invert(1), we need to use the inverted color to get the desired result */
/* Target: #82889B (neutral-400). After invert(1) hue-rotate(180deg), use #7d7764 */
.dark .js-plotly-plot .modebar-btn path {
    fill: #7d7764 !important;
}

.dark .js-plotly-plot .modebar-btn:hover path {
    fill: #4a4533 !important;
}

/* ====== Mobile Responsive Styles ====== */
/* Reduce left/right padding and margins on mobile devices */
@media (max-width: 768px) {
    /* Reduce padding on main content wrapper */
    #page-content-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    #intro-paragraph {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    /* Reduce padding on category intro */
    #intro-category-paragraph {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }
    
    /* Nav: keep left gutter for wordmark; tighten sides on small viewports */
    .oh-top-nav,
    gradio-app nav.svelte-ti537g {
        padding-left: 116px !important;
        padding-right: 8px !important;
    }
    
    /* Reduce about content padding */
    #about-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100% !important;
    }
    
    /* About is inside #page-content-wrapper — outer handles horizontal padding */
    #about-page-content-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Reduce gradio container padding */
    .gradio-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* Reduce main block padding */
    .main, .wrap, .contain {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    
    /* Make plots and tables full width on mobile */
    .plot-legend-container {
        padding: 16px 12px !important;
    }
    
    /* Reduce table cell padding on mobile */
    table.gr-table th, table.gr-table td {
        padding: 4px 2px !important;
    }
}
"""