{% load i18n scitex_project_picker %}
        <!-- Scholar leaf header: SDK SSoT row (writer shape). The ROW is the
            shared `.stx-app-header` sheet (linked in workspace_assets head);
            the leaf owns only identity (title + live leaf version, never a
            subtitle) and the project-selector slot. -->
        <header class="stx-app-header scholar-app-header">
            <div class="stx-app-header__identity">
                <span class="stx-app-header__title">{% trans "SciTeX Scholar" %}</span>
                <span class="stx-app-header__version"
                      title="scitex-scholar package serving this page">v{{ scholar_version }}</span>
            </div>
            <div class="stx-app-header__slot--project-selector">
                {% scitex_project_picker scope=app_scope current=current_project %}
            </div>
        </header>
        <div class="app-container" data-scholar-root>
            <!-- No left sidebar: even graph interaction hints live in the
                right-edge Details strip (operator 2026-10-17), so no tab
                ever renders an empty column. -->
            <!-- Main Content -->
            <main class="app-main">
                <!-- Tab Navigation: Search is the primary, default action.
                    SDK SSoT content-tabs primitive
                    (scitex_sdk/ui/css/app/content-tabs.css, linked in the
                    workspace_assets head): the shared sheet owns the tab
                    layout and the selected state, read from aria-selected.
                    Roving tabindex + ArrowLeft/ArrowRight live in app.js,
                    the producer. Search stays the default selected tab. -->
                <div class="stx-content-tabs" role="tablist" aria-label="{% trans "SciTeX Scholar" %}">
                    <button type="button" class="stx-content-tabs__tab" role="tab" id="scholar-tab-search" aria-selected="true" aria-controls="tab-search" tabindex="0">{% trans "Search databases" %}</button>
                    <button type="button" class="stx-content-tabs__tab" role="tab" id="scholar-tab-library" aria-selected="false" aria-controls="tab-library" tabindex="-1">{% trans "Library" %}</button>
                    <button type="button" class="stx-content-tabs__tab" role="tab" id="scholar-tab-graph" aria-selected="false" aria-controls="tab-graph" tabindex="-1">{% trans "Citation Graph" %}</button>
                </div>
                <!-- Search Tab (default) -->
                <div id="tab-search" class="tab-panel active" role="tabpanel" aria-labelledby="scholar-tab-search" tabindex="0">
                    <div class="citation-graph-container">
                        <!-- Input Form -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Search Papers" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <p class="graph-description">
                                    {% blocktrans %}Search academic databases (OpenAlex, Crossref, PubMed,
                                    Semantic Scholar, &#8230;) by keyword. This searches
                                    <strong>external databases</strong>, not your Library
                                    (a separate tab).{% endblocktrans %}
                                </p>
                                <form id="searchForm" class="graph-form">
                                    <div class="form-row">
                                        <div class="form-group--doi">
                                            <label class="form-label" for="searchInput">{% trans "Query" %}</label>
                                            <div class="input-wrapper">
                                                <input type="text"
                                                       id="searchInput"
                                                       class="form-input"
                                                       placeholder="e.g. graph neural networks for molecular property prediction">
                                                <button type="submit" class="btn-primary">{% trans "Search databases" %}</button>
                                            </div>
                                        </div>
                                        <div class="form-group--options">
                                            <label class="form-label" for="searchMaxResults">{% trans "Results" %}</label>
                                            <select id="searchMaxResults" class="form-select">
                                                <option value="10">10</option>
                                                <option value="20" selected>20</option>
                                                <option value="50">50</option>
                                                <option value="100">100</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                                <!--
                                    Advanced: collapsed by default. Houses the
                                    query-syntax help, the search source (mode),
                                    the "Ignore cache" control, and the CrossRef
                                    API status -- things a researcher does not
                                    need on the first screen (compass L653).
                                -->
                                <details class="search-advanced">
                                    <summary class="search-advanced__summary">{% trans "Advanced" %}</summary>
                                    <div class="search-advanced__body">
                                        <p class="search-advanced__syntax">
                                            {% blocktrans %}Query syntax:
                                            <code>-word</code> excludes a term,
                                            <code>year:2020-2024</code> bounds the
                                            publication year,
                                            <code>if:&gt;5</code> filters by impact factor.{% endblocktrans %}
                                        </p>
                                        <div class="search-advanced__row">
                                            <label class="form-label" for="searchMode">{% trans "Search source" %}</label>
                                            <select id="searchMode" class="form-select">
                                                <option value="parallel" selected>{% trans "All sources (parallel)" %}</option>
                                                <option value="single">{% trans "Single source" %}</option>
                                            </select>
                                        </div>
                                        <!--
                                            Slice 1 (old-direct unification): the
                                            Sources grid. Old-direct renders one
                                            checkbox per source (local corpora
                                            first, then external APIs) plus an
                                            ignore-cache toggle; the checked set
                                            travels as ?sources=a,b,c. All
                                            checked (or none) keeps the tiered
                                            default -- the request omits the
                                            param and behaves exactly as
                                            before this slice.
                                        -->
                                        <div class="search-advanced__row search-advanced__row--stack">
                                            <span class="form-label" id="searchSourcesLabel">{% trans "Sources" %}</span>
                                            <div class="search-sources-grid" id="searchSourcesGrid" role="group" aria-labelledby="searchSourcesLabel">
                                                <label class="search-advanced__check" title="{% trans "Crossref database on the SciTeX server — fast, unlimited" %}">
                                                    <input type="checkbox" class="source-toggle" value="crossref_local" checked>
                                                    Crossref (SciTeX)
                                                </label>
                                                <label class="search-advanced__check" title="{% trans "OpenAlex database on the SciTeX server — fast, unlimited" %}">
                                                    <input type="checkbox" class="source-toggle" value="openalex_local" checked>
                                                    OpenAlex (SciTeX)
                                                </label>
                                                <label class="search-advanced__check" title="{% trans "NCBI PubMed — biomedical literature" %}">
                                                    <input type="checkbox" class="source-toggle" value="pubmed" checked>
                                                    PubMed
                                                </label>
                                                <label class="search-advanced__check" title="{% trans "arXiv — physics, mathematics, and computer science preprints" %}">
                                                    <input type="checkbox" class="source-toggle" value="arxiv" checked>
                                                    arXiv
                                                </label>
                                                <label class="search-advanced__check" title="{% trans "Semantic Scholar — AI-powered academic search" %}">
                                                    <input type="checkbox" class="source-toggle" value="semantic" checked>
                                                    Semantic Scholar
                                                </label>
                                                <label class="search-advanced__check" title="{% trans "Crossref — DOI metadata registry" %}">
                                                    <input type="checkbox" class="source-toggle" value="crossref" checked>
                                                    Crossref
                                                </label>
                                                <label class="search-advanced__check" title="{% trans "OpenAlex — open catalog of scholarly works" %}">
                                                    <input type="checkbox" class="source-toggle" value="openalex" checked>
                                                    OpenAlex
                                                </label>
                                            </div>
                                            <p class="search-sources-hint">{% trans "Uncheck sources to narrow the search. All checked searches the default set." %}</p>
                                        </div>
                                        <!--
                                            Slice 2 (old-direct unification): the
                                            Filters rows. Old-direct renders
                                            year/citations/impact-factor range
                                            sliders feeding hidden inputs; the
                                            leaf uses native number inputs (no
                                            slider dependency) with the same
                                            hub param names. Empty means
                                            unbounded on that side.
                                        -->
                                        <div class="search-advanced__row search-advanced__row--stack">
                                            <span class="form-label" id="searchFiltersLabel">{% trans "Filters" %}</span>
                                            <div class="search-filters-grid" role="group" aria-labelledby="searchFiltersLabel">
                                                <label class="search-filters-grid__item">
                                                    <span class="search-filters-grid__name">{% trans "Year from" %}</span>
                                                    <input type="number" id="searchYearFrom" class="form-input" min="1000" max="2100" step="1" inputmode="numeric">
                                                </label>
                                                <label class="search-filters-grid__item">
                                                    <span class="search-filters-grid__name">{% trans "Year to" %}</span>
                                                    <input type="number" id="searchYearTo" class="form-input" min="1000" max="2100" step="1" inputmode="numeric">
                                                </label>
                                                <label class="search-filters-grid__item">
                                                    <span class="search-filters-grid__name">{% trans "Min citations" %}</span>
                                                    <input type="number" id="searchMinCitations" class="form-input" min="0" step="1" inputmode="numeric">
                                                </label>
                                                <label class="search-filters-grid__item">
                                                    <span class="search-filters-grid__name">{% trans "Max citations" %}</span>
                                                    <input type="number" id="searchMaxCitations" class="form-input" min="0" step="1" inputmode="numeric">
                                                </label>
                                                <label class="search-filters-grid__item">
                                                    <span class="search-filters-grid__name">{% trans "Min impact factor" %}</span>
                                                    <input type="number" id="searchMinImpact" class="form-input" min="0" step="0.1" inputmode="decimal">
                                                </label>
                                                <label class="search-filters-grid__item">
                                                    <span class="search-filters-grid__name">{% trans "Max impact factor" %}</span>
                                                    <input type="number" id="searchMaxImpact" class="form-input" min="0" step="0.1" inputmode="decimal">
                                                </label>
                                            </div>
                                        </div>
                                        <div class="search-advanced__row">
                                            <label class="search-advanced__check">
                                                <input type="checkbox" id="searchNoCache">
                                                {% trans "Ignore cache" %}
                                            </label>
                                        </div>
                                        <div class="search-advanced__row search-advanced__api">
                                            <span class="form-label">{% trans "CrossRef API" %}</span>
                                            {% if api_available %}
                                                <span style="color: var(--accent);">&#9679;</span> {% trans "Configured" %}
                                            {% else %}
                                                <span style="color: var(--status-error);">&#9679;</span> {% trans "Not configured" %}
                                            {% endif %}
                                        </div>
                                    </div>
                                </details>
                            </div>
                        </div>
                        <!-- Loading -->
                        <div id="searchLoading" class="graph-loading hidden">
                            <div class="loading-spinner">
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                            </div>
                            <div class="loading-text">{% trans "Searching databases... This may take a moment." %}</div>
                        </div>
                        <!-- Error -->
                        <div id="searchError" class="graph-error hidden">
                            <p id="searchErrorMessage">{% trans "An error occurred" %}</p>
                            <button class="btn-build"
                                    onclick="document.getElementById('searchError').classList.add('hidden')">
                                {% trans "Dismiss" %}
                            </button>
                            <button id="searchRetryBtn" class="btn-build">
                                {% trans "Retry" %}
                            </button>
                        </div>
                        <!-- Results -->
                        <div id="searchResults" class="hidden related-papers-section">
                            <div class="graph-card">
                                <div class="graph-card__header">
                                    <span class="graph-card__title">
                                        {% trans "Results" %}
                                        <small id="searchStats" class="card-subtitle"></small>
                                    </span>
                                </div>
                                <!-- Declutter (CCT4429): sorter + source filter +
                                    bulk/pipeline pills share ONE compact row.
                                    The selects carry aria-labels instead of
                                    visible text labels; every control keeps
                                    its id and wiring (slice-2 pins hold). -->
                                <div class="search-results-toolbar">
                                    <select id="searchSort" class="form-select" aria-label="{% trans "Sort by" %}">
                                        <option value="relevance" selected>{% trans "Relevance" %}</option>
                                        <option value="year-desc">{% trans "Year (newest)" %}</option>
                                        <option value="year-asc">{% trans "Year (oldest)" %}</option>
                                        <option value="title">{% trans "Title (A-Z)" %}</option>
                                    </select>
                                    <select id="searchSourceFilter" class="form-select" aria-label="{% trans "Source" %}">
                                        <option value="" selected>{% trans "All sources" %}</option>
                                    </select>
                                    <span class="search-results-toolbar__sep" aria-hidden="true"></span>
                                    <!--
                                        Slice 3 (old-direct unification): the
                                        results-header tools. Old-direct offers
                                        an abstract truncated/full toggle, an
                                        open-selected-URLs button, and an
                                        export-selected-BibTeX button -- all
                                        client-side over the checked rows.
                                    -->
                                    <button type="button" id="searchAbstractToggle" class="btn-control-library" data-mode="truncated" title="{% trans "Toggle abstract display" %}">{% trans "Abstract: truncated" %}</button>
                                    <button type="button" id="searchOpenUrls" class="btn-control-library" title="{% trans "Open selected papers in new tabs" %}">{% trans "Open URLs" %}</button>
                                    <button type="button" id="searchExportBibtex" class="btn-control-library" title="{% trans "Download BibTeX for the selected results" %}">{% trans "Export BibTeX" %}</button>
                                    <div class="search-bulk-bar" id="searchBulkBar">
                                        <label class="search-bulk-bar__select-all">
                                            <input type="checkbox" id="searchSelectAll">
                                            {% trans "Select all" %}
                                        </label>
                                        <button type="button" id="searchSaveSelected" class="btn-control-library">{% trans "Save selected" %}</button>
                                        <button type="button" id="searchEnrichSelected" class="btn-control-library">{% trans "Save & enrich" %}</button>
                                        <!-- Slice 11 (old-direct unification):
                                             hub's header downloads PDFs for
                                             the checked rows (OA only). -->
                                        <button type="button" id="searchDownloadPdfs" class="btn-control-library" title="{% trans "Download open-access PDFs for the selected results" %}">{% trans "PDFs" %}</button>
                                        <span id="searchBulkStatus" class="search-bulk-status" role="status"></span>
                                    </div>
                                </div>
                                <div class="graph-card__body" id="searchResultsContent"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Library Tab: the user's local library, listed here with a
                     contextual (per-paper) Enrichment action. Enrichment is an
                     operation ON a library item (#106), not a top-level tab
                     (#105 kept it off the nav). -->
                <div id="tab-library" class="tab-panel" role="tabpanel" aria-labelledby="scholar-tab-library" tabindex="0">
                    <div class="citation-graph-container">
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Library" %}</span>
                                <small id="libraryStats" class="card-subtitle"></small>
                            </div>
                            <div class="graph-card__body">
                                <p class="graph-description">
                                    {% blocktrans %}Your papers, stored locally. Use <strong>Enrich</strong>
                                    to fill in metadata (abstract, citations, impact
                                    factor) from the databases, or
                                    <strong>Import</strong> BibTeX and
                                    <strong>Export</strong> your library.{% endblocktrans %}
                                </p>
                                <!-- Import / Export (#106 / L327): library-level
                                     operations, thin wrappers over the package's
                                     BibTeX handler + formatter. -->
                                <div class="library-io">
                                    <label class="library-io__label" for="libraryExportFormat">{% trans "Export" %}</label>
                                    <select id="libraryExportFormat" class="form-select library-io__select">
                                        <option value="bibtex" selected">{% trans "BibTeX (.bib)" %}</option>
                                        <option value="ris">{% trans "RIS (.ris)" %}</option>
                                        <option value="endnote">{% trans "EndNote (.enw)" %}</option>
                                        <option value="csv">{% trans "CSV (.csv)" %}</option>
                                    </select>
                                    <button type="button" id="libraryExportBtn" class="btn-control-library">{% trans "Export" %}</button>
                                    <span class="library-io__sep"></span>
                                    <input type="file" id="libraryImportFile" class="library-io__file"
                                           accept=".bib,.bibtex,.txt" hidden>
                                    <button type="button" id="libraryImportBtn" class="btn-control-library">{% trans "Import BibTeX" %}</button>
                                </div>
                                <div id="libraryIoStatus" class="library-io__status"></div>
                                <!-- Slice 5 (old-direct unification): import
                                     preview-before-save. Hub previews parsed
                                     BibTeX (diff vs the library) before the
                                     save; the leaf renders the parsed entries
                                     with exists flags and confirms through
                                     the unchanged import flow. -->
                                <div id="libraryImportPreview" class="library-import-preview hidden">
                                    <h4 class="library-ext__title">{% trans "Import preview" %}</h4>
                                    <p class="library-ext__hint">{% trans "These entries will be added to your library. Entries already present are marked." %}</p>
                                    <div id="libraryImportEntries" class="library-import-preview__entries"></div>
                                    <div class="library-import-preview__actions">
                                        <button type="button" id="libraryImportConfirm" class="btn-control-library">{% trans "Confirm import" %}</button>
                                        <button type="button" id="libraryImportCancel" class="btn-control-library">{% trans "Cancel" %}</button>
                                    </div>
                                </div>
                                <!-- Project sync (parity slice 3c): the header
                                     picker selects the project (?project=
                                     navigation); the Library view shows the
                                     sync target and filters to filed papers.
                                     Chips are rendered by library.js from
                                     the existing /api/projects endpoint. -->
                                <div class="library-project">
                                    <span id="libraryProjectCurrent" class="library-project__current">{% trans "Project" %}</span>
                                    <span class="library-io__sep"></span>
                                    <div id="libraryProjectChips" class="library-project__chips"></div>
                                </div>
                                <!-- External imports (parity slice 3b): Zotero
                                     local-DB and Connected Papers reflection
                                     over the existing package backends (same
                                     thin-view class as the BibTeX
                                     import/export above). -->
                                <div class="library-ext">
                                    <h4 class="library-ext__title">{% trans "Zotero" %}</h4>
                                    <p class="library-ext__hint">
                                        {% trans "Import from your local Zotero database, or download the library as BibTeX for Zotero." %}
                                    </p>
                                    <div class="library-ext__row">
                                        <span id="zoteroStatus" class="library-ext__status">{% trans "Checking..." %}</span>
                                    </div>
                                    <div class="library-ext__controls">
                                        <label class="library-io__label" for="zoteroMode">{% trans "Import source" %}</label>
                                        <select id="zoteroMode" class="form-select library-io__select">
                                            <option value="all">{% trans "All papers" %}</option>
                                            <option value="collection">{% trans "By collection" %}</option>
                                            <option value="tags">{% trans "By tags" %}</option>
                                        </select>
                                        <select id="zoteroCollection" class="form-select library-io__select" hidden></select>
                                        <input type="text" id="zoteroTags" class="form-input library-ext__input"
                                               placeholder="{% trans "Tags, comma-separated" %}" hidden>
                                        <button type="button" id="zoteroImportBtn" class="btn-control-library">{% trans "Import from Zotero" %}</button>
                                        <button type="button" id="zoteroExportBtn" class="btn-control-library">{% trans "Download BibTeX for Zotero" %}</button>
                                    </div>
                                    <div id="zoteroIoStatus" class="library-io__status"></div>
                                </div>
                                <div class="library-ext">
                                    <h4 class="library-ext__title">{% trans "Connected Papers" %}</h4>
                                    <p class="library-ext__hint">
                                        {% trans "Import a Connected Papers graph by seed paper." %}
                                        {% trans "Find paper IDs at semanticscholar.org" %}
                                    </p>
                                    <div class="library-ext__row">
                                        <span id="cpStatus" class="library-ext__status">{% trans "Checking..." %}</span>
                                    </div>
                                    <div class="library-ext__controls">
                                        <label class="library-io__label" for="cpPaperId">{% trans "Semantic Scholar paper ID" %}</label>
                                        <input type="text" id="cpPaperId" class="form-input library-ext__input"
                                               placeholder="{% trans "40-char SHA or DOI" %}">
                                        <button type="button" id="cpImportBtn" class="btn-control-library">{% trans "Import Graph" %}</button>
                                    </div>
                                    <div id="cpIoStatus" class="library-io__status"></div>
                                </div>
                                <!-- Filter: the Library list's empty state has a
                                     FILTERED variant ("no papers match"), which
                                     is unreachable without a real filter control
                                     (review blocker 2). Filtering happens in
                                     /api/library?q= (server-side, over the same
                                     MASTER metadata the list shows). -->
                                <div class="library-filter">
                                    <label class="form-label" for="libraryFilter">{% trans "Filter your library" %}</label>
                                    <input type="search"
                                           id="libraryFilter"
                                           class="form-input library-filter__input"
                                           placeholder="{% trans "Title, author, or DOI" %}"
                                           autocomplete="off">
                                    <button type="button"
                                            id="libraryFilterClear"
                                            class="btn-control-library hidden">{% trans "Clear filters" %}</button>
                                    <!-- Slice 4b (old-direct unification): hub
                                         sorts the library list from the
                                         toolbar; the leaf re-renders the
                                         loaded rows client-side. -->
                                    <label class="form-label" for="librarySort">{% trans "Sort" %}</label>
                                    <select id="librarySort" class="form-select" aria-label="{% trans "Sort library" %}">
                                        <option value="relevance" selected>{% trans "Relevance" %}</option>
                                        <option value="title-asc">{% trans "Title (A-Z)" %}</option>
                                        <option value="title-desc">{% trans "Title (Z-A)" %}</option>
                                        <option value="year-desc">{% trans "Year (newest)" %}</option>
                                        <option value="year-asc">{% trans "Year (oldest)" %}</option>
                                        <option value="importance-desc">{% trans "Importance (highest)" %}</option>
                                        <option value="importance-asc">{% trans "Importance (lowest)" %}</option>
                                    </select>
                                </div>
                                <!-- CSRF: emitted by the standard {% csrf_token %}
                                     tag. Inert standalone (no CsrfViewMiddleware,
                                     value empty); when the mounted hub enables
                                     CSRF, it carries the real token that the
                                     Library Import POST sends as X-CSRFToken. We
                                     deliberately do NOT @csrf_exempt the view. -->
                                {% csrf_token %}
                                <div id="libraryLoading" class="graph-loading hidden">
                                    <div class="loading-spinner">
                                        <div class="spinner-ring"></div>
                                        <div class="spinner-ring"></div>
                                        <div class="spinner-ring"></div>
                                    </div>
                                    <div class="loading-text">{% trans "Loading your library..." %}</div>
                                </div>
                                <div id="libraryError" class="graph-error hidden">
                                    <p id="libraryErrorMessage">{% trans "An error occurred" %}</p>
                                    <button class="btn-build"
                                            onclick="document.getElementById('libraryError').classList.add('hidden')">
                                        {% trans "Dismiss" %}
                                    </button>
                                    <button id="libraryRetryBtn" class="btn-build">
                                        {% trans "Retry" %}
                                    </button>
                                </div>
                                <div id="libraryList" class="library-list"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Citation Graph Tab (demoted: no longer the default) -->
                <div id="tab-graph" class="tab-panel" role="tabpanel" aria-labelledby="scholar-tab-graph" tabindex="0">
                    <div class="citation-graph-container">
                        <!-- Input Form -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Build Citation Network" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <p class="graph-description">
                                    {% trans "Start with a DOI. Find one by title, topic, or keywords in Search or your Library, then build an interactive citation graph of related papers." %}
                                </p>
                                <form id="graphForm" class="graph-form">
                                    <div class="form-row">
                                        <div class="form-group--doi">
                                            <label class="form-label" for="doiInput">{% trans "DOI" %}</label>
                                            <div class="input-wrapper">
                                                <input type="text"
                                                       id="doiInput"
                                                       class="form-input"
                                                       required
                                                       aria-describedby="graphSeedHelp"
                                                       placeholder="e.g. 10.1038/s41586-020-2008-3">
                                                <button type="submit" class="btn-build">{% trans "Build Graph" %}</button>
                                            </div>
                                            <small id="graphSeedHelp">{% trans "Paste the DOI for one seed paper; titles and keywords belong in Search." %}</small>
                                        </div>
                                        <div class="form-group--options">
                                            <label class="form-label" for="topN">{% trans "Max papers in graph" %}</label>
                                            <select id="topN" class="form-select" aria-label="Maximum papers in citation graph">
                                                <option value="10">10</option>
                                                <option value="20" selected>20</option>
                                                <option value="30">30</option>
                                                <option value="50">50</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Seed from your Library (old-direct parity, slice
                             3a): the graph builds from a typed DOI above OR
                             a library paper here. The picker lists library
                             papers carrying a DOI; clicking one seeds the
                             build directly (hub _GraphInputHandler).
                             Populated lazily by citation-graph.js from the
                             EXISTING /api/library endpoint -- no new
                             backend. -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Seed from your Library" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <div id="graphLibrarySeed" class="graph-library-seed">
                                    <p class="empty-message">{% trans "Loading your library…" %}</p>
                                </div>
                            </div>
                        </div>
                        <!-- Saved graphs (old-direct unification, slice 9):
                             hub's graph page saves/loads/deletes graphs; the
                             leaf backend ships the same endpoints (parity
                             slice 1) with no UI. Recipes rebuild from the
                             seed DOI through the existing network endpoint --
                             no new backend. -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Saved graphs" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <div id="graphSavedBar" class="graph-saved-bar">
                                    <input type="text"
                                           id="graphSaveName"
                                           class="form-input graph-saved-bar__input"
                                           placeholder="{% trans "Graph name" %}"
                                           maxlength="200">
                                    <button type="button" id="graphSaveBtn" class="btn-control-library">{% trans "Save current graph" %}</button>
                                </div>
                                <div id="graphSavedStatus" class="library-io__status" role="status"></div>
                                <div id="graphSavedList" class="graph-saved-list"></div>
                            </div>
                        </div>
                        <!-- How It Works (old-direct parity, slice 3a): the
                             three relatedness signals the graph renders.
                             Static explainer, translated like every other
                             label (JA rule). -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "How It Works" %}</span>
                            </div>
                            <div class="graph-card__body">
                                <div class="info-list">
                                    <div class="info-item">
                                        <div>
                                            <strong>{% trans "Bibliographic Coupling" %}</strong>
                                            <p>{% trans "Papers sharing common references" %}</p>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div>
                                            <strong>{% trans "Co-citation" %}</strong>
                                            <p>{% trans "Papers frequently cited together" %}</p>
                                        </div>
                                    </div>
                                    <div class="info-item">
                                        <div>
                                            <strong>{% trans "Direct Citations" %}</strong>
                                            <p>{% trans "Papers citing or cited by the seed" %}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Loading -->
                        <div id="graphLoading" class="graph-loading hidden">
                            <div class="loading-spinner">
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                                <div class="spinner-ring"></div>
                            </div>
                            <div class="loading-text">{% trans "Building citation network... This may take a moment." %}</div>
                        </div>
                        <!-- Error -->
                        <div id="graphError" class="graph-error hidden">
                            <p id="graphErrorMessage">{% trans "An error occurred" %}</p>
                            <button class="btn-build"
                                    onclick="document.getElementById('graphError').classList.add('hidden')">
                                {% trans "Dismiss" %}
                            </button>
                            <button id="graphRetryBtn" class="btn-build">
                                {% trans "Retry" %}
                            </button>
                        </div>
                        <!-- Visualization -->
                        <div id="graphVisualization" class="hidden">
                            <div class="graph-card graph-card--full">
                                <div class="graph-card__header">
                                    <span class="graph-card__title">
                                        <span id="graphTitle">{% trans "Citation Network" %}</span>
                                        <small id="graphStats"
                                               style="font-weight: 400;
                                                      color: var(--text-muted);
                                                      margin-left: 12px"></small>
                                    </span>
                                    <div class="graph-controls">
                                        <button id="fitViewBtn" class="btn-control" title="{% trans "Fit to view" %}">&#8689;</button>
                                        <button id="resetZoomBtn" class="btn-control" title="{% trans "Reset zoom" %}">&#8634;</button>
                                        <button id="downloadSvgBtn" class="btn-control" title="{% trans "Download SVG" %}">&#8681;</button>
                                    </div>
                                </div>
                                <div class="graph-card__body" style="padding: 0; position: relative;">
                                    <div id="graphCanvas" class="graph-canvas-wrapper"></div>
                                    <div id="nodeDetailsPanel" class="node-details-panel hidden"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Related Papers -->
                        <div id="relatedPapersList" class="hidden related-papers-section">
                            <div class="graph-card">
                                <div class="graph-card__header">
                                    <span class="graph-card__title">{% trans "Related Papers" %}</span>
                                </div>
                                <div class="graph-card__body" id="relatedPapersContent"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            <!-- Status strip (right edge): LED dots + expandable detail.
                Old Sources style (hub scholar_base.html health LEDs synced
                with an expandable panel): one dot per backend, the translated
                detail/fix paragraph inside <details>. Collapsible per the
                operator layout rule (rightmost column, minimizable). -->
            <aside class="app-status-strip" data-status-strip>
                <button type="button" class="status-strip-toggle" data-status-strip-toggle
                        aria-expanded="true"
                        aria-label="{% trans "Collapse status panel" %}"
                        data-label-collapse="{% trans "Collapse status panel" %}"
                        data-label-expand="{% trans "Expand status panel" %}">&raquo;</button>
                <div class="status-strip__body">
                    <div class="status-strip__title">{% trans "Details" %}</div>
                    <!-- Graph interaction hints: shown only while the Graph
                        tab is active (operator 2026-10-17: no left sidebar
                        on any tab, Details集約). Visibility is driven by
                        syncGraphHint in app.js via [data-graph-hint]. -->
                    <div class="sidebar-section graph-controls-hint" data-graph-hint>
                        <div class="sidebar-section__header">
                            <span class="sidebar-section__title">{% trans "Graph Controls" %}</span>
                        </div>
                        <div class="sidebar-section__content"
                             style="font-size: 11px;
                                    color: var(--text-muted)">
                            <div style="margin-bottom: 6px;">
                                <kbd style="background: var(--bg-tertiary);
                                            border: 1px solid var(--border-default);
                                            padding: 1px 4px;
                                            font-size: 10px">{% trans "Scroll" %}</kbd> {% trans "Zoom" %}
                            </div>
                            <div style="margin-bottom: 6px;">
                                <kbd style="background: var(--bg-tertiary);
                                            border: 1px solid var(--border-default);
                                            padding: 1px 4px;
                                            font-size: 10px">{% trans "Drag" %}</kbd> {% trans "Pan" %}
                            </div>
                            <div>
                                <kbd style="background: var(--bg-tertiary);
                                            border: 1px solid var(--border-default);
                                            padding: 1px 4px;
                                            font-size: 10px">{% trans "Click" %}</kbd> {% trans "Select node" %}
                            </div>
                        </div>
                    </div>
                    <details class="status-expand" open>
                        <summary class="status-expand__summary" aria-label="{% trans "Service Status" %}">
                            <span class="status-leds">
                                <span class="status-led" data-source="crossref"
                                      data-status="{% if api_available %}ready{% else %}unavailable{% endif %}"
                                      title="CrossRef API — {% if api_available %}{% trans "Configured" %}{% else %}{% trans "Not configured" %}{% endif %}"></span>
                                <span class="status-led" data-source="graph" data-status="checking"
                                      title="{% trans "Citation Graph" %} — {% trans "Checking..." %}"></span>
                            </span>
                        </summary>
                        <div class="status-expand__body">
                            <div class="status-row">
                                <span class="status-row__label">{% trans "CrossRef API" %}</span>
                                {% if api_available %}
                                    <span class="status-indicator status-healthy">&#9679; {% trans "Configured" %}</span>
                                {% else %}
                                    <span class="status-indicator status-warning">&#9679; {% trans "Not configured" %}</span>
                                {% endif %}
                            </div>
                            <div class="status-row">
                                <span class="status-row__label">{% trans "Citation Graph" %}</span>
                                <div id="serviceStatus">
                                    <span class="status-indicator status-checking">&#9679; {% trans "Checking..." %}</span>
                                </div>
                            </div>
                        </div>
                    </details>
                </div>
            </aside>
        </div>
        <!-- Scripts (order matters: ForceSimulation < GraphRenderer < citation-graph) -->