{% load i18n scitex_project_picker static %}
        {# Shared AppHeader primitive (data-stx-app-header mount), like every #}
        {# other leaf — replaces the hand-rolled header row. The wrapper keeps #}
        {# the `.scholar-app-header` scope for the operator-ruled version-pill #}
        {# subdue (2026-10-20, reversible); it is a div, never a <header>. #}
        <div class="scholar-app-header">
          <div data-stx-app-header
               data-app-title="{% translate "SciTeX Scholar" %}"
               {% if scholar_version %}data-app-version="{{ scholar_version }}"{% endif %}></div>
          {# app-header.css + the prebuilt mount module load page-wide from #}
          {# workspace_assets (head/scripts stages), not from this fragment: #}
          {# the fragment must stay pure content (see the native-render test). #}
          {% include "scholar/_project_picker.html" %}
          {# header-picker.js likewise loads from the scripts stage, after #}
          {# the mount module, so its DOMContentLoaded listener runs later. #}
        </div>
        <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. -->
            <!-- Operator 2026-10-25 (brief-04): the columns ARE the shared
                scitex-sdk panes element (data-stx-panes / data-stx-pane +
                SDK panes.css/js, see workspace_assets) — not leaf-owned
                layout divs, and not the panes template tag either (it
                emits link/script mid-fragment, which the native-render
                purity test forbids). layout="app" keeps scholar's own
                desktop geometry; the panes contract owns the phone tab
                bar + pane switching. -->
            <div class="stx-panes" data-stx-panes="scholar" data-stx-panes-layout="app" data-stx-active="main">
            <main class="app-main" data-stx-pane="main" data-stx-label="{% trans "Browse" %}" data-stx-order="1">
                <!-- 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>
                                <!--
                                    Old-direct U1: the `?` syntax-help
                                    affordance. Toggles the panel below,
                                    populated from GET api/search/syntax-help
                                    by search.js (STX_MOUNT-joined). The
                                    button is a bare `?` so it needs no
                                    translation; the panel heading reuses the
                                    single "Search syntax help" msgid.
                                -->
                                <button type="button" id="searchSyntaxToggle" class="syntax-help-toggle" aria-expanded="false" aria-controls="searchSyntaxPanel" title="{% trans "Search syntax help" %}">?</button>
                            </div>
                            <div id="searchSyntaxPanel" class="syntax-help-panel" hidden>
                                <h3 class="syntax-help-panel__title">{% trans "Search syntax help" %}</h3>
                                <dl id="searchSyntaxList" class="syntax-help-panel__list"></dl>
                                <div id="searchSyntaxExamples" class="syntax-help-panel__examples"></div>
                            </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 form-row--query">
                                        <div class="form-group--query">
                                            <label class="form-label" for="searchInput">{% trans "Query" %}</label>
                                            <!--
                                                Old-direct parity: the query
                                                is a multi-line textarea
                                                (not a single-line input) so
                                                long boolean queries stay
                                                visible. The Ctrl+K badge and
                                                the `?` help sit inside the
                                                field, old-direct style; the
                                                placeholder teaches the
                                                syntax. Enter (no Shift)
                                                submits; Shift+Enter adds a
                                                line (search.js).
                                            -->
                                            <div class="input-wrapper input-wrapper--query">
                                                <span class="query-field">
                                                    <textarea id="searchInput"
                                                              class="form-input form-input--query"
                                                              rows="3"
                                                              placeholder="{% blocktrans %}Search papers from databases
e.g. hippocampus -a Smith -ymin 2020 -ymax 2024{% endblocktrans %}"></textarea>
                                                    <span class="query-field__tools">
                                                        <span class="query-shortcut-hint"><kbd>Ctrl</kbd>+<kbd>K</kbd></span>
                                                        <button type="button" id="searchSyntaxToggle" class="syntax-help-toggle" aria-expanded="false" aria-controls="searchSyntaxPanel" title="{% trans "Search syntax help" %}">?</button>
                                                    </span>
                                                </span>
                                                <button type="submit" class="btn-primary btn-primary--query">{% 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">20</option>
                                                <option value="50" selected>50</option>
                                                <option value="100">100</option>
                                                <option value="200">200</option>
                                                <option value="500">500</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                                <!-- Advanced lives in the Details strip
                                    ([data-search-hint], operator 2026-10-22):
                                    query-syntax help, search source (mode),
                                    the Sources grid, the Filters grid, the
                                    "Ignore cache" control, and the CrossRef
                                    API status. -->
                            </div>
                        </div>
                        <!-- Old-direct parity 2026-10-24: the action toolbar
                            (sorter, source filter, abstract toggle, export,
                            bulk pills) + the pipeline stepper live in their
                            own row ABOVE the results and stay visible
                            pre-search, like old-direct's toolbar row.
                            search.js addresses every control by id, so the
                            relocation changes no wiring. -->
                        <div class="search-toolbar-row">
                            <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-citations control --
                                    U4 adds the RIS/EndNote format choice
                                    (hub bulk shape) to the BibTeX-only
                                    client Blob path. 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>
                                <select id="searchExportFormat" class="form-select" aria-label="{% trans "Citation format" %}">
                                    <option value="bibtex" selected>{% trans "BibTeX (.bib)" %}</option>
                                    <option value="ris">{% trans "RIS (.ris)" %}</option>
                                    <option value="endnote">{% trans "EndNote (.enw)" %}</option>
                                </select>
                                <button type="button" id="searchExportBibtex" class="btn-control-library" title="{% trans "Download citations for the selected results" %}">{% trans "Export" %}</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>
                                    <!-- Old-direct parity (brief-05): seed the
                                         graph tab from checked works --
                                         single DOI builds directly, several
                                         build a multi-seed network. -->
                                    <button type="button" id="searchGraphSelected" class="btn-control-library" title="{% trans "Build a citation graph from the selected results" %}">{% trans "Graph" %}</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>
                            <!-- Old-direct parity slice 2: pipeline stepper
                                (Ready -> Searching -> Done + timer). Driven
                                by search.js around the /api/search fetch;
                                thin interface only, no logic leaves the
                                CUI. Right-aligned in the toolbar row,
                                old-direct style. -->
                            <span class="search-stepper" id="searchStepper">
                                <span class="stepper-circle active" id="searchStep1">1</span><span class="stepper-text">{% trans "Ready" %}</span>
                                <span class="stepper-line" id="searchLine1"></span>
                                <span class="stepper-circle" id="searchStep2">2</span><span class="stepper-text" id="searchStepText2">{% trans "Searching" %}</span>
                                <span class="stepper-line" id="searchLine2"></span>
                                <span class="stepper-circle" id="searchStep3">3</span><span class="stepper-text" id="searchStepText3">{% trans "Done" %}</span>
                                <span class="stepper-timer" id="searchTimer"></span>
                            </span>
                        </div>
                        <!-- Pre-search empty state (operator 2026-10-22: no dead
                            void below the form). search.js hides it on
                            submit next to hide(results); zero-result
                            searches keep their own in-results empty-message.
                            Reuses the shared .tab-placeholder shape. -->
                        <div id="searchEmptyState" class="tab-placeholder">
                            <div>
                                <h3>{% trans "Run a search to see results" %}</h3>
                                <p>{% trans "Enter a query above — papers from OpenAlex, Crossref, PubMed and more will appear here." %}</p>
                            </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>
                        <!-- Queue status (old-direct U2 unification): hub
                            progressive_loading panel shape -- per-engine
                            status + counts. Hidden until a search runs;
                            search.js shows it on submit and fills it from
                            metadata.engine_events on response. Monotone +
                            --accent only (operator color discipline). -->
                        <div id="searchQueuePanel" class="search-queue" hidden>
                            <div class="search-queue__head">
                                <span class="search-queue__title">{% trans "Search Engine Queue Status" %}</span>
                                <span class="search-queue__totals">
                                    <span>{% trans "Active searches" %}: <strong id="searchQueueActive">0</strong></span>
                                    <span>{% trans "Results" %}: <strong id="searchQueueTotal">0</strong></span>
                                </span>
                            </div>
                            <div id="searchQueueEngines" class="search-queue__engines"></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>
                                <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 the per-paper
                                    <strong>Enrich</strong> action 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 + Zotero + Connected Papers
                                    live in the Details strip
                                    ([data-library-hint], operator 2026-10-22);
                                    shown only while the Library tab is
                                    active. Control ids and wiring unchanged. -->
                                <!-- 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 target follows the header
                                    picker's ?project= (operator 2026-10-23:
                                    header picker is the single selection
                                    control; no selector in Details). -->
                                <!-- 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>
                <!-- 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">
                        <!-- Operator brief-05: the Graph tab is seed-from-works
                             plus a Graph Library. Seeds come from the
                             Search/Library tabs (per-row + bulk actions
                             dispatch scholar:build-graph); this card only
                             lists library works with DOIs for direct
                             seeding. Saved networks live in the Graph
                             Library card below (api/graphs/* CRUD). -->
                        <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>
                        <!-- Operator brief-05: Graph Library — the saved
                            citation networks (name + seed + created).
                            Save captures the current build; Load rebuilds
                            it; Rename edits inline; Delete is two-click
                            (arm, then confirm). All verbs are the thin
                            api/graphs/* CRUD from 1.24.0. -->
                        <div class="graph-card">
                            <div class="graph-card__header">
                                <span class="graph-card__title">{% trans "Graph Library" %}</span>
                                <small id="graphLibraryCount" class="card-subtitle"></small>
                            </div>
                            <div class="graph-card__body">
                                <div class="library-filter">
                                    <label class="form-label" for="graphSaveName">{% trans "Save current graph" %}</label>
                                    <input type="text"
                                           id="graphSaveName"
                                           class="form-input library-filter__input"
                                           placeholder="{% trans "Name this network…" %}"
                                           autocomplete="off">
                                    <button type="button"
                                            id="graphSaveBtn"
                                            class="btn-control-library">{% trans "Save graph" %}</button>
                                </div>
                                <div id="graphLibraryStatus" class="library-io__status" role="status"></div>
                                <div id="graphSavedList" class="library-list"></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">
                                        <!-- Old-direct U5: step zoom (hub
                                            zoomIn/zoomOut, factor 1.4). -->
                                        <button id="zoomOutBtn" class="btn-control" title="{% trans "Zoom out" %}" aria-label="{% trans "Zoom out" %}">&#8722;</button>
                                        <button id="zoomInBtn" class="btn-control" title="{% trans "Zoom in" %}" aria-label="{% trans "Zoom in" %}">+</button>
                                        <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>
                                        <!-- Old-direct U6: PNG sibling (hub
                                            downloadPngBtn). -->
                                        <button id="downloadPngBtn" class="btn-control btn-control--text" title="{% trans "Download PNG" %}">PNG</button>
                                    </div>
                                </div>
                                <div class="graph-card__body" style="padding: 0; position: relative;">
                                    <div id="graphCanvas" class="graph-canvas-wrapper"></div>
                                    <!-- The node details sheet lives in the
                                        Details strip ([data-graph-hint]);
                                        citation-graph.js addresses it by id. -->
                                </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 data-stx-pane="details" data-stx-label="{% trans "Details" %}" data-stx-order="2">
                <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>
                    <!-- Databases: the Search tab's source/syntax/status
                        controls (operator 2026-10-22: Advanced belongs in
                        the Details space). Shown only while the Search tab
                        is active; visibility via syncStripHints in app.js.
                        Control ids and wiring unchanged. -->
                    <!-- Operator 2026-10-24 (old-direct parity, flat
                        Details): ONE section, no Databases wrapper, no
                        Advanced <details>. Sources + Filters + mode +
                        cache + status render as flat rows directly under
                        the section header -- theleaf keeps old-direct's
                        content (11 sources, 6 filters, mode, ignore-cache,
                        status) with one nest level instead of three.
                        Control ids and wiring unchanged. -->
                    <div class="sidebar-section sidebar-section--flat" data-search-hint>
                        <div class="sidebar-section__header" role="button" tabindex="0" aria-expanded="true">
                            <span class="sidebar-section__title">{% trans "Search" %}</span>
                            <span class="sidebar-section__chevron" aria-hidden="true"></span>
                        </div>
                        <div class="sidebar-section__content sidebar-section__content--flat">
                            <p class="sidebar-section__summary" id="searchStripSummary">{% trans "No search yet." %}</p>
                            <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" title="{% trans "All sources (parallel)" %}">
                                    <option value="parallel" selected>{% trans "All sources (parallel)" %}</option>
                                    <option value="single">{% trans "Single source" %}</option>
                                </select>
                            </div>
                            <div class="search-advanced__row search-advanced__row--stack">
                                <span class="form-label" id="searchSourcesLabel">{% trans "Sources" %}</span>
                                <div class="search-sources-grid search-sources-grid--tiered" id="searchSourcesGrid" role="group" aria-labelledby="searchSourcesLabel">
<div class="source-tier">
<p class="source-tier__label">{% trans "Local (fast, unlimited)" %}</p>
<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)
                                            
                                                <small class="source-rate" title="Rate limit">&#8734;</small>
                                            </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">
                                                OpenAlex (SciTeX)
                                            
                                                <small class="source-rate" title="Rate limit">&#8734;</small>
                                            </label>
</div>
<div class="source-tier">
<p class="source-tier__label">{% trans "External APIs (slower, limited results)" %}</p>
<label class="search-advanced__check" title="{% trans "NCBI PubMed — biomedical literature" %}">
                                                <input type="checkbox" class="source-toggle" value="pubmed">
                                                PubMed
                                            
                                                <small class="source-rate" title="Rate limit">3/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "arXiv — physics, mathematics, and computer science preprints" %}">
                                                <input type="checkbox" class="source-toggle" value="arxiv">
                                                arXiv
                                            
                                                <small class="source-rate" title="Rate limit">3/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "Semantic Scholar — AI-powered academic search" %}">
                                                <input type="checkbox" class="source-toggle" value="semantic">
                                                Semantic Scholar
                                            
                                                <small class="source-rate" title="Rate limit">1/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "Crossref — DOI metadata registry" %}">
                                                <input type="checkbox" class="source-toggle" value="crossref">
                                                Crossref
                                            
                                                <small class="source-rate" title="Rate limit">50/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "OpenAlex — open catalog of scholarly works" %}">
                                                <input type="checkbox" class="source-toggle" value="openalex">
                                                OpenAlex
                                            
                                                <small class="source-rate" title="Rate limit">10/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "bioRxiv — biology preprint server" %}">
                                                <input type="checkbox" class="source-toggle" value="biorxiv">
                                                bioRxiv
                                            
                                                <small class="source-rate" title="Rate limit">1/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "DOAJ — open-access journals" %}">
                                                <input type="checkbox" class="source-toggle" value="doaj">
                                                DOAJ
                                            
                                                <small class="source-rate" title="Rate limit">5/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "PLOS — open-access science journals" %}">
                                                <input type="checkbox" class="source-toggle" value="plos">
                                                PLOS
                                            
                                                <small class="source-rate" title="Rate limit">5/s</small>
                                            </label>
<label class="search-advanced__check" title="{% trans "PMC — open-access full-text archive" %}">
                                                <input type="checkbox" class="source-toggle" value="pmc">
                                                PMC
                                            
                                                <small class="source-rate" title="Rate limit">3/s</small>
                                            </label>
</div>
<p class="source-notice">Rate limits shown per source. Your email is used for API requests to receive higher rate limits.</p>
                                                                        <p class="search-sources-hint">{% trans "Crossref (SciTeX) is checked by default — fast, unlimited. Check more sources to widen the search." %}</p>
                            </div>
                            <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">
<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>
                            <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>
                    </div>
                    <!-- Library ops: Import / Export, project sync target,
                        Zotero, Connected Papers (operator 2026-10-22: the
                        Library tab's controls belong in the Details space).
                        Shown only while the Library tab is active. The paper
                        list, filter, and import preview stay in the main
                        area. Control ids and wiring unchanged. -->
                    <div class="sidebar-section hidden" data-library-hint>
                        <div class="sidebar-section__header" role="button" tabindex="0" aria-expanded="true">
                            <span class="sidebar-section__title">{% trans "Library" %}</span>
                            <span class="sidebar-section__chevron" aria-hidden="true"></span>
                        </div>
                        <div class="sidebar-section__content">
                            <p class="sidebar-section__summary" id="libraryStripSummary">{% trans "Library not loaded yet." %}</p>
                            <!-- Operator 2026-10-23: no project selector in
                                 Details — the header picker is the single
                                 selection control. -->
                            <!-- 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>
                                <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>
                            <!-- 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>
                        </div>
                    </div>
                    <!-- Node details + graph controls: shown only while the
                        Graph tab is active (operator 2026-10-17: no left
                        sidebar on any tab, Details集約; operator
                        2026-10-22: the graph details belong in the Details
                        space). Visibility is driven by syncStripHints in
                        app.js via [data-graph-hint]. The node sheet is
                        addressed by id from citation-graph.js, so location
                        is free. -->
                    <div class="sidebar-section graph-controls-hint hidden" data-graph-hint>
                        <div class="sidebar-section__header" role="button" tabindex="0" aria-expanded="true">
                            <span class="sidebar-section__title">{% trans "Graph Controls" %}</span>
                            <span class="sidebar-section__chevron" aria-hidden="true"></span>
                        </div>
                        <p class="sidebar-section__summary" id="graphStripSummary">{% trans "No graph built yet." %}</p>
                        <!-- Operator 2026-10-23: no shared status expander
                             (it duplicated the per-tab status rows). The
                             graph backend status lives in the Graph tab's
                             own section; checkServiceHealth keeps rendering
                             into #serviceStatus here. -->
                        <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 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>
                        <!-- The node details sheet (U7): clicking a graph
                            node renders the paper details here, in the
                            Details space, instead of over the canvas. -->
                        <div id="nodeDetailsPanel" class="node-details-panel hidden" role="dialog" aria-live="polite"></div>
                    </div>
                </aside>
            </div>
        </div>
        <!-- Scripts (order matters: ForceSimulation < GraphRenderer < citation-graph) -->