gramene-search 2.13.2 → 2.13.4

package/dist/index.css

@@ -3279,18 +3279,20 @@ code.fasta {
 
 .attrtable-rot-header {
   cursor: pointer;
-  justify-content: center;
-  align-items: center;
   width: 100%;
   height: 100%;
-  display: flex;
+  position: relative;
   overflow: hidden;
 }
 
 .attrtable-rot-header > span {
+  transform-origin: 0 100%;
   white-space: nowrap;
   font-size: 10px;
   line-height: 1;
+  position: absolute;
+  bottom: 3px;
+  left: 13px;
   transform: rotate(-90deg);
 }
 
@@ -3298,6 +3300,22 @@ code.fasta {
   padding: 0 !important;
 }
 
+.attrtable-aggrid .ag-header-cell-resize:after {
+  display: none;
+}
+
+.attrtable-aggrid .ag-cell, .attrtable-aggrid .ag-header-cell {
+  border-right: 1px solid #c6ccd2;
+}
+
+.attrtable-aggrid .attrtable-organ-cell, .attrtable-aggrid .attrtable-organ-header {
+  border-right: none;
+}
+
+.attrtable-aggrid .attrtable-organ-cell.attrtable-organ-last, .attrtable-aggrid .attrtable-organ-header.attrtable-organ-last {
+  border-right: 1px solid #c6ccd2;
+}
+
 .attrtable-aggrid.attrtable-tall-header .ag-header-cell-label {
   align-items: flex-end;
   padding-bottom: 3px;

package/dist/index.css.map

@@ -1 +1 @@
-{"mappings":"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","sources":["ff42af53a3828e08","src/components/styles.css","src/components/results/genes.css","msa.less","tree.less","src/components/results/details/tree-view.css","node_modules/react-simple-tree-menu/src/sass/main.scss","src/components/results/details/VEP.css","src/components/results/details/sequences.css","main.less","src/components/results/expression.css","src/components/exporter/styles.css","src/components/exprViz/styles.css","src/components/attrTable/styles.css","src/components/results/ontologyEnrichment.css"],"sourcesContent":["@import \"5abb1db407612521\";\n@import \"1caf78728b2f5137\";\n@import \"2166a150e9f31214\";\n@import \"938d6be3f57789df\";\n@import \"996096824b9f7d5a\";\n@import \"aa165d1be5d1c755\";\n@import \"41a1dcf3bc8b5377\";\n@import \"c52016833805a9f9\";\n@import \"6f643ac0480217ea\";\n@import \"c6576577b854e1eb\";\n@import \"b02f188cedfc7aaa\";\n@import \"c165ffd6f0d0851d\";\n@import \"f46a3e1dc6586595\";\n@import \"0d0d5189ac663932\";\n","/* ── Main search layout: sidebar + content ──────────────────────────────── */\n.search-views-layout {\n    display: flex;\n    align-items: flex-start;\n}\n\n.search-views-content {\n    flex: 1 1 0;\n    min-width: 0; /* prevent flex children from overflowing */\n}\n\n.gramene-sidebar,\n.sorghumbase-sidebar {\n    flex: 0 0 250px;\n    position: sticky;\n    top: 0;\n    align-self: flex-start;\n    padding-left: 8px;\n    padding-right: 8px;\n    padding-bottom: 8px;\n}\n\n.gramene-sidebar {\n    background-color: #557b74;\n}\n.sorghumbase-sidebar {\n    background-color: #a03e34;\n}\n\n/* ── Mobile: stack sidebar above content ────────────────────────────────── */\n@media (max-width: 767px) {\n    .search-views-layout {\n        flex-direction: column;\n    }\n    .gramene-sidebar,\n    .sorghumbase-sidebar {\n        flex: 0 0 auto;\n        position: static;\n        width: 100%;\n    }\n    .search-views-content {\n        width: 100%;\n    }\n}\n.gramene-auth-container,\n.sorghumbase-auth-container,\n.gramene-filter-container,\n.sorghumbase-filter-container {\n}\n.gramene-filter {\n    padding-left: 4px;\n    padding-right: 4px;\n    padding-bottom: 4px;\n    background-color: white;\n    font-size: 0.875rem; /* ~14px — explicit instead of 'small' keyword */\n}\n.gramene-filter span:hover {\n    font-weight:bolder;\n}\n.gramene-filter-AND {\n    background-color: #ffcd82;\n}\n.gramene-filter-OR {\n    background-color: #c5eeb9;\n}\n.gramene-filter-NOT {\n    border-left-color: #ff5354;\n    border-left-style: inset;\n    border-left-width: 4px;\n    padding-left: 4px;\n}\n.gramene-filter-operation {\n    text-align: center;\n    font-style: italic;\n}\n.gramene-filter-marked {\n    font-weight: bolder;\n    /*background-color: #feff96;*/\n}\n.gramene-filter-menu ul {\n    border-top-style: solid;\n    border-top-width: 2px;\n    padding-left: 0;\n}\n.gramene-filter-menu li {\n    display: block;\n    cursor: pointer;\n    padding: 8px 8px 8px 15px; /* vertical padding makes tap targets ~36px+ */\n}\n.gramene-filter-menu li:hover {\n    background-color: #feff96;\n}\n\n.gramene-view-header {\n    width: 100%;\n    display: flex;\n    flex-wrap: nowrap;\n    justify-content: space-evenly;\n    font-size: larger;\n    font-weight: bold;\n    background-color: #fff3a96e;\n    border-top: solid;\n    border-top-color: #557b74;\n    color: #a03e34;\n}\n\n.gramene-view-container {\n}\n.gramene-view {\n    padding-left: 0px;\n    padding-right: 10px;\n    margin-bottom: 0;\n    background-color: white;\n}\n.gramene-view-span-on {\n    padding-left: 5px;\n    cursor: pointer;\n    vertical-align: text-bottom;\n    color: #a03e34;\n}\n.gramene-view-span-off {\n    padding-left: 5px;\n    cursor: pointer;\n    vertical-align: text-bottom;\n}\n.gramene-view li {\n    display: block;\n    cursor: pointer;\n    padding-left: 5px;\n    border-left-style: inset;\n    border-left-width: 8px;\n    margin-bottom: 2px;\n}\n\n.gramene-view-on {\n    border-left-color: #40a0ff;\n    font-weight: bold;\n}\n.gramene-view-off {\n    border-left-color: #ff6d68;\n}\n.gramene-view-disabled {\n    color: darkgray;\n    border-left-color: #efefef;\n    cursor: default!important;\n}\n#gramene-suggestion button {\n    border-radius: .6rem;\n    line-height: 1;\n}\n#gramene-suggestion button:focus {\n    color: #fff;\n    background-color: #6c757d;\n    border-color: #6c757d;\n}\n\n/* ── Collapsible sidebar sections ─────────────────────────────────────── */\n.sidebar-section {\n    margin-bottom: 4px;\n}\n\n.sidebar-section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    padding: 2px 4px 2px 6px;\n    color: cornsilk;\n    user-select: none;\n    border-top: 3px solid;\n}\n\n/* Dark background + matching top border per site */\n.gramene-sidebar .sidebar-section-header {\n    background-color: #557b74;\n    border-top-color: #3d5b55;\n}\n.sorghumbase-sidebar .sidebar-section-header {\n    background-color: #a03e34;\n    border-top-color: #7a2f27;\n}\n\n.sidebar-section-header:hover {\n    background: rgba(255,255,255,0.1);\n}\n.gramene-sidebar .sidebar-section-header:hover {\n    background-color: #4a6d66;\n}\n.sorghumbase-sidebar .sidebar-section-header:hover {\n    background-color: #8c352d;\n}\n\n.sidebar-section-actions {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    color: cornsilk;\n}\n\n.sidebar-section-toggle {\n    font-size: 0.85rem;\n    font-weight: bold;\n}\n.sidebar-section-toggle svg {\n    stroke: currentColor;\n    stroke-width: 2;\n}\n\n.sidebar-section-body {\n    background-color: #fff3a9;\n    padding: 4px;\n}\n\n/* ── Mobile: compact sidebar when stacked at top ─────────────────────── */\n@media (max-width: 767px) {\n    /* Tighten sidebar padding */\n    .gramene-sidebar,\n    .sorghumbase-sidebar {\n        padding: 4px 8px;\n    }\n\n    /* Views: display as a compact inline flow */\n    .gramene-view {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 2px 8px;\n        padding: 2px 4px;\n    }\n    .gramene-view li {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 4px;\n        margin-bottom: 0;\n        font-size: 0.8rem;\n        border-left-width: 4px;\n    }\n\n    /* View header: smaller */\n    .gramene-view-header {\n        font-size: small;\n        padding: 2px 0;\n    }\n\n    /* Filters: compact */\n    .gramene-filter {\n        font-size: 0.8rem;\n        padding: 2px 4px;\n    }\n    .gramene-filter-menu li {\n        padding: 4px 4px 4px 10px;\n    }\n\n    /* Suggestion buttons: reasonable tap area */\n    #gramene-suggestion button {\n        padding: 0.35rem 0.6rem;\n        margin-bottom: 2px;\n        font-size: 0.8rem;\n    }\n\n    /* Prevent iOS zoom-on-focus (requires >= 16px) without forcing extra height */\n    #search-input {\n        font-size: 1rem;\n    }\n}\n\n/* ── Taxonomy modal tree ─────────────────────────────────────────────────── */\n.tax-tree            { margin-top: 8px; font-size: 14px; }\n.tax-node            { border-radius: 2px; }\n.tax-row             { display: flex; align-items: center; gap: 4px; padding: 2px 4px; }\n.tax-chevron         { cursor: pointer; width: 14px; display: inline-flex; align-items: center; }\n.tax-chevron-spacer  { display: inline-block; width: 14px; }\n.tax-label           { }\n.tax-label-internal  { font-weight: 600; }\n.tax-sep             { color: #888; font-weight: normal; }\n.tax-count           { color: #555; font-size: 12px; margin-left: 4px; }\n.tax-self-leaf       { margin-left: 8px; font-size: 12px; color: #444; display: inline-flex; align-items: center; gap: 2px; }\n\n.tax-ellipsis        { cursor: help; color: #666; }\n.tax-ellipsis-full   { display: none; }\n.tax-ellipsis:hover .tax-ellipsis-short { display: none; }\n.tax-ellipsis:hover .tax-ellipsis-full  { display: inline; color: #333; }\n\n.tax-search               { position: relative; margin: 8px 0; }\n.tax-search-input         { width: 100%; padding: 4px 8px; font-size: 14px;\n                            border: 1px solid #bbb; border-radius: 3px; }\n.tax-search-results       { position: absolute; left: 0; right: 0; top: 100%;\n                            max-height: 280px; overflow-y: auto; z-index: 10;\n                            background: white; border: 1px solid #bbb;\n                            border-top: none; border-radius: 0 0 3px 3px;\n                            box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\n.tax-search-hit           { padding: 4px 8px; cursor: pointer; font-size: 13px; }\n.tax-search-hit:hover,\n.tax-search-hit-active    { background: #e3ecff; }\n.tax-search-name          { font-weight: 600; }\n.tax-search-syn           { color: #777; font-style: italic; }\n.tax-search-rank          { color: #0366d6; font-size: 11px; text-transform: uppercase;\n                            margin-left: 4px; }\n.tax-search-count         { color: #555; font-size: 12px; }\n.tax-search-empty         { padding: 6px 8px; color: #777; font-style: italic; font-size: 13px; }\n\n.tax-node-highlight       { outline: 2px solid #ffc107;\n                            animation: taxFlash 1.6s ease-out; }\n@keyframes taxFlash {\n  0%   { background-color: #fff3cd; }\n  100% { background-color: transparent; }\n}\n\n\n",".visible-detail {\n    border: 1px solid #557B74;\n    padding: 6px 12px;\n}\n.detail {\n    margin-right: auto;\n    margin-left: auto;\n    padding-left: 15px;\n    padding-right: 15px;\n}\n.table {\n    width: 100%;\n    max-width: 100%;\n}\n.xrefs {\n    border-collapse: collapse;\n    border-spacing: 0;\n    border-color: grey;\n    table-layout: auto;\n    width: 100%;\n}\n/* Col 1 (PubMed link) and col 2 (Curation source): shrink to content */\ntable.xrefs th:nth-child(1),\ntable.xrefs td:nth-child(1),\ntable.xrefs th:nth-child(2),\ntable.xrefs td:nth-child(2) {\n    width: 1%;\n    white-space: nowrap;\n}\n/* Col 3 (Title/Description): fill remaining space */\ntable.xrefs th:nth-child(3),\ntable.xrefs td:nth-child(3) {\n    width: 100%;\n}\n/* Legacy column-width classes — kept for other tables that use them */\n.xref-name-col { white-space: nowrap; }\n.xref-value-col { }\n.xref-80-col { }\n.xref-70-col { }\n.xref-10-col { white-space: nowrap; }\n.xref-id-list {\n    padding-left: 0;\n    list-style: none;\n}\n.result-gene {\n    padding: 0.2em;\n    border: 5px solid white;\n}\n.result-gene:hover {\n    border-color: antiquewhite;\n}\n.gene-title {\n    /*padding-top:0.5em;*/\n}\n.gene-id {\n    /*white-space: nowrap;*/\n    color: black;\n}\n.gene-name {\n    color: #557B74;\n    margin-bottom: 0;\n}\n.gene-description {\n    margin-bottom: 0;\n}\n.gene-species {\n    white-space: nowrap;\n    font-style: italic;\n    font-size:small;\n    font-weight: bold;\n}\n.gene-synonyms {\n    font-size: small;\n}\n.gene-alt-ids {\n    font-size: small;\n    color: #6c757d;\n}\n.gene-extras {\n    border: dashed 1px blue;\n}\n.gene-panlink {\n    float: right;\n    margin-left: 0.5rem;\n    margin-bottom: 0.25rem;\n}\n.gene-panlink img {\n    height: 60px;\n    width: auto;\n    max-width: 100%;\n    vertical-align: top;\n}\n.suggestion-panlink img {\n    height: 60px;\n    width: auto;\n    max-width: 100%;\n}\n@media (max-width: 1200px) {\n    .gene-panlink img,\n    .suggestion-panlink img {\n        height: 30px;\n    }\n}\n@media (max-width: 767px) {\n    /* Allow the ortholog/TAIR box to stack below the gene title on mobile.\n       It stays inside .result-gene-summary, so it still appears above .gene-detail-tabs. */\n    .result-gene-summary {\n        flex-wrap: wrap;\n    }\n    .result-gene-title-body {\n        flex: 1 1 100%;\n    }\n    .model-ortholog,\n    .closest-ortholog,\n    .gene-summary-tair {\n        flex: 1 1 100%;\n        max-width: 100%;\n        width: auto;\n        margin-left: 0;\n        margin-top: 8px;\n    }\n    /* Stack ortholog box contents vertically on narrow screens */\n    .model-ortholog,\n    .closest-ortholog {\n        grid-template-columns: 1fr;\n    }\n    .model-ortholog h3.gene-id,\n    .closest-ortholog h3.gene-id {\n        grid-column: 1;\n        grid-row: 2;\n    }\n    .model-ortholog .gene-species,\n    .closest-ortholog .gene-species {\n        grid-column: 1;\n        grid-row: 3;\n        text-align: left;\n    }\n    .model-ortholog .rep-identity,\n    .closest-ortholog .rep-identity {\n        grid-column: 1;\n        grid-row: 4;\n        text-align: left;\n    }\n    .model-ortholog p,\n    .closest-ortholog p {\n        grid-row: 5;\n    }\n    /* Show descriptions on mobile (no hover available) */\n    .model-ortholog p,\n    .closest-ortholog p {\n        display: block;\n    }\n    /* PanLink: stop floating, display inline next to gene title */\n    .gene-panlink {\n        float: none;\n        display: inline;\n        margin-left: 0.25rem;\n        margin-bottom: 0;\n        vertical-align: middle;\n    }\n    /* Papers table only: hide \"Curation source\" column on small screens */\n    table.xrefs-pubs th:nth-child(2),\n    table.xrefs-pubs td:nth-child(2) {\n        display: none;\n    }\n}\n.gene-curation {\n    flex-shrink: 0;\n    margin-top: 20px;\n    border: 1px solid grey;\n}\n.gene-curation span {\n    width: 20px;\n    display: inline-block;\n    color: white;\n    text-align: center;\n}\n.gene-curation .okay {\n    background-color: #0c00f3;\n}\n.gene-curation .flagged {\n    background-color: darkorange;\n}\n.gene-detail-tabs {\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n}\n/* Tab items: 4-per-row by default, overrides Bootstrap col-md-1 (8.33%) */\n.gene-detail-tabs > div {\n    flex: 0 0 25%;\n    width: 25%;\n    max-width: 25%;\n    box-sizing: border-box;\n    padding: 6px 4px;\n    min-height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n/* At wide viewports, all 8 fit comfortably in one row */\n@media (min-width: 992px) {\n    .gene-detail-tabs > div {\n        flex: 0 0 12.5%;\n        width: 12.5%;\n        max-width: 12.5%;\n    }\n}\n.gene-detail-tab-closed {\n    color: darkgreen;\n    cursor: pointer;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-disabled {\n    /*color: white;*/\n    /*background-color: lightgray;*/\n    color: lightgray;\n    cursor: not-allowed;\n}\n.gene-detail-tab-empty {\n    color: darkgreen;\n    cursor: pointer;\n    font-style: oblique;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-empty::before {\n    content: \"Add \";\n}\n.gene-detail-tab-expanded {\n    color: white;\n    background-color: #557B74;\n    cursor: pointer;\n}\n.result-gene-summary {\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: flex-start;\n    align-items: flex-start;\n}\n.result-gene-summary .species-name {\n    white-space: nowrap;\n    font-style: italic;\n}\n.result-gene-title-body {\n    flex: 1 1 auto;\n    max-width: 1036px;\n    width: 100%;\n}\n.model-ortholog, .closest-ortholog, .gene-summary-tair {\n    cursor: pointer;\n    flex: 0 0 auto;\n    max-width: 380px;\n    width: 380px;\n    font-size: smaller;\n    margin-top: 10px;\n    padding: 0.25rem 0.5rem 0.5rem;\n    margin-left: 1rem;\n    border: 1px solid darkorange;\n}\n\n/* Ortholog boxes: grid — title row, then gene name left / species+identity right */\n.model-ortholog, .closest-ortholog {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0 0.5rem;\n    align-items: center;\n}\n\n/* Gene name: left column, smaller font to fit alongside species */\n.model-ortholog h3.gene-id,\n.closest-ortholog h3.gene-id {\n    grid-column: 1;\n    grid-row: 2;\n    margin: 0;\n    font-size: 1.5em;\n    overflow-wrap: break-word;\n    word-break: break-all;\n    min-width: 0;\n}\n\n/* Species: right column, top of the pair */\n.model-ortholog .gene-species,\n.closest-ortholog .gene-species {\n    grid-column: 2;\n    grid-row: 2;\n    text-align: right;\n    align-self: end;\n}\n\n/* Identity: right column, below species (same row group as gene name) */\n.model-ortholog .rep-identity,\n.closest-ortholog .rep-identity {\n    grid-column: 2;\n    grid-row: 3;\n    text-align: right;\n    margin-left: 0;\n    padding-right: 0;\n    padding-top: 0;\n    align-self: start;\n}\n\n/* Description: hidden by default; show on hover/focus */\n.model-ortholog p,\n.closest-ortholog p {\n    grid-column: 1 / -1;\n    grid-row: 4;\n    display: none;\n    margin: 0.25rem 0 0;\n}\n.model-ortholog:hover p,\n.model-ortholog:focus p,\n.closest-ortholog:hover p,\n.closest-ortholog:focus p {\n    display: block;\n}\n\n.model-ortholog {\n    border: 1px dotted darkorange;\n}\n.closest-ortholog {\n    border: 1px dotted darkgreen;\n}\n\n.gene-summary-tair {\n    border: 1px dotted darkblue;\n}\n.gene-summary-tair .rest {\n    display: none;\n}\n\n.gene-summary-tair:hover .rest {\n    display: inline;\n}\n.gene-summary-tair:focus .rest {\n    display: inline;\n}\n.gene-summary-tair:hover .ellipsis {\n    display: none;\n}\n.gene-summary-tair:focus .ellipsis {\n    display: none;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.closest-ortholog::before,\n.model-ortholog::before,\n.gene-summary-tair::before {\n    display: block;\n    grid-column: 1 / -1;\n    grid-row: 1;\n    text-align: center;\n    border: dotted 1px;\n    padding: 0 0.5rem;\n    margin: -0.25rem -0.5rem 0.25rem;  /* bleed to box edges */\n    background: #fff;\n}\n\n.model-ortholog::before {\n    content: \"Model Species Homolog\";\n    color: orange;\n}\n.closest-ortholog::before {\n    content: \"Closest Annotated Homolog\";\n    color: darkgreen;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.gene-summary-tair::before {\n    content: \"TAIR Curated Description\";\n    color: darkblue;\n}\n\n.rep-identity {\n    margin-left: auto;\n    padding-right: 10px;\n    padding-top: 5px;\n    font-style: italic;\n}\n.rep-identity::after {\n    content: \"% identity\";\n}\n.eFP::before {\n    content: url(\"../../static/images/BAR-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.eFP::after {\n    content: 'New!';\n    color: red;\n    padding-left:2px;\n    font-weight: bold;\n    font-style: italic;\n    font-size: x-small;\n    line-height: normal;\n    vertical-align: super;\n}\n.gxa::before {\n    content: url(\"../../static/images/expression-atlas-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.gene-search-pic-sugg {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/suggestions.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-results {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/results.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-genetree {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/genetree.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n\n/* tbrowse portals its tooltips/popups to document.body; without an\n   explicit z-index they render behind the bootstrap modal (z-index\n   ~1050) when a detail panel is in fullscreen mode. */\n.tbrowse-root,\n.tbrowse-tooltip,\n.tbrowse-fieldpicker,\n.tbrowse-msa-mask-panel {\n    z-index: 1100 !important;\n}\n",null,null,"/* ===== Pathways layout ===== */\n\n.pathways-layout {\n    display: flex;\n    align-items: stretch;\n}\n\n.pathways-tree-toggle {\n    flex: 0 0 auto;\n    width: 24px;\n    border: 1px solid #ccc;\n    border-right: none;\n    background: #f5f5f5;\n    cursor: pointer;\n    font-size: 12px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #666;\n    border-radius: 4px 0 0 4px;\n}\n.pathways-tree-toggle:hover {\n    background: #e0e0e0;\n    color: #333;\n}\n\n.pathways-tree-panel {\n    flex: 0 0 250px;\n    width: 250px;\n    height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    border: 1px solid #ccc;\n    border-right: none;\n}\n\n.pathways-diagram-panel {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.pathways-resize-handle,\n.details-resize-handle {\n    height: 6px;\n    background: #e0e0e0;\n    border: 1px solid #ccc;\n    border-top: none;\n    cursor: ns-resize;\n    transition: background 0.15s;\n}\n.pathways-resize-handle:hover,\n.details-resize-handle:hover {\n    background: #179ed3;\n}\n\n/* ===== Compact tree items (react-simple-tree-menu overrides) ===== */\n\n.pathways-tree-panel .rstm-tree-item-group {\n    border-top: none;\n}\n\n.pathways-tree-panel .rstm-tree-item {\n    padding: 0.2rem 0.4rem;\n    font-size: 0.8rem;\n    line-height: 1.3;\n    border-bottom: 1px solid #eee;\n}\n/* Override inline padding-left set by react-simple-tree-menu.\n   The library uses: 0.75 + iconSize*(hasNodes?0:1) + level*1.75 rem\n   We shrink the per-level indent from 1.75rem to 0.75rem */\n.pathways-tree-panel .rstm-tree-item-level0 { padding-left: 0.4rem !important; }\n.pathways-tree-panel .rstm-tree-item-level0 > .rstm-toggle-icon { margin-left: 0; }\n.pathways-tree-panel .rstm-tree-item-level1 { padding-left: 1.15rem !important; }\n.pathways-tree-panel .rstm-tree-item-level2 { padding-left: 1.9rem !important; }\n.pathways-tree-panel .rstm-tree-item-level3 { padding-left: 2.65rem !important; }\n.pathways-tree-panel .rstm-tree-item-level4 { padding-left: 3.4rem !important; }\n.pathways-tree-panel .rstm-tree-item-level5 { padding-left: 4.15rem !important; }\n.pathways-tree-panel .rstm-tree-item-level6 { padding-left: 4.9rem !important; }\n.pathways-tree-panel .rstm-tree-item-level7 { padding-left: 5.65rem !important; }\n\n.pathways-tree-panel .rstm-tree-item--active {\n    color: white;\n    background: #179ed3;\n    border-bottom-color: #127aa8;\n}\n\n.pathways-tree-panel .rstm-toggle-icon-symbol {\n    width: 1rem;\n    height: 1rem;\n    line-height: 1rem;\n    font-size: 0.7rem;\n}\n\n/* ===== Legacy tree-view classes ===== */\n\n.tree-view-root {}\n\n.tree-view-node {\n    margin-left: 8px;\n}\n\n.tree-view-node-collapse-toggle.collapse-spacer {\n    width: 12px;\n    display: inline-block;\n}\n\n.tree-view-node-collapse-toggle {\n    margin-right: 2px;\n    width: 12px;\n}\n\n.tree-view-node-label {\n    font-size: smaller;\n    margin-left: 2px;\n    padding: 1px;\n    border: 1px solid #fff;\n}\n\n.tree-view-node-label.selected {\n    border: 1px solid #003f81;\n    border-radius: 3px;\n    background-color: #808080;\n}\n\n.tree-view-node-checkbox {}\n.tree-view-node-children {}\n\n",null,".button-like-link {\n    display: inline-block;\n    padding: 0;\n    background-color: #fff0;\n    color: #007bff;\n    text-decoration: underline;\n    border: none;\n    cursor: pointer;\n}\n","/* styles.css */\n.fasta-container {\n    position: relative;\n    padding: 2ch;\n    background-color: #fcfffd;\n    border-color: #557b74;\n    border-style: dashed;\n    line-height: 0.925em;\n    /*margin: auto; !* Center the container *!*/\n}\n.styled-span {\n    display: flex;\n    align-items: center;\n    text-align: center;\n}\n.vertical-line {\n    flex-grow: 1;\n    height: 20px;\n    background-color: black;\n}\n.horizontal-line {\n    width: 60px;\n    min-width: 15px;\n    height: 3px;\n    background-color: black;\n    margin: 0;\n}\ncode.fasta {\n    white-space: pre-wrap;\n    color: #595959;\n}\n.header {\n    color: black;\n}\n.upstream {\n    color: #80a0a0;\n}\n.downstream {\n    color: #80a0a0;\n}\n.intron {\n    color: #aaaaaa;\n}\n.utr5 {\n    background-color: #aaccaf;\n}\n.utr5-other {\n    background-color: #cfe1d2;\n}\n.cds {\n    background-color: #a7b4d3;\n}\n.cds-other {\n    background-color: #d0d8e6;\n}\n.utr3 {\n    background-color: #c5a3bf;\n}\n.utr3-other {\n    background-color: #dcc9d9;\n}\n.square-utr5 {\n    width: 20px;\n    height: 20px;\n    background: linear-gradient(to bottom right, #aaccaf 0%, #aaccaf 50%, #cfe1d2 50%, #cfe1d2 100%);\n}\n.square-cds {\n    width: 20px;\n    height: 20px;\n    background: linear-gradient(to bottom right, #a7b4d3 0%, #a7b4d3 50%, #d0d8e6 50%, #d0d8e6 100%);\n}\n.square-utr3 {\n    width: 20px;\n    height: 20px;\n    background: linear-gradient(to bottom right, #c5a3bf 0%, #c5a3bf 50%, #dcc9d9 50%, #dcc9d9 100%);\n}\n\n.flanking-guide {\n    display: grid;\n    grid-template-columns: auto 60px auto 60px auto;\n    align-items: center;\n    row-gap: 2px;\n    column-gap: 0;\n    width: fit-content;\n}\n/* Row 1 */\n.flanking-label-left {\n    text-align: right;\n    padding-right: 0.5rem;\n}\n.flanking-center-label {\n    text-align: center;\n    white-space: nowrap;\n    padding: 0 0.25rem;\n}\n.flanking-guide > .horizontal-line {\n    height: 3px;\n    background-color: black;\n    align-self: center;\n}\n.flanking-label-right {\n    text-align: left;\n    padding-left: 0.5rem;\n}\n/* Row 2 */\n.flanking-value-left {\n    text-align: right;\n    min-width: 5ch;\n    padding-right: 0.5rem;\n}\n.flanking-value-right {\n    text-align: left;\n    min-width: 5ch;\n    padding-left: 0.5rem;\n}\n\n.reverse-slide {\n    direction: rtl;\n}\n.fasta-key {\n    position: absolute;\n    top: 9px;\n    right: 40px;\n    background: none;\n    border: none;\n    cursor: default;\n    font-family: monospace;\n    font-size: 11pt;\n    color: #555;\n}\n.copy-button {\n    position: absolute;\n    top: 3px;\n    right: -5px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 1.5rem;\n    color: #555;\n}\n.notification {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: #050505;\n    color: #fff;\n    padding: 5px;\n    z-index: 999;\n    font-weight: bold;\n    font-style: italic;\n    font-size: smaller;\n}\n",null,".accordion-button {\n    padding:0.4rem!important;\n}\n.accordion-button:hover {\n    background-color: #dbe8f3;\n}",".exporter-view {\n  display: grid;\n  grid-template-columns: 1fr 8px 1fr;\n  gap: 0;\n  padding: 0.75rem;\n  min-height: 400px;\n}\n\n.exporter-view > .exporter-pane:first-child {\n  margin-right: 0.5rem;\n}\n\n.exporter-view > .exporter-pane.exporter-right-pane {\n  margin-left: 0.5rem;\n}\n\n.exporter-divider {\n  cursor: col-resize;\n  background: transparent;\n  position: relative;\n  align-self: stretch;\n}\n\n.exporter-divider::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 2px;\n  background: #d0d4da;\n  border-radius: 1px;\n  transition: background 0.15s;\n}\n\n.exporter-divider:hover::before,\n.exporter-divider.dragging::before {\n  background: #7a8aa0;\n  width: 3px;\n}\n\n.exporter-pane {\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.exporter-pane-header {\n  padding: 0.5rem 0.75rem;\n  border-bottom: 1px solid #e0e0e0;\n  background: #f8f9fa;\n  font-size: 0.9rem;\n}\n\n.exporter-pane-header-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.exporter-field-search-inline {\n  margin-left: auto;\n  margin-bottom: 0;\n  max-width: 220px;\n  height: 1.75rem;\n  font-size: 0.85rem;\n  padding: 0.15rem 0.5rem;\n}\n\n.exporter-pane-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.5rem;\n}\n\n.exporter-panel-empty {\n  padding: 1rem;\n  color: #888;\n  text-align: center;\n  font-size: 0.9rem;\n}\n\n/* --- FieldTree --- */\n\n.exporter-field-tree {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.exporter-field-search {\n  margin-bottom: 0.5rem;\n  font-size: 0.9rem;\n}\n\n.exporter-field-tree-body {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.exporter-group {\n  margin-bottom: 0.25rem;\n}\n\n.exporter-group-header {\n  cursor: pointer;\n  padding: 0.25rem 0.5rem;\n  background: #eef1f4;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  user-select: none;\n  font-size: 0.9rem;\n}\n\n.exporter-group-header:hover {\n  background: #e3e7ec;\n}\n\n.exporter-group-chevron {\n  display: inline-flex;\n  align-items: center;\n  color: #666;\n}\n\n.exporter-group-count {\n  font-size: 0.75rem;\n  color: #666;\n  background: #fff;\n  padding: 0 0.4rem;\n  border-radius: 10px;\n  border: 1px solid #ddd;\n}\n\n.exporter-group-actions {\n  margin-left: auto;\n  display: inline-flex;\n  gap: 0.25rem;\n}\n\n.exporter-group-action {\n  font-size: 0.7rem;\n  padding: 0.05rem 0.4rem;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  color: #333;\n  cursor: pointer;\n  line-height: 1.4;\n}\n\n.exporter-group-action:hover:not(:disabled) {\n  background: #f0f4f8;\n  border-color: #88a;\n}\n\n.exporter-group-action:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.exporter-group-fields {\n  list-style: none;\n  margin: 0.25rem 0 0.5rem 1.25rem;\n  padding: 0;\n}\n\n.exporter-group-fields li {\n  padding: 0.1rem 0.25rem;\n  font-size: 0.85rem;\n}\n\n.exporter-group-fields label {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  margin: 0;\n  padding: 0.1rem 0.25rem;\n  border-radius: 2px;\n  width: 100%;\n}\n\n.exporter-group-fields label:hover {\n  background: #f0f4f8;\n}\n\n.exporter-field-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-field-badge {\n  font-size: 0.7rem;\n  color: #888;\n  font-family: monospace;\n}\n\n.exporter-group-truncated {\n  color: #888;\n  font-size: 0.8rem;\n  padding-left: 0.5rem;\n}\n\n/* --- SelectedFields --- */\n\n.exporter-selected {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.exporter-selected-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0;\n  margin-bottom: 0.5rem;\n  border-bottom: 1px solid #eee;\n}\n\n.exporter-selected-count {\n  font-size: 0.75rem;\n  color: #666;\n  background: #eef1f4;\n  padding: 0 0.5rem;\n  border-radius: 10px;\n}\n\n.exporter-clear-btn {\n  margin-left: auto;\n  font-size: 0.8rem;\n  padding: 0;\n}\n\n.exporter-selected-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.exporter-selected-list li {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.25rem 0.35rem;\n  border-bottom: 1px solid #f0f0f0;\n  font-size: 0.85rem;\n}\n\n.exporter-selected-index {\n  font-family: monospace;\n  color: #888;\n  min-width: 1.75rem;\n}\n\n.exporter-selected-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-selected-group {\n  color: #888;\n}\n\n.exporter-selected-actions {\n  display: flex;\n  gap: 0.15rem;\n}\n\n.exporter-selected-actions button {\n  padding: 0.1rem 0.35rem;\n  line-height: 1;\n}\n\n/* --- Right pane (selected + preview) --- */\n\n.exporter-right-pane {\n  max-height: 70vh;\n}\n\n.exporter-right-split {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.exporter-selected-section {\n  flex: 0 0 auto;\n  max-height: 35%;\n  overflow-y: auto;\n  padding: 0.5rem;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.exporter-preview-section {\n  flex: 1;\n  overflow: hidden;\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n}\n\n/* --- Preview --- */\n\n.exporter-preview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.exporter-preview-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding-bottom: 0.35rem;\n  margin-bottom: 0.35rem;\n  border-bottom: 1px solid #eee;\n  font-size: 0.85rem;\n}\n\n.exporter-preview-format label {\n  margin-right: 0.5rem;\n  cursor: pointer;\n}\n\n.exporter-preview-format input {\n  margin-right: 0.25rem;\n}\n\n.exporter-preview-status {\n  margin-left: auto;\n  color: #888;\n}\n\n.exporter-cutoffs-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.1rem 0.5rem;\n  font-size: 0.8rem;\n}\n\n.exporter-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.35);\n  z-index: 1050;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.exporter-modal {\n  background: #fff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n  width: min(420px, 90vw);\n  display: flex;\n  flex-direction: column;\n}\n\n.exporter-modal-header {\n  display: flex;\n  align-items: center;\n  padding: 0.6rem 0.9rem;\n  border-bottom: 1px solid #eee;\n}\n\n.exporter-modal-close {\n  margin-left: auto;\n  background: transparent;\n  border: 0;\n  font-size: 1.25rem;\n  line-height: 1;\n  color: #666;\n  cursor: pointer;\n  padding: 0 0.25rem;\n}\n\n.exporter-modal-body {\n  padding: 0.9rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.85rem;\n}\n\n.exporter-modal-field label {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  font-size: 0.85rem;\n  font-weight: 500;\n}\n\n.exporter-modal-field input {\n  font: inherit;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid #c0c4ca;\n  border-radius: 3px;\n}\n\n.exporter-modal-field small {\n  color: #777;\n  font-size: 0.75rem;\n  margin-top: 0.15rem;\n}\n\n.exporter-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  padding: 0.6rem 0.9rem;\n  border-top: 1px solid #eee;\n}\n\n.exporter-preview-status.error {\n  color: #c33;\n}\n\n.exporter-preview-body {\n  flex: 1;\n  overflow: auto;\n  background: #fafbfc;\n  border: 1px solid #eee;\n  border-radius: 3px;\n}\n\n.exporter-preview-empty {\n  padding: 1rem;\n  color: #888;\n  text-align: center;\n}\n\n.exporter-preview-tsv-scroll {\n  overflow: auto;\n  max-width: 100%;\n}\n\n.exporter-preview-tsv {\n  border-collapse: collapse;\n  font-size: 0.8rem;\n  font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n  width: auto;\n}\n\n.exporter-preview-tsv th,\n.exporter-preview-tsv td {\n  padding: 0.2rem 0.5rem;\n  border: 1px solid #e5e7ea;\n  max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-preview-tsv th {\n  position: relative;\n}\n\n.exporter-preview-col-resizer {\n  position: absolute;\n  top: 0;\n  right: -3px;\n  width: 6px;\n  height: 100%;\n  cursor: col-resize;\n  user-select: none;\n  z-index: 2;\n}\n\n.exporter-preview-col-resizer::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 1px;\n  background: transparent;\n  transition: background 0.15s;\n}\n\n.exporter-preview-col-resizer:hover::after,\n.exporter-preview-col-resizer:active::after {\n  background: #7a8aa0;\n  width: 2px;\n}\n\n.exporter-preview-tsv th {\n  background: #f0f3f6;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: 0.15rem 0.25rem;\n}\n\n.exporter-preview-th-inner {\n  display: flex;\n  align-items: center;\n  gap: 0.15rem;\n  min-width: 0;\n}\n\n.exporter-preview-th-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-preview-reorder-btn {\n  flex: 0 0 auto;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0;\n  line-height: 1;\n  color: #555;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n}\n\n.exporter-preview-reorder-btn:hover:not(:disabled) {\n  background: #fff;\n  border-color: #bbb;\n  color: #111;\n}\n\n.exporter-preview-reorder-btn:disabled {\n  opacity: 0.25;\n  cursor: default;\n}\n\n.exporter-preview-fields-count {\n  color: #666;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n}\n\n.exporter-preview-tsv tr:hover td {\n  background: #f4f7fa;\n}\n\n.exporter-preview-empty-row {\n  text-align: center;\n  color: #888;\n  padding: 1rem !important;\n}\n\n.exporter-preview-json {\n  margin: 0;\n  padding: 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1.4;\n}\n\n/* --- Export footer --- */\n\n.exporter-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n  flex: 0 0 auto;\n}\n\n.exporter-footer-summary {\n  color: #555;\n}\n",".exprviz-view {\n  padding: 0.5rem;\n}\n\n.exprviz-tabs {\n  margin-bottom: 0.5rem;\n}\n\n.exprviz-tab-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  /* Constrain children so the grid scrolls internally instead of bleeding\n   * out and forcing the page to scroll horizontally. */\n  min-width: 0;\n  overflow: hidden;\n}\n\n.exprviz-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Host applications (e.g. sorghum-webapp) sometimes ship global stylesheets\n * that override `.btn` / `.btn-sm` with `!important` — fat padding, custom\n * font-weight, transformed text — which leaves our toolbar buttons at\n * inconsistent sizes (since plain `<Button>` and `<ToggleButton>` inside a\n * `<ToggleButtonGroup>` pick up different rules). Re-state Bootstrap 5's\n * small-button metrics here with higher specificity and `!important`, scoped\n * to `.exprviz-toolbar`, so the toolbar always looks the same regardless of\n * what the host's theme does. */\n.exprviz-toolbar .btn,\n.exprviz-toolbar .btn.btn-sm,\n.exprviz-toolbar .btn-group > .btn,\n.exprviz-toolbar .btn-group > .btn.btn-sm,\n.exprviz-toolbar .btn-group-sm > .btn,\n.exprviz-toolbar label.btn {\n  padding: 0.25rem 0.5rem !important;\n  font-size: 0.875rem !important;\n  line-height: 1.5 !important;\n  font-weight: 400 !important;\n  text-transform: none !important;\n  letter-spacing: normal !important;\n  height: auto !important;\n  min-height: 0 !important;\n  border-radius: 0.2rem !important;\n}\n\n/* Restore the squared-off inner edges within a ToggleButtonGroup. */\n.exprviz-toolbar .btn-group > .btn:not(:first-child):not(:last-child),\n.exprviz-toolbar .btn-group > .btn:not(:first-child):not(:last-child).btn-sm {\n  border-radius: 0 !important;\n}\n.exprviz-toolbar .btn-group > .btn:first-child:not(:last-child),\n.exprviz-toolbar .btn-group > .btn:first-child:not(:last-child).btn-sm {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n.exprviz-toolbar .btn-group > .btn:last-child:not(:first-child),\n.exprviz-toolbar .btn-group > .btn:last-child:not(:first-child).btn-sm {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.exprviz-toolbar .btn-group {\n  vertical-align: middle;\n}\n\n/* Same idea for the status text — host stylesheets sometimes restyle\n * <span>s in unexpected ways. */\n.exprviz-toolbar .exprviz-status {\n  font-weight: 400 !important;\n  text-transform: none !important;\n  letter-spacing: normal !important;\n}\n\n.exprviz-status {\n  color: #666;\n  font-size: 0.85rem;\n  margin-left: 0.5rem;\n}\n\n.exprviz-warning {\n  color: #b06000;\n  background: #fff8e0;\n  border: 1px solid #f0d080;\n  border-radius: 3px;\n  padding: 2px 6px;\n  font-size: 0.8rem;\n  cursor: help;\n}\n\n.exprviz-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.exprviz-plot {\n  border: 1px solid #ddd;\n  background: #fff;\n  min-height: 120px;\n  overflow: hidden;\n}\n\n.exprviz-resizer {\n  height: 8px;\n  margin: 2px 0;\n  background: #f0f0f0;\n  border-top: 1px solid #ddd;\n  border-bottom: 1px solid #ddd;\n  cursor: row-resize;\n  flex: none;\n}\n\n.exprviz-resizer::before {\n  content: '';\n  display: block;\n  width: 36px;\n  height: 2px;\n  background: #aaa;\n  border-radius: 1px;\n  margin: 3px auto;\n}\n\n.exprviz-resizer:hover,\n.exprviz-resizer:active {\n  background: #e0e8f5;\n}\n\n.exprviz-resizer:hover::before,\n.exprviz-resizer:active::before {\n  background: #2a6ebb;\n}\n\n.exprviz-pc-container {\n  width: 100%;\n  height: 100%;\n}\n\n.exprviz-pc-container svg {\n  display: block;\n}\n\n.exprviz-pc-lines path {\n  fill: none;\n  stroke: steelblue;\n}\n\n.exprviz-pc-line-in {\n  stroke-opacity: 0.4;\n}\n\n.exprviz-pc-line-out {\n  stroke-opacity: 0.04;\n}\n\n.exprviz-pc-lines path:not(.exprviz-pc-line-in):not(.exprviz-pc-line-out) {\n  stroke-opacity: 0.25;\n}\n\n.exprviz-pc-lines path.exprviz-pc-line-hover {\n  stroke: #d62728;\n  stroke-opacity: 1;\n  stroke-width: 2;\n}\n\n.exprviz-pc-axis-dragging .domain,\n.exprviz-pc-axis-dragging .tick line {\n  stroke: #555;\n}\n\n.exprviz-pc-axis-dragging .exprviz-pc-axis-label {\n  font-weight: bold;\n}\n\n.exprviz-plot-empty,\n.exprviz-table-empty {\n  padding: 1rem;\n  color: #888;\n}\n\n.exprviz-pc-tooltip {\n  position: fixed;\n  z-index: 1000;\n  background: #fff;\n  border: 1px solid #bbb;\n  border-radius: 3px;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n  padding: 6px 8px;\n  font-size: 0.78rem;\n  line-height: 1.35;\n  max-width: 360px;\n  pointer-events: none;\n  color: #222;\n}\n\n.exprviz-pc-tip-section {\n  margin-top: 4px;\n  font-size: 0.72rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #888;\n}\n\n.exprviz-pc-tip-row {\n  margin-left: 0.4rem;\n}\n\n.exprviz-pc-tip-key {\n  font-weight: 600;\n}\n\n/* ---- heatmap ---- */\n\n.exprviz-hm-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  /* Horizontal scroll lives on the outer container so the sticky-positioned\n   * column header and the cell body translate together — column labels\n   * always stay aligned with the cells beneath them. */\n  overflow-x: auto;\n}\n\n.exprviz-hm-inner {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 100%;\n}\n\n.exprviz-hm-container svg {\n  display: block;\n}\n\n.exprviz-hm-header {\n  flex: 0 0 auto;\n  background: #fff;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.exprviz-hm-body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n.exprviz-hm-collabel {\n  fill: #222;\n}\n\n.exprviz-hm-rowlabels text {\n  fill: #444;\n}\n\n.exprviz-hm-cells rect {\n  shape-rendering: crispEdges;\n  cursor: crosshair;\n}\n\n.exprviz-hm-legend {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  display: flex;\n  gap: 6px;\n  background: rgba(255, 255, 255, 0.92);\n  border: 1px solid #d0d7de;\n  border-radius: 3px;\n  padding: 3px 6px;\n  font-size: 0.72rem;\n  line-height: 1.1;\n  pointer-events: auto;\n  z-index: 2;\n}\n\n.exprviz-hm-legend-bin {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.exprviz-hm-legend-swatch {\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.exprviz-hm-legend-label {\n  color: #333;\n  font-variant-numeric: tabular-nums;\n}\n\n.exprviz-table {\n  height: 480px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.exprviz-aggrid {\n  width: 100%;\n  height: 100%;\n  /* Block the browser's edge-of-scroll back/forward gesture when the user\n   * scrolls all the way left or right inside the grid. */\n  overscroll-behavior-x: contain;\n}\n\n/* ag-grid's scrolling viewports — make sure the back/forward gesture is\n * contained at every level, not just on our outer wrapper. */\n.exprviz-aggrid .ag-body-viewport,\n.exprviz-aggrid .ag-body-horizontal-scroll-viewport,\n.exprviz-aggrid .ag-center-cols-viewport {\n  overscroll-behavior-x: contain;\n}\n\n/* Group-header rows: subtle tinting so each metadata level reads as a band.\n * The :first-of-type column-group rule covers the topmost (study) row. */\n.exprviz-aggrid .ag-header-group-cell {\n  font-size: 0.78rem;\n  border-right: 1px solid #e0e0e0;\n}\n\n.exprviz-aggrid .ag-header-group-cell-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0 6px;\n}\n\n.exprviz-aggrid .exprviz-hg-factors {\n  background: #eef6ff;\n  color: #1e3a5f;\n}\n\n.exprviz-aggrid .exprviz-hg-chars {\n  background: #f5f5f0;\n  color: #4a4a30;\n}\n\n.exprviz-aggrid .exprviz-hg-collapsed {\n  font-style: italic;\n  color: #666;\n}\n\n/* The label cells stacked above the Gene ID and Name columns — Study/Title,\n * every Factor/<factor type> row, every Characteristic/<char type> row,\n * and the collapsed-section placeholders — are rendered via the\n * LabelHeaderGroup / ToggleHeaderGroup React components. Both render a\n * full-width div that right-aligns its content, so the alignment is\n * baked into the component DOM and doesn't depend on overriding\n * ag-grid's internal CSS. The leaf cells (\"Gene ID\" / \"Name\") are not\n * wrapped in these components and keep ag-grid's default left alignment. */\n.exprviz-label-header {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  text-align: right;\n  padding-right: 6px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.exprviz-toggle-header {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  width: 100%;\n  padding-right: 6px;\n}\n\n.exprviz-toggle-header:hover {\n  color: #2a6ebb;\n}\n\n.exprviz-toggle-caret {\n  display: inline-block;\n  width: 0.9em;\n  font-size: 0.75em;\n  color: #888;\n  margin-right: 2px;\n}\n\n.exprviz-toggle-header:hover .exprviz-toggle-caret {\n  color: #2a6ebb;\n}\n\n.exprviz-fields-layout {\n  display: grid;\n  grid-template-columns: 320px 1fr;\n  gap: 0.75rem;\n  height: 60vh;\n}\n\n.exprviz-tree {\n  overflow-y: auto;\n  border: 1px solid #eee;\n  padding: 0.4rem 0.5rem;\n  font-size: 0.85rem;\n}\n\n.exprviz-tree-search {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 4px 6px;\n  margin-bottom: 0.4rem;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 0.85rem;\n}\n\n.exprviz-tree-group {\n  margin-bottom: 0.5rem;\n}\n\n.exprviz-tree-group-header {\n  cursor: pointer;\n  user-select: none;\n  padding: 2px 0;\n}\n\n.exprviz-tree-caret {\n  display: inline-block;\n  width: 1em;\n  color: #888;\n}\n\n.exprviz-tree-type {\n  margin-left: 0.5rem;\n  border-left: 2px solid transparent;\n  padding-left: 0.25rem;\n}\n\n.exprviz-tree-type.is-active {\n  border-left-color: #2a6ebb;\n}\n\n.exprviz-tree-type-header {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  padding: 2px 0;\n}\n\n.exprviz-tree-type-header:hover {\n  background: #f5f8ff;\n}\n\n.exprviz-tree-type-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exprviz-tree-type-count {\n  color: #888;\n  font-variant-numeric: tabular-nums;\n  margin-left: 0.5rem;\n}\n\n.exprviz-tree-values {\n  margin: 0.25rem 0 0.5rem 1.25rem;\n  padding-left: 0.25rem;\n  border-left: 1px dashed #e0e0e0;\n}\n\n.exprviz-values-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n\n.exprviz-tree-value {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 1px 0;\n  cursor: pointer;\n}\n\n.exprviz-tree-value:hover {\n  background: #fafaff;\n}\n\n.exprviz-tree-value-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exprviz-tree-value-count {\n  color: #888;\n  font-variant-numeric: tabular-nums;\n  font-size: 0.8em;\n}\n\n.exprviz-tree-empty {\n  color: #999;\n  margin-left: 1rem;\n}\n\n.exprviz-fields-preview {\n  overflow: auto;\n  border: 1px solid #eee;\n}\n\n.exprviz-fields-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n}\n\n.exprviz-fields-table th,\n.exprviz-fields-table td {\n  padding: 4px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.exprviz-fields-table thead th {\n  position: sticky;\n  top: 0;\n  background: #fafafa;\n  z-index: 1;\n  border-bottom: 1px solid #ddd;\n}\n\n.exprviz-col-factor {\n  background: #eef6ff;\n}\n\n.exprviz-col-char {\n  background: #f5f5f0;\n}\n\n.exprviz-fields-table tbody tr:hover {\n  background: #fafaff;\n}\n\n",".attrtable-view {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.attrtable-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.25rem 0 0.5rem;\n}\n\n.attrtable-status {\n    font-size: small;\n}\n\n/* pale → dark = low → high, matching the tbrowse Expression zone */\n.attrtable-legend {\n    display: flex;\n    align-items: center;\n    gap: 1px;\n    margin-left: auto;\n}\n\n.attrtable-legend span {\n    width: 12px;\n    height: 12px;\n    display: inline-block;\n    border: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.attrtable-notice {\n    padding: 0.4rem 0.75rem;\n    margin-bottom: 0.5rem;\n    font-size: small;\n}\n\n.attrtable-columns-panel {\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 0.5rem;\n    margin-bottom: 0.5rem;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.attrtable-columns-head {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    margin-bottom: 0.5rem;\n}\n\n.attrtable-field-search {\n    flex: 1;\n}\n\n.attrtable-aggrid {\n    width: 100%;\n    height: 600px;\n    /* Block the browser's edge-of-scroll back/forward gesture when scrolling\n     * all the way left or right inside the grid. */\n    overscroll-behavior-x: contain;\n}\n\n.attrtable-aggrid .ag-body-viewport,\n.attrtable-aggrid .ag-body-horizontal-scroll-viewport,\n.attrtable-aggrid .ag-center-cols-viewport {\n    overscroll-behavior-x: contain;\n}\n\n.attrtable-empty {\n    padding: 1rem;\n    color: #6c757d;\n}\n\n/* Vertical headers for the narrow organ columns: full tissue names read\n * bottom-to-top, centred within each column so they stay inside the cell and\n * never cross the column separators (which they did when slanted). */\n\n/* The quartz theme gives header cells 16px of horizontal padding, which on a\n * 22px organ column leaves the label no room (its container collapses to 0 and\n * overflow:hidden clips it). Zero it so the vertical label uses the full column\n * width — the column itself stays 22px, so the heatmap doesn't get wider. */\n.attrtable-aggrid .attrtable-organ-header {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n}\n\n.attrtable-rot-header {\n    height: 100%;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    cursor: pointer;\n}\n\n.attrtable-rot-header > span {\n    transform: rotate(-90deg);\n    white-space: nowrap;\n    font-size: 10px;\n    line-height: 1;\n}\n\n/* Tight heatmap cells: colour fills the whole (narrow) cell, no padding. */\n.attrtable-aggrid .attrtable-organ-cell {\n    padding: 0 !important;\n}\n\n/* With the tall header (organ heatmap shown), sit the plain column labels at\n * the bottom so they line up with the base of the slanted organ labels. */\n.attrtable-aggrid.attrtable-tall-header .ag-header-cell-label {\n    align-items: flex-end;\n    padding-bottom: 3px;\n}\n",".oe-view {\n  padding: 0.25rem 0.5rem;\n}\n\n.oe-layout {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n}\n\n.oe-layout-tree {\n  max-height: 80vh;\n  overflow: auto;\n  border: 1px solid #e1e4e8;\n  border-radius: 4px;\n  padding: 0.25rem 0.5rem;\n  background: #fafbfc;\n  font-size: 13px;\n  min-width: 0;\n}\n\n.oe-splitter {\n  flex: 0 0 6px;\n  cursor: col-resize;\n  background: transparent;\n  border-left: 1px solid #e1e4e8;\n  border-right: 1px solid #e1e4e8;\n  margin: 0 1px;\n  align-self: stretch;\n}\n\n.oe-splitter:hover,\n.oe-splitter:active {\n  background: #d6e9ff;\n}\n\n.oe-layout-panel {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.oe-tree-leaf {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: 2px;\n}\n\n.oe-tree-leaf:hover {\n  background: #eef5ff;\n}\n\n.oe-tree-leaf-active {\n  background: #d6e9ff !important;\n  font-weight: 600;\n}\n\n.oe-tree-leaf-name {\n  flex: 1 1 auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.oe-tree-leaf-count {\n  color: #555;\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n}\n\n.oe-loading {\n  padding: 1rem;\n}\n\n.oe-summary {\n  font-size: 0.9rem;\n  margin: 0.25rem 0 0.5rem 0;\n}\n\n.oe-controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  align-items: end;\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  background-color: #f6f8fa;\n  border: 1px solid #e1e4e8;\n  border-radius: 4px;\n}\n\n.oe-control {\n  min-width: 100px;\n}\n\n.oe-control-grow {\n  flex-grow: 1;\n  min-width: 200px;\n}\n\n.oe-control .form-label {\n  font-size: 0.8rem;\n  margin-bottom: 0.15rem;\n}\n\n.oe-help {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 3px;\n  color: #6c757d;\n  cursor: help;\n  vertical-align: middle;\n  font-size: 0.85em;\n}\n\n.oe-help:hover,\n.oe-help:focus {\n  color: #0366d6;\n  outline: none;\n}\n\n.oe-switch {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.oe-ont-title {\n  font-weight: 600;\n  margin-right: 0.5rem;\n}\n\n.oe-ont-badge {\n  font-weight: normal;\n}\n\n.oe-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n}\n\n.oe-table th,\n.oe-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid #eee;\n  text-align: left;\n}\n\n.oe-table th {\n  background: #f0f3f6;\n  position: sticky;\n  top: 0;\n}\n\n.oe-sort-th {\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.oe-sort-th:hover {\n  background: #dde3ea;\n}\n\n.oe-sort-th-active {\n  background: #dde3ea;\n  color: #003366;\n}\n\n.oe-table tbody tr {\n  cursor: pointer;\n}\n\n.oe-table tbody tr:hover {\n  background-color: #eef5ff;\n}\n\n.oe-num {\n  text-align: right !important;\n  font-variant-numeric: tabular-nums;\n}\n\n.oe-term-id {\n  font-family: monospace;\n  white-space: nowrap;\n}\n\n.oe-term-name {\n  max-width: 32rem;\n}\n\n.oe-term-type {\n  white-space: nowrap;\n  color: #555;\n  font-size: 0.8rem;\n}\n"],"names":[],"version":3,"file":"index.css.map"}
+{"mappings":"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","sources":["ff42af53a3828e08","src/components/styles.css","src/components/results/genes.css","msa.less","tree.less","src/components/results/details/tree-view.css","node_modules/react-simple-tree-menu/src/sass/main.scss","src/components/results/details/VEP.css","src/components/results/details/sequences.css","main.less","src/components/results/expression.css","src/components/exporter/styles.css","src/components/exprViz/styles.css","src/components/attrTable/styles.css","src/components/results/ontologyEnrichment.css"],"sourcesContent":["@import \"5abb1db407612521\";\n@import \"1caf78728b2f5137\";\n@import \"2166a150e9f31214\";\n@import \"938d6be3f57789df\";\n@import \"996096824b9f7d5a\";\n@import \"aa165d1be5d1c755\";\n@import \"41a1dcf3bc8b5377\";\n@import \"c52016833805a9f9\";\n@import \"6f643ac0480217ea\";\n@import \"c6576577b854e1eb\";\n@import \"b02f188cedfc7aaa\";\n@import \"c165ffd6f0d0851d\";\n@import \"f46a3e1dc6586595\";\n@import \"0d0d5189ac663932\";\n","/* ── Main search layout: sidebar + content ──────────────────────────────── */\n.search-views-layout {\n    display: flex;\n    align-items: flex-start;\n}\n\n.search-views-content {\n    flex: 1 1 0;\n    min-width: 0; /* prevent flex children from overflowing */\n}\n\n.gramene-sidebar,\n.sorghumbase-sidebar {\n    flex: 0 0 250px;\n    position: sticky;\n    top: 0;\n    align-self: flex-start;\n    padding-left: 8px;\n    padding-right: 8px;\n    padding-bottom: 8px;\n}\n\n.gramene-sidebar {\n    background-color: #557b74;\n}\n.sorghumbase-sidebar {\n    background-color: #a03e34;\n}\n\n/* ── Mobile: stack sidebar above content ────────────────────────────────── */\n@media (max-width: 767px) {\n    .search-views-layout {\n        flex-direction: column;\n    }\n    .gramene-sidebar,\n    .sorghumbase-sidebar {\n        flex: 0 0 auto;\n        position: static;\n        width: 100%;\n    }\n    .search-views-content {\n        width: 100%;\n    }\n}\n.gramene-auth-container,\n.sorghumbase-auth-container,\n.gramene-filter-container,\n.sorghumbase-filter-container {\n}\n.gramene-filter {\n    padding-left: 4px;\n    padding-right: 4px;\n    padding-bottom: 4px;\n    background-color: white;\n    font-size: 0.875rem; /* ~14px — explicit instead of 'small' keyword */\n}\n.gramene-filter span:hover {\n    font-weight:bolder;\n}\n.gramene-filter-AND {\n    background-color: #ffcd82;\n}\n.gramene-filter-OR {\n    background-color: #c5eeb9;\n}\n.gramene-filter-NOT {\n    border-left-color: #ff5354;\n    border-left-style: inset;\n    border-left-width: 4px;\n    padding-left: 4px;\n}\n.gramene-filter-operation {\n    text-align: center;\n    font-style: italic;\n}\n.gramene-filter-marked {\n    font-weight: bolder;\n    /*background-color: #feff96;*/\n}\n.gramene-filter-menu ul {\n    border-top-style: solid;\n    border-top-width: 2px;\n    padding-left: 0;\n}\n.gramene-filter-menu li {\n    display: block;\n    cursor: pointer;\n    padding: 8px 8px 8px 15px; /* vertical padding makes tap targets ~36px+ */\n}\n.gramene-filter-menu li:hover {\n    background-color: #feff96;\n}\n\n.gramene-view-header {\n    width: 100%;\n    display: flex;\n    flex-wrap: nowrap;\n    justify-content: space-evenly;\n    font-size: larger;\n    font-weight: bold;\n    background-color: #fff3a96e;\n    border-top: solid;\n    border-top-color: #557b74;\n    color: #a03e34;\n}\n\n.gramene-view-container {\n}\n.gramene-view {\n    padding-left: 0px;\n    padding-right: 10px;\n    margin-bottom: 0;\n    background-color: white;\n}\n.gramene-view-span-on {\n    padding-left: 5px;\n    cursor: pointer;\n    vertical-align: text-bottom;\n    color: #a03e34;\n}\n.gramene-view-span-off {\n    padding-left: 5px;\n    cursor: pointer;\n    vertical-align: text-bottom;\n}\n.gramene-view li {\n    display: block;\n    cursor: pointer;\n    padding-left: 5px;\n    border-left-style: inset;\n    border-left-width: 8px;\n    margin-bottom: 2px;\n}\n\n.gramene-view-on {\n    border-left-color: #40a0ff;\n    font-weight: bold;\n}\n.gramene-view-off {\n    border-left-color: #ff6d68;\n}\n.gramene-view-disabled {\n    color: darkgray;\n    border-left-color: #efefef;\n    cursor: default!important;\n}\n#gramene-suggestion button {\n    border-radius: .6rem;\n    line-height: 1;\n}\n#gramene-suggestion button:focus {\n    color: #fff;\n    background-color: #6c757d;\n    border-color: #6c757d;\n}\n\n/* ── Collapsible sidebar sections ─────────────────────────────────────── */\n.sidebar-section {\n    margin-bottom: 4px;\n}\n\n.sidebar-section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    padding: 2px 4px 2px 6px;\n    color: cornsilk;\n    user-select: none;\n    border-top: 3px solid;\n}\n\n/* Dark background + matching top border per site */\n.gramene-sidebar .sidebar-section-header {\n    background-color: #557b74;\n    border-top-color: #3d5b55;\n}\n.sorghumbase-sidebar .sidebar-section-header {\n    background-color: #a03e34;\n    border-top-color: #7a2f27;\n}\n\n.sidebar-section-header:hover {\n    background: rgba(255,255,255,0.1);\n}\n.gramene-sidebar .sidebar-section-header:hover {\n    background-color: #4a6d66;\n}\n.sorghumbase-sidebar .sidebar-section-header:hover {\n    background-color: #8c352d;\n}\n\n.sidebar-section-actions {\n    display: flex;\n    align-items: center;\n    gap: 0.25rem;\n    color: cornsilk;\n}\n\n.sidebar-section-toggle {\n    font-size: 0.85rem;\n    font-weight: bold;\n}\n.sidebar-section-toggle svg {\n    stroke: currentColor;\n    stroke-width: 2;\n}\n\n.sidebar-section-body {\n    background-color: #fff3a9;\n    padding: 4px;\n}\n\n/* ── Mobile: compact sidebar when stacked at top ─────────────────────── */\n@media (max-width: 767px) {\n    /* Tighten sidebar padding */\n    .gramene-sidebar,\n    .sorghumbase-sidebar {\n        padding: 4px 8px;\n    }\n\n    /* Views: display as a compact inline flow */\n    .gramene-view {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 2px 8px;\n        padding: 2px 4px;\n    }\n    .gramene-view li {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 4px;\n        margin-bottom: 0;\n        font-size: 0.8rem;\n        border-left-width: 4px;\n    }\n\n    /* View header: smaller */\n    .gramene-view-header {\n        font-size: small;\n        padding: 2px 0;\n    }\n\n    /* Filters: compact */\n    .gramene-filter {\n        font-size: 0.8rem;\n        padding: 2px 4px;\n    }\n    .gramene-filter-menu li {\n        padding: 4px 4px 4px 10px;\n    }\n\n    /* Suggestion buttons: reasonable tap area */\n    #gramene-suggestion button {\n        padding: 0.35rem 0.6rem;\n        margin-bottom: 2px;\n        font-size: 0.8rem;\n    }\n\n    /* Prevent iOS zoom-on-focus (requires >= 16px) without forcing extra height */\n    #search-input {\n        font-size: 1rem;\n    }\n}\n\n/* ── Taxonomy modal tree ─────────────────────────────────────────────────── */\n.tax-tree            { margin-top: 8px; font-size: 14px; }\n.tax-node            { border-radius: 2px; }\n.tax-row             { display: flex; align-items: center; gap: 4px; padding: 2px 4px; }\n.tax-chevron         { cursor: pointer; width: 14px; display: inline-flex; align-items: center; }\n.tax-chevron-spacer  { display: inline-block; width: 14px; }\n.tax-label           { }\n.tax-label-internal  { font-weight: 600; }\n.tax-sep             { color: #888; font-weight: normal; }\n.tax-count           { color: #555; font-size: 12px; margin-left: 4px; }\n.tax-self-leaf       { margin-left: 8px; font-size: 12px; color: #444; display: inline-flex; align-items: center; gap: 2px; }\n\n.tax-ellipsis        { cursor: help; color: #666; }\n.tax-ellipsis-full   { display: none; }\n.tax-ellipsis:hover .tax-ellipsis-short { display: none; }\n.tax-ellipsis:hover .tax-ellipsis-full  { display: inline; color: #333; }\n\n.tax-search               { position: relative; margin: 8px 0; }\n.tax-search-input         { width: 100%; padding: 4px 8px; font-size: 14px;\n                            border: 1px solid #bbb; border-radius: 3px; }\n.tax-search-results       { position: absolute; left: 0; right: 0; top: 100%;\n                            max-height: 280px; overflow-y: auto; z-index: 10;\n                            background: white; border: 1px solid #bbb;\n                            border-top: none; border-radius: 0 0 3px 3px;\n                            box-shadow: 0 2px 8px rgba(0,0,0,0.1); }\n.tax-search-hit           { padding: 4px 8px; cursor: pointer; font-size: 13px; }\n.tax-search-hit:hover,\n.tax-search-hit-active    { background: #e3ecff; }\n.tax-search-name          { font-weight: 600; }\n.tax-search-syn           { color: #777; font-style: italic; }\n.tax-search-rank          { color: #0366d6; font-size: 11px; text-transform: uppercase;\n                            margin-left: 4px; }\n.tax-search-count         { color: #555; font-size: 12px; }\n.tax-search-empty         { padding: 6px 8px; color: #777; font-style: italic; font-size: 13px; }\n\n.tax-node-highlight       { outline: 2px solid #ffc107;\n                            animation: taxFlash 1.6s ease-out; }\n@keyframes taxFlash {\n  0%   { background-color: #fff3cd; }\n  100% { background-color: transparent; }\n}\n\n\n",".visible-detail {\n    border: 1px solid #557B74;\n    padding: 6px 12px;\n}\n.detail {\n    margin-right: auto;\n    margin-left: auto;\n    padding-left: 15px;\n    padding-right: 15px;\n}\n.table {\n    width: 100%;\n    max-width: 100%;\n}\n.xrefs {\n    border-collapse: collapse;\n    border-spacing: 0;\n    border-color: grey;\n    table-layout: auto;\n    width: 100%;\n}\n/* Col 1 (PubMed link) and col 2 (Curation source): shrink to content */\ntable.xrefs th:nth-child(1),\ntable.xrefs td:nth-child(1),\ntable.xrefs th:nth-child(2),\ntable.xrefs td:nth-child(2) {\n    width: 1%;\n    white-space: nowrap;\n}\n/* Col 3 (Title/Description): fill remaining space */\ntable.xrefs th:nth-child(3),\ntable.xrefs td:nth-child(3) {\n    width: 100%;\n}\n/* Legacy column-width classes — kept for other tables that use them */\n.xref-name-col { white-space: nowrap; }\n.xref-value-col { }\n.xref-80-col { }\n.xref-70-col { }\n.xref-10-col { white-space: nowrap; }\n.xref-id-list {\n    padding-left: 0;\n    list-style: none;\n}\n.result-gene {\n    padding: 0.2em;\n    border: 5px solid white;\n}\n.result-gene:hover {\n    border-color: antiquewhite;\n}\n.gene-title {\n    /*padding-top:0.5em;*/\n}\n.gene-id {\n    /*white-space: nowrap;*/\n    color: black;\n}\n.gene-name {\n    color: #557B74;\n    margin-bottom: 0;\n}\n.gene-description {\n    margin-bottom: 0;\n}\n.gene-species {\n    white-space: nowrap;\n    font-style: italic;\n    font-size:small;\n    font-weight: bold;\n}\n.gene-synonyms {\n    font-size: small;\n}\n.gene-alt-ids {\n    font-size: small;\n    color: #6c757d;\n}\n.gene-extras {\n    border: dashed 1px blue;\n}\n.gene-panlink {\n    float: right;\n    margin-left: 0.5rem;\n    margin-bottom: 0.25rem;\n}\n.gene-panlink img {\n    height: 60px;\n    width: auto;\n    max-width: 100%;\n    vertical-align: top;\n}\n.suggestion-panlink img {\n    height: 60px;\n    width: auto;\n    max-width: 100%;\n}\n@media (max-width: 1200px) {\n    .gene-panlink img,\n    .suggestion-panlink img {\n        height: 30px;\n    }\n}\n@media (max-width: 767px) {\n    /* Allow the ortholog/TAIR box to stack below the gene title on mobile.\n       It stays inside .result-gene-summary, so it still appears above .gene-detail-tabs. */\n    .result-gene-summary {\n        flex-wrap: wrap;\n    }\n    .result-gene-title-body {\n        flex: 1 1 100%;\n    }\n    .model-ortholog,\n    .closest-ortholog,\n    .gene-summary-tair {\n        flex: 1 1 100%;\n        max-width: 100%;\n        width: auto;\n        margin-left: 0;\n        margin-top: 8px;\n    }\n    /* Stack ortholog box contents vertically on narrow screens */\n    .model-ortholog,\n    .closest-ortholog {\n        grid-template-columns: 1fr;\n    }\n    .model-ortholog h3.gene-id,\n    .closest-ortholog h3.gene-id {\n        grid-column: 1;\n        grid-row: 2;\n    }\n    .model-ortholog .gene-species,\n    .closest-ortholog .gene-species {\n        grid-column: 1;\n        grid-row: 3;\n        text-align: left;\n    }\n    .model-ortholog .rep-identity,\n    .closest-ortholog .rep-identity {\n        grid-column: 1;\n        grid-row: 4;\n        text-align: left;\n    }\n    .model-ortholog p,\n    .closest-ortholog p {\n        grid-row: 5;\n    }\n    /* Show descriptions on mobile (no hover available) */\n    .model-ortholog p,\n    .closest-ortholog p {\n        display: block;\n    }\n    /* PanLink: stop floating, display inline next to gene title */\n    .gene-panlink {\n        float: none;\n        display: inline;\n        margin-left: 0.25rem;\n        margin-bottom: 0;\n        vertical-align: middle;\n    }\n    /* Papers table only: hide \"Curation source\" column on small screens */\n    table.xrefs-pubs th:nth-child(2),\n    table.xrefs-pubs td:nth-child(2) {\n        display: none;\n    }\n}\n.gene-curation {\n    flex-shrink: 0;\n    margin-top: 20px;\n    border: 1px solid grey;\n}\n.gene-curation span {\n    width: 20px;\n    display: inline-block;\n    color: white;\n    text-align: center;\n}\n.gene-curation .okay {\n    background-color: #0c00f3;\n}\n.gene-curation .flagged {\n    background-color: darkorange;\n}\n.gene-detail-tabs {\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n}\n/* Tab items: 4-per-row by default, overrides Bootstrap col-md-1 (8.33%) */\n.gene-detail-tabs > div {\n    flex: 0 0 25%;\n    width: 25%;\n    max-width: 25%;\n    box-sizing: border-box;\n    padding: 6px 4px;\n    min-height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n/* At wide viewports, all 8 fit comfortably in one row */\n@media (min-width: 992px) {\n    .gene-detail-tabs > div {\n        flex: 0 0 12.5%;\n        width: 12.5%;\n        max-width: 12.5%;\n    }\n}\n.gene-detail-tab-closed {\n    color: darkgreen;\n    cursor: pointer;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-disabled {\n    /*color: white;*/\n    /*background-color: lightgray;*/\n    color: lightgray;\n    cursor: not-allowed;\n}\n.gene-detail-tab-empty {\n    color: darkgreen;\n    cursor: pointer;\n    font-style: oblique;\n    /*background-color: lightgray;*/\n}\n.gene-detail-tab-empty::before {\n    content: \"Add \";\n}\n.gene-detail-tab-expanded {\n    color: white;\n    background-color: #557B74;\n    cursor: pointer;\n}\n.result-gene-summary {\n    display: flex;\n    flex-flow: row nowrap;\n    justify-content: flex-start;\n    align-items: flex-start;\n}\n.result-gene-summary .species-name {\n    white-space: nowrap;\n    font-style: italic;\n}\n.result-gene-title-body {\n    flex: 1 1 auto;\n    max-width: 1036px;\n    width: 100%;\n}\n.model-ortholog, .closest-ortholog, .gene-summary-tair {\n    cursor: pointer;\n    flex: 0 0 auto;\n    max-width: 380px;\n    width: 380px;\n    font-size: smaller;\n    margin-top: 10px;\n    padding: 0.25rem 0.5rem 0.5rem;\n    margin-left: 1rem;\n    border: 1px solid darkorange;\n}\n\n/* Ortholog boxes: grid — title row, then gene name left / species+identity right */\n.model-ortholog, .closest-ortholog {\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0 0.5rem;\n    align-items: center;\n}\n\n/* Gene name: left column, smaller font to fit alongside species */\n.model-ortholog h3.gene-id,\n.closest-ortholog h3.gene-id {\n    grid-column: 1;\n    grid-row: 2;\n    margin: 0;\n    font-size: 1.5em;\n    overflow-wrap: break-word;\n    word-break: break-all;\n    min-width: 0;\n}\n\n/* Species: right column, top of the pair */\n.model-ortholog .gene-species,\n.closest-ortholog .gene-species {\n    grid-column: 2;\n    grid-row: 2;\n    text-align: right;\n    align-self: end;\n}\n\n/* Identity: right column, below species (same row group as gene name) */\n.model-ortholog .rep-identity,\n.closest-ortholog .rep-identity {\n    grid-column: 2;\n    grid-row: 3;\n    text-align: right;\n    margin-left: 0;\n    padding-right: 0;\n    padding-top: 0;\n    align-self: start;\n}\n\n/* Description: hidden by default; show on hover/focus */\n.model-ortholog p,\n.closest-ortholog p {\n    grid-column: 1 / -1;\n    grid-row: 4;\n    display: none;\n    margin: 0.25rem 0 0;\n}\n.model-ortholog:hover p,\n.model-ortholog:focus p,\n.closest-ortholog:hover p,\n.closest-ortholog:focus p {\n    display: block;\n}\n\n.model-ortholog {\n    border: 1px dotted darkorange;\n}\n.closest-ortholog {\n    border: 1px dotted darkgreen;\n}\n\n.gene-summary-tair {\n    border: 1px dotted darkblue;\n}\n.gene-summary-tair .rest {\n    display: none;\n}\n\n.gene-summary-tair:hover .rest {\n    display: inline;\n}\n.gene-summary-tair:focus .rest {\n    display: inline;\n}\n.gene-summary-tair:hover .ellipsis {\n    display: none;\n}\n.gene-summary-tair:focus .ellipsis {\n    display: none;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.closest-ortholog::before,\n.model-ortholog::before,\n.gene-summary-tair::before {\n    display: block;\n    grid-column: 1 / -1;\n    grid-row: 1;\n    text-align: center;\n    border: dotted 1px;\n    padding: 0 0.5rem;\n    margin: -0.25rem -0.5rem 0.25rem;  /* bleed to box edges */\n    background: #fff;\n}\n\n.model-ortholog::before {\n    content: \"Model Species Homolog\";\n    color: orange;\n}\n.closest-ortholog::before {\n    content: \"Closest Annotated Homolog\";\n    color: darkgreen;\n}\n\n/* this is the \"title\" of the closest ortholog box */\n.gene-summary-tair::before {\n    content: \"TAIR Curated Description\";\n    color: darkblue;\n}\n\n.rep-identity {\n    margin-left: auto;\n    padding-right: 10px;\n    padding-top: 5px;\n    font-style: italic;\n}\n.rep-identity::after {\n    content: \"% identity\";\n}\n.eFP::before {\n    content: url(\"../../static/images/BAR-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.eFP::after {\n    content: 'New!';\n    color: red;\n    padding-left:2px;\n    font-weight: bold;\n    font-style: italic;\n    font-size: x-small;\n    line-height: normal;\n    vertical-align: super;\n}\n.gxa::before {\n    content: url(\"../../static/images/expression-atlas-logo.png\");\n    padding-right:5px;\n    position: relative;\n    top: 5px;\n}\n.gene-search-pic-sugg {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/suggestions.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-results {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/results.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n.gene-search-pic-genetree {\n    width: 100%;\n    height: 200px;\n    background: url(\"../../static/images/genetree.png\");\n    background-size: contain;\n    background-repeat: no-repeat;\n}\n\n/* tbrowse portals its tooltips/popups to document.body; without an\n   explicit z-index they render behind the bootstrap modal (z-index\n   ~1050) when a detail panel is in fullscreen mode. */\n.tbrowse-root,\n.tbrowse-tooltip,\n.tbrowse-fieldpicker,\n.tbrowse-msa-mask-panel {\n    z-index: 1100 !important;\n}\n",null,null,"/* ===== Pathways layout ===== */\n\n.pathways-layout {\n    display: flex;\n    align-items: stretch;\n}\n\n.pathways-tree-toggle {\n    flex: 0 0 auto;\n    width: 24px;\n    border: 1px solid #ccc;\n    border-right: none;\n    background: #f5f5f5;\n    cursor: pointer;\n    font-size: 12px;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #666;\n    border-radius: 4px 0 0 4px;\n}\n.pathways-tree-toggle:hover {\n    background: #e0e0e0;\n    color: #333;\n}\n\n.pathways-tree-panel {\n    flex: 0 0 250px;\n    width: 250px;\n    height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    border: 1px solid #ccc;\n    border-right: none;\n}\n\n.pathways-diagram-panel {\n    flex: 1 1 auto;\n    min-width: 0;\n}\n\n.pathways-resize-handle,\n.details-resize-handle {\n    height: 6px;\n    background: #e0e0e0;\n    border: 1px solid #ccc;\n    border-top: none;\n    cursor: ns-resize;\n    transition: background 0.15s;\n}\n.pathways-resize-handle:hover,\n.details-resize-handle:hover {\n    background: #179ed3;\n}\n\n/* ===== Compact tree items (react-simple-tree-menu overrides) ===== */\n\n.pathways-tree-panel .rstm-tree-item-group {\n    border-top: none;\n}\n\n.pathways-tree-panel .rstm-tree-item {\n    padding: 0.2rem 0.4rem;\n    font-size: 0.8rem;\n    line-height: 1.3;\n    border-bottom: 1px solid #eee;\n}\n/* Override inline padding-left set by react-simple-tree-menu.\n   The library uses: 0.75 + iconSize*(hasNodes?0:1) + level*1.75 rem\n   We shrink the per-level indent from 1.75rem to 0.75rem */\n.pathways-tree-panel .rstm-tree-item-level0 { padding-left: 0.4rem !important; }\n.pathways-tree-panel .rstm-tree-item-level0 > .rstm-toggle-icon { margin-left: 0; }\n.pathways-tree-panel .rstm-tree-item-level1 { padding-left: 1.15rem !important; }\n.pathways-tree-panel .rstm-tree-item-level2 { padding-left: 1.9rem !important; }\n.pathways-tree-panel .rstm-tree-item-level3 { padding-left: 2.65rem !important; }\n.pathways-tree-panel .rstm-tree-item-level4 { padding-left: 3.4rem !important; }\n.pathways-tree-panel .rstm-tree-item-level5 { padding-left: 4.15rem !important; }\n.pathways-tree-panel .rstm-tree-item-level6 { padding-left: 4.9rem !important; }\n.pathways-tree-panel .rstm-tree-item-level7 { padding-left: 5.65rem !important; }\n\n.pathways-tree-panel .rstm-tree-item--active {\n    color: white;\n    background: #179ed3;\n    border-bottom-color: #127aa8;\n}\n\n.pathways-tree-panel .rstm-toggle-icon-symbol {\n    width: 1rem;\n    height: 1rem;\n    line-height: 1rem;\n    font-size: 0.7rem;\n}\n\n/* ===== Legacy tree-view classes ===== */\n\n.tree-view-root {}\n\n.tree-view-node {\n    margin-left: 8px;\n}\n\n.tree-view-node-collapse-toggle.collapse-spacer {\n    width: 12px;\n    display: inline-block;\n}\n\n.tree-view-node-collapse-toggle {\n    margin-right: 2px;\n    width: 12px;\n}\n\n.tree-view-node-label {\n    font-size: smaller;\n    margin-left: 2px;\n    padding: 1px;\n    border: 1px solid #fff;\n}\n\n.tree-view-node-label.selected {\n    border: 1px solid #003f81;\n    border-radius: 3px;\n    background-color: #808080;\n}\n\n.tree-view-node-checkbox {}\n.tree-view-node-children {}\n\n",null,".button-like-link {\n    display: inline-block;\n    padding: 0;\n    background-color: #fff0;\n    color: #007bff;\n    text-decoration: underline;\n    border: none;\n    cursor: pointer;\n}\n","/* styles.css */\n.fasta-container {\n    position: relative;\n    padding: 2ch;\n    background-color: #fcfffd;\n    border-color: #557b74;\n    border-style: dashed;\n    line-height: 0.925em;\n    /*margin: auto; !* Center the container *!*/\n}\n.styled-span {\n    display: flex;\n    align-items: center;\n    text-align: center;\n}\n.vertical-line {\n    flex-grow: 1;\n    height: 20px;\n    background-color: black;\n}\n.horizontal-line {\n    width: 60px;\n    min-width: 15px;\n    height: 3px;\n    background-color: black;\n    margin: 0;\n}\ncode.fasta {\n    white-space: pre-wrap;\n    color: #595959;\n}\n.header {\n    color: black;\n}\n.upstream {\n    color: #80a0a0;\n}\n.downstream {\n    color: #80a0a0;\n}\n.intron {\n    color: #aaaaaa;\n}\n.utr5 {\n    background-color: #aaccaf;\n}\n.utr5-other {\n    background-color: #cfe1d2;\n}\n.cds {\n    background-color: #a7b4d3;\n}\n.cds-other {\n    background-color: #d0d8e6;\n}\n.utr3 {\n    background-color: #c5a3bf;\n}\n.utr3-other {\n    background-color: #dcc9d9;\n}\n.square-utr5 {\n    width: 20px;\n    height: 20px;\n    background: linear-gradient(to bottom right, #aaccaf 0%, #aaccaf 50%, #cfe1d2 50%, #cfe1d2 100%);\n}\n.square-cds {\n    width: 20px;\n    height: 20px;\n    background: linear-gradient(to bottom right, #a7b4d3 0%, #a7b4d3 50%, #d0d8e6 50%, #d0d8e6 100%);\n}\n.square-utr3 {\n    width: 20px;\n    height: 20px;\n    background: linear-gradient(to bottom right, #c5a3bf 0%, #c5a3bf 50%, #dcc9d9 50%, #dcc9d9 100%);\n}\n\n.flanking-guide {\n    display: grid;\n    grid-template-columns: auto 60px auto 60px auto;\n    align-items: center;\n    row-gap: 2px;\n    column-gap: 0;\n    width: fit-content;\n}\n/* Row 1 */\n.flanking-label-left {\n    text-align: right;\n    padding-right: 0.5rem;\n}\n.flanking-center-label {\n    text-align: center;\n    white-space: nowrap;\n    padding: 0 0.25rem;\n}\n.flanking-guide > .horizontal-line {\n    height: 3px;\n    background-color: black;\n    align-self: center;\n}\n.flanking-label-right {\n    text-align: left;\n    padding-left: 0.5rem;\n}\n/* Row 2 */\n.flanking-value-left {\n    text-align: right;\n    min-width: 5ch;\n    padding-right: 0.5rem;\n}\n.flanking-value-right {\n    text-align: left;\n    min-width: 5ch;\n    padding-left: 0.5rem;\n}\n\n.reverse-slide {\n    direction: rtl;\n}\n.fasta-key {\n    position: absolute;\n    top: 9px;\n    right: 40px;\n    background: none;\n    border: none;\n    cursor: default;\n    font-family: monospace;\n    font-size: 11pt;\n    color: #555;\n}\n.copy-button {\n    position: absolute;\n    top: 3px;\n    right: -5px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    font-size: 1.5rem;\n    color: #555;\n}\n.notification {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: #050505;\n    color: #fff;\n    padding: 5px;\n    z-index: 999;\n    font-weight: bold;\n    font-style: italic;\n    font-size: smaller;\n}\n",null,".accordion-button {\n    padding:0.4rem!important;\n}\n.accordion-button:hover {\n    background-color: #dbe8f3;\n}",".exporter-view {\n  display: grid;\n  grid-template-columns: 1fr 8px 1fr;\n  gap: 0;\n  padding: 0.75rem;\n  min-height: 400px;\n}\n\n.exporter-view > .exporter-pane:first-child {\n  margin-right: 0.5rem;\n}\n\n.exporter-view > .exporter-pane.exporter-right-pane {\n  margin-left: 0.5rem;\n}\n\n.exporter-divider {\n  cursor: col-resize;\n  background: transparent;\n  position: relative;\n  align-self: stretch;\n}\n\n.exporter-divider::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 2px;\n  background: #d0d4da;\n  border-radius: 1px;\n  transition: background 0.15s;\n}\n\n.exporter-divider:hover::before,\n.exporter-divider.dragging::before {\n  background: #7a8aa0;\n  width: 3px;\n}\n\n.exporter-pane {\n  border: 1px solid #e0e0e0;\n  border-radius: 4px;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.exporter-pane-header {\n  padding: 0.5rem 0.75rem;\n  border-bottom: 1px solid #e0e0e0;\n  background: #f8f9fa;\n  font-size: 0.9rem;\n}\n\n.exporter-pane-header-row {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.exporter-field-search-inline {\n  margin-left: auto;\n  margin-bottom: 0;\n  max-width: 220px;\n  height: 1.75rem;\n  font-size: 0.85rem;\n  padding: 0.15rem 0.5rem;\n}\n\n.exporter-pane-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 0.5rem;\n}\n\n.exporter-panel-empty {\n  padding: 1rem;\n  color: #888;\n  text-align: center;\n  font-size: 0.9rem;\n}\n\n/* --- FieldTree --- */\n\n.exporter-field-tree {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.exporter-field-search {\n  margin-bottom: 0.5rem;\n  font-size: 0.9rem;\n}\n\n.exporter-field-tree-body {\n  flex: 1;\n  overflow-y: auto;\n}\n\n.exporter-group {\n  margin-bottom: 0.25rem;\n}\n\n.exporter-group-header {\n  cursor: pointer;\n  padding: 0.25rem 0.5rem;\n  background: #eef1f4;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  user-select: none;\n  font-size: 0.9rem;\n}\n\n.exporter-group-header:hover {\n  background: #e3e7ec;\n}\n\n.exporter-group-chevron {\n  display: inline-flex;\n  align-items: center;\n  color: #666;\n}\n\n.exporter-group-count {\n  font-size: 0.75rem;\n  color: #666;\n  background: #fff;\n  padding: 0 0.4rem;\n  border-radius: 10px;\n  border: 1px solid #ddd;\n}\n\n.exporter-group-actions {\n  margin-left: auto;\n  display: inline-flex;\n  gap: 0.25rem;\n}\n\n.exporter-group-action {\n  font-size: 0.7rem;\n  padding: 0.05rem 0.4rem;\n  background: #fff;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  color: #333;\n  cursor: pointer;\n  line-height: 1.4;\n}\n\n.exporter-group-action:hover:not(:disabled) {\n  background: #f0f4f8;\n  border-color: #88a;\n}\n\n.exporter-group-action:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.exporter-group-fields {\n  list-style: none;\n  margin: 0.25rem 0 0.5rem 1.25rem;\n  padding: 0;\n}\n\n.exporter-group-fields li {\n  padding: 0.1rem 0.25rem;\n  font-size: 0.85rem;\n}\n\n.exporter-group-fields label {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  margin: 0;\n  padding: 0.1rem 0.25rem;\n  border-radius: 2px;\n  width: 100%;\n}\n\n.exporter-group-fields label:hover {\n  background: #f0f4f8;\n}\n\n.exporter-field-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-field-badge {\n  font-size: 0.7rem;\n  color: #888;\n  font-family: monospace;\n}\n\n.exporter-group-truncated {\n  color: #888;\n  font-size: 0.8rem;\n  padding-left: 0.5rem;\n}\n\n/* --- SelectedFields --- */\n\n.exporter-selected {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.exporter-selected-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.25rem 0;\n  margin-bottom: 0.5rem;\n  border-bottom: 1px solid #eee;\n}\n\n.exporter-selected-count {\n  font-size: 0.75rem;\n  color: #666;\n  background: #eef1f4;\n  padding: 0 0.5rem;\n  border-radius: 10px;\n}\n\n.exporter-clear-btn {\n  margin-left: auto;\n  font-size: 0.8rem;\n  padding: 0;\n}\n\n.exporter-selected-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  flex: 1;\n}\n\n.exporter-selected-list li {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.25rem 0.35rem;\n  border-bottom: 1px solid #f0f0f0;\n  font-size: 0.85rem;\n}\n\n.exporter-selected-index {\n  font-family: monospace;\n  color: #888;\n  min-width: 1.75rem;\n}\n\n.exporter-selected-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-selected-group {\n  color: #888;\n}\n\n.exporter-selected-actions {\n  display: flex;\n  gap: 0.15rem;\n}\n\n.exporter-selected-actions button {\n  padding: 0.1rem 0.35rem;\n  line-height: 1;\n}\n\n/* --- Right pane (selected + preview) --- */\n\n.exporter-right-pane {\n  max-height: 70vh;\n}\n\n.exporter-right-split {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: hidden;\n}\n\n.exporter-selected-section {\n  flex: 0 0 auto;\n  max-height: 35%;\n  overflow-y: auto;\n  padding: 0.5rem;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.exporter-preview-section {\n  flex: 1;\n  overflow: hidden;\n  padding: 0.5rem;\n  display: flex;\n  flex-direction: column;\n}\n\n/* --- Preview --- */\n\n.exporter-preview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.exporter-preview-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding-bottom: 0.35rem;\n  margin-bottom: 0.35rem;\n  border-bottom: 1px solid #eee;\n  font-size: 0.85rem;\n}\n\n.exporter-preview-format label {\n  margin-right: 0.5rem;\n  cursor: pointer;\n}\n\n.exporter-preview-format input {\n  margin-right: 0.25rem;\n}\n\n.exporter-preview-status {\n  margin-left: auto;\n  color: #888;\n}\n\n.exporter-cutoffs-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.1rem 0.5rem;\n  font-size: 0.8rem;\n}\n\n.exporter-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.35);\n  z-index: 1050;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.exporter-modal {\n  background: #fff;\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n  width: min(420px, 90vw);\n  display: flex;\n  flex-direction: column;\n}\n\n.exporter-modal-header {\n  display: flex;\n  align-items: center;\n  padding: 0.6rem 0.9rem;\n  border-bottom: 1px solid #eee;\n}\n\n.exporter-modal-close {\n  margin-left: auto;\n  background: transparent;\n  border: 0;\n  font-size: 1.25rem;\n  line-height: 1;\n  color: #666;\n  cursor: pointer;\n  padding: 0 0.25rem;\n}\n\n.exporter-modal-body {\n  padding: 0.9rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.85rem;\n}\n\n.exporter-modal-field label {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  font-size: 0.85rem;\n  font-weight: 500;\n}\n\n.exporter-modal-field input {\n  font: inherit;\n  padding: 0.25rem 0.5rem;\n  border: 1px solid #c0c4ca;\n  border-radius: 3px;\n}\n\n.exporter-modal-field small {\n  color: #777;\n  font-size: 0.75rem;\n  margin-top: 0.15rem;\n}\n\n.exporter-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  padding: 0.6rem 0.9rem;\n  border-top: 1px solid #eee;\n}\n\n.exporter-preview-status.error {\n  color: #c33;\n}\n\n.exporter-preview-body {\n  flex: 1;\n  overflow: auto;\n  background: #fafbfc;\n  border: 1px solid #eee;\n  border-radius: 3px;\n}\n\n.exporter-preview-empty {\n  padding: 1rem;\n  color: #888;\n  text-align: center;\n}\n\n.exporter-preview-tsv-scroll {\n  overflow: auto;\n  max-width: 100%;\n}\n\n.exporter-preview-tsv {\n  border-collapse: collapse;\n  font-size: 0.8rem;\n  font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n  width: auto;\n}\n\n.exporter-preview-tsv th,\n.exporter-preview-tsv td {\n  padding: 0.2rem 0.5rem;\n  border: 1px solid #e5e7ea;\n  max-width: 420px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-preview-tsv th {\n  position: relative;\n}\n\n.exporter-preview-col-resizer {\n  position: absolute;\n  top: 0;\n  right: -3px;\n  width: 6px;\n  height: 100%;\n  cursor: col-resize;\n  user-select: none;\n  z-index: 2;\n}\n\n.exporter-preview-col-resizer::after {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 1px;\n  background: transparent;\n  transition: background 0.15s;\n}\n\n.exporter-preview-col-resizer:hover::after,\n.exporter-preview-col-resizer:active::after {\n  background: #7a8aa0;\n  width: 2px;\n}\n\n.exporter-preview-tsv th {\n  background: #f0f3f6;\n  text-align: left;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  padding: 0.15rem 0.25rem;\n}\n\n.exporter-preview-th-inner {\n  display: flex;\n  align-items: center;\n  gap: 0.15rem;\n  min-width: 0;\n}\n\n.exporter-preview-th-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exporter-preview-reorder-btn {\n  flex: 0 0 auto;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0;\n  line-height: 1;\n  color: #555;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n}\n\n.exporter-preview-reorder-btn:hover:not(:disabled) {\n  background: #fff;\n  border-color: #bbb;\n  color: #111;\n}\n\n.exporter-preview-reorder-btn:disabled {\n  opacity: 0.25;\n  cursor: default;\n}\n\n.exporter-preview-fields-count {\n  color: #666;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.35rem;\n}\n\n.exporter-preview-tsv tr:hover td {\n  background: #f4f7fa;\n}\n\n.exporter-preview-empty-row {\n  text-align: center;\n  color: #888;\n  padding: 1rem !important;\n}\n\n.exporter-preview-json {\n  margin: 0;\n  padding: 0.5rem;\n  font-size: 0.75rem;\n  line-height: 1.4;\n}\n\n/* --- Export footer --- */\n\n.exporter-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding: 0.5rem 0.75rem;\n  border-top: 1px solid #e0e0e0;\n  background: #f8f9fa;\n  flex: 0 0 auto;\n}\n\n.exporter-footer-summary {\n  color: #555;\n}\n",".exprviz-view {\n  padding: 0.5rem;\n}\n\n.exprviz-tabs {\n  margin-bottom: 0.5rem;\n}\n\n.exprviz-tab-panel {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.5rem 0;\n  /* Constrain children so the grid scrolls internally instead of bleeding\n   * out and forcing the page to scroll horizontally. */\n  min-width: 0;\n  overflow: hidden;\n}\n\n.exprviz-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n/* Host applications (e.g. sorghum-webapp) sometimes ship global stylesheets\n * that override `.btn` / `.btn-sm` with `!important` — fat padding, custom\n * font-weight, transformed text — which leaves our toolbar buttons at\n * inconsistent sizes (since plain `<Button>` and `<ToggleButton>` inside a\n * `<ToggleButtonGroup>` pick up different rules). Re-state Bootstrap 5's\n * small-button metrics here with higher specificity and `!important`, scoped\n * to `.exprviz-toolbar`, so the toolbar always looks the same regardless of\n * what the host's theme does. */\n.exprviz-toolbar .btn,\n.exprviz-toolbar .btn.btn-sm,\n.exprviz-toolbar .btn-group > .btn,\n.exprviz-toolbar .btn-group > .btn.btn-sm,\n.exprviz-toolbar .btn-group-sm > .btn,\n.exprviz-toolbar label.btn {\n  padding: 0.25rem 0.5rem !important;\n  font-size: 0.875rem !important;\n  line-height: 1.5 !important;\n  font-weight: 400 !important;\n  text-transform: none !important;\n  letter-spacing: normal !important;\n  height: auto !important;\n  min-height: 0 !important;\n  border-radius: 0.2rem !important;\n}\n\n/* Restore the squared-off inner edges within a ToggleButtonGroup. */\n.exprviz-toolbar .btn-group > .btn:not(:first-child):not(:last-child),\n.exprviz-toolbar .btn-group > .btn:not(:first-child):not(:last-child).btn-sm {\n  border-radius: 0 !important;\n}\n.exprviz-toolbar .btn-group > .btn:first-child:not(:last-child),\n.exprviz-toolbar .btn-group > .btn:first-child:not(:last-child).btn-sm {\n  border-top-right-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n.exprviz-toolbar .btn-group > .btn:last-child:not(:first-child),\n.exprviz-toolbar .btn-group > .btn:last-child:not(:first-child).btn-sm {\n  border-top-left-radius: 0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.exprviz-toolbar .btn-group {\n  vertical-align: middle;\n}\n\n/* Same idea for the status text — host stylesheets sometimes restyle\n * <span>s in unexpected ways. */\n.exprviz-toolbar .exprviz-status {\n  font-weight: 400 !important;\n  text-transform: none !important;\n  letter-spacing: normal !important;\n}\n\n.exprviz-status {\n  color: #666;\n  font-size: 0.85rem;\n  margin-left: 0.5rem;\n}\n\n.exprviz-warning {\n  color: #b06000;\n  background: #fff8e0;\n  border: 1px solid #f0d080;\n  border-radius: 3px;\n  padding: 2px 6px;\n  font-size: 0.8rem;\n  cursor: help;\n}\n\n.exprviz-body {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.exprviz-plot {\n  border: 1px solid #ddd;\n  background: #fff;\n  min-height: 120px;\n  overflow: hidden;\n}\n\n.exprviz-resizer {\n  height: 8px;\n  margin: 2px 0;\n  background: #f0f0f0;\n  border-top: 1px solid #ddd;\n  border-bottom: 1px solid #ddd;\n  cursor: row-resize;\n  flex: none;\n}\n\n.exprviz-resizer::before {\n  content: '';\n  display: block;\n  width: 36px;\n  height: 2px;\n  background: #aaa;\n  border-radius: 1px;\n  margin: 3px auto;\n}\n\n.exprviz-resizer:hover,\n.exprviz-resizer:active {\n  background: #e0e8f5;\n}\n\n.exprviz-resizer:hover::before,\n.exprviz-resizer:active::before {\n  background: #2a6ebb;\n}\n\n.exprviz-pc-container {\n  width: 100%;\n  height: 100%;\n}\n\n.exprviz-pc-container svg {\n  display: block;\n}\n\n.exprviz-pc-lines path {\n  fill: none;\n  stroke: steelblue;\n}\n\n.exprviz-pc-line-in {\n  stroke-opacity: 0.4;\n}\n\n.exprviz-pc-line-out {\n  stroke-opacity: 0.04;\n}\n\n.exprviz-pc-lines path:not(.exprviz-pc-line-in):not(.exprviz-pc-line-out) {\n  stroke-opacity: 0.25;\n}\n\n.exprviz-pc-lines path.exprviz-pc-line-hover {\n  stroke: #d62728;\n  stroke-opacity: 1;\n  stroke-width: 2;\n}\n\n.exprviz-pc-axis-dragging .domain,\n.exprviz-pc-axis-dragging .tick line {\n  stroke: #555;\n}\n\n.exprviz-pc-axis-dragging .exprviz-pc-axis-label {\n  font-weight: bold;\n}\n\n.exprviz-plot-empty,\n.exprviz-table-empty {\n  padding: 1rem;\n  color: #888;\n}\n\n.exprviz-pc-tooltip {\n  position: fixed;\n  z-index: 1000;\n  background: #fff;\n  border: 1px solid #bbb;\n  border-radius: 3px;\n  box-shadow: 0 2px 6px rgba(0,0,0,0.15);\n  padding: 6px 8px;\n  font-size: 0.78rem;\n  line-height: 1.35;\n  max-width: 360px;\n  pointer-events: none;\n  color: #222;\n}\n\n.exprviz-pc-tip-section {\n  margin-top: 4px;\n  font-size: 0.72rem;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #888;\n}\n\n.exprviz-pc-tip-row {\n  margin-left: 0.4rem;\n}\n\n.exprviz-pc-tip-key {\n  font-weight: 600;\n}\n\n/* ---- heatmap ---- */\n\n.exprviz-hm-container {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  /* Horizontal scroll lives on the outer container so the sticky-positioned\n   * column header and the cell body translate together — column labels\n   * always stay aligned with the cells beneath them. */\n  overflow-x: auto;\n}\n\n.exprviz-hm-inner {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 100%;\n}\n\n.exprviz-hm-container svg {\n  display: block;\n}\n\n.exprviz-hm-header {\n  flex: 0 0 auto;\n  background: #fff;\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.exprviz-hm-body {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n}\n\n.exprviz-hm-collabel {\n  fill: #222;\n}\n\n.exprviz-hm-rowlabels text {\n  fill: #444;\n}\n\n.exprviz-hm-cells rect {\n  shape-rendering: crispEdges;\n  cursor: crosshair;\n}\n\n.exprviz-hm-legend {\n  position: absolute;\n  top: 6px;\n  right: 6px;\n  display: flex;\n  gap: 6px;\n  background: rgba(255, 255, 255, 0.92);\n  border: 1px solid #d0d7de;\n  border-radius: 3px;\n  padding: 3px 6px;\n  font-size: 0.72rem;\n  line-height: 1.1;\n  pointer-events: auto;\n  z-index: 2;\n}\n\n.exprviz-hm-legend-bin {\n  display: flex;\n  align-items: center;\n  gap: 3px;\n}\n\n.exprviz-hm-legend-swatch {\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n  border: 1px solid rgba(0, 0, 0, 0.15);\n}\n\n.exprviz-hm-legend-label {\n  color: #333;\n  font-variant-numeric: tabular-nums;\n}\n\n.exprviz-table {\n  height: 480px;\n  min-width: 0;\n  overflow: hidden;\n}\n\n.exprviz-aggrid {\n  width: 100%;\n  height: 100%;\n  /* Block the browser's edge-of-scroll back/forward gesture when the user\n   * scrolls all the way left or right inside the grid. */\n  overscroll-behavior-x: contain;\n}\n\n/* ag-grid's scrolling viewports — make sure the back/forward gesture is\n * contained at every level, not just on our outer wrapper. */\n.exprviz-aggrid .ag-body-viewport,\n.exprviz-aggrid .ag-body-horizontal-scroll-viewport,\n.exprviz-aggrid .ag-center-cols-viewport {\n  overscroll-behavior-x: contain;\n}\n\n/* Group-header rows: subtle tinting so each metadata level reads as a band.\n * The :first-of-type column-group rule covers the topmost (study) row. */\n.exprviz-aggrid .ag-header-group-cell {\n  font-size: 0.78rem;\n  border-right: 1px solid #e0e0e0;\n}\n\n.exprviz-aggrid .ag-header-group-cell-label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: 0 6px;\n}\n\n.exprviz-aggrid .exprviz-hg-factors {\n  background: #eef6ff;\n  color: #1e3a5f;\n}\n\n.exprviz-aggrid .exprviz-hg-chars {\n  background: #f5f5f0;\n  color: #4a4a30;\n}\n\n.exprviz-aggrid .exprviz-hg-collapsed {\n  font-style: italic;\n  color: #666;\n}\n\n/* The label cells stacked above the Gene ID and Name columns — Study/Title,\n * every Factor/<factor type> row, every Characteristic/<char type> row,\n * and the collapsed-section placeholders — are rendered via the\n * LabelHeaderGroup / ToggleHeaderGroup React components. Both render a\n * full-width div that right-aligns its content, so the alignment is\n * baked into the component DOM and doesn't depend on overriding\n * ag-grid's internal CSS. The leaf cells (\"Gene ID\" / \"Name\") are not\n * wrapped in these components and keep ag-grid's default left alignment. */\n.exprviz-label-header {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  text-align: right;\n  padding-right: 6px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.exprviz-toggle-header {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  width: 100%;\n  padding-right: 6px;\n}\n\n.exprviz-toggle-header:hover {\n  color: #2a6ebb;\n}\n\n.exprviz-toggle-caret {\n  display: inline-block;\n  width: 0.9em;\n  font-size: 0.75em;\n  color: #888;\n  margin-right: 2px;\n}\n\n.exprviz-toggle-header:hover .exprviz-toggle-caret {\n  color: #2a6ebb;\n}\n\n.exprviz-fields-layout {\n  display: grid;\n  grid-template-columns: 320px 1fr;\n  gap: 0.75rem;\n  height: 60vh;\n}\n\n.exprviz-tree {\n  overflow-y: auto;\n  border: 1px solid #eee;\n  padding: 0.4rem 0.5rem;\n  font-size: 0.85rem;\n}\n\n.exprviz-tree-search {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 4px 6px;\n  margin-bottom: 0.4rem;\n  border: 1px solid #ccc;\n  border-radius: 3px;\n  font-size: 0.85rem;\n}\n\n.exprviz-tree-group {\n  margin-bottom: 0.5rem;\n}\n\n.exprviz-tree-group-header {\n  cursor: pointer;\n  user-select: none;\n  padding: 2px 0;\n}\n\n.exprviz-tree-caret {\n  display: inline-block;\n  width: 1em;\n  color: #888;\n}\n\n.exprviz-tree-type {\n  margin-left: 0.5rem;\n  border-left: 2px solid transparent;\n  padding-left: 0.25rem;\n}\n\n.exprviz-tree-type.is-active {\n  border-left-color: #2a6ebb;\n}\n\n.exprviz-tree-type-header {\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  padding: 2px 0;\n}\n\n.exprviz-tree-type-header:hover {\n  background: #f5f8ff;\n}\n\n.exprviz-tree-type-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exprviz-tree-type-count {\n  color: #888;\n  font-variant-numeric: tabular-nums;\n  margin-left: 0.5rem;\n}\n\n.exprviz-tree-values {\n  margin: 0.25rem 0 0.5rem 1.25rem;\n  padding-left: 0.25rem;\n  border-left: 1px dashed #e0e0e0;\n}\n\n.exprviz-values-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  margin-bottom: 0.25rem;\n}\n\n.exprviz-tree-value {\n  display: flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 1px 0;\n  cursor: pointer;\n}\n\n.exprviz-tree-value:hover {\n  background: #fafaff;\n}\n\n.exprviz-tree-value-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.exprviz-tree-value-count {\n  color: #888;\n  font-variant-numeric: tabular-nums;\n  font-size: 0.8em;\n}\n\n.exprviz-tree-empty {\n  color: #999;\n  margin-left: 1rem;\n}\n\n.exprviz-fields-preview {\n  overflow: auto;\n  border: 1px solid #eee;\n}\n\n.exprviz-fields-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n}\n\n.exprviz-fields-table th,\n.exprviz-fields-table td {\n  padding: 4px 8px;\n  border-bottom: 1px solid #f0f0f0;\n  white-space: nowrap;\n  text-align: left;\n}\n\n.exprviz-fields-table thead th {\n  position: sticky;\n  top: 0;\n  background: #fafafa;\n  z-index: 1;\n  border-bottom: 1px solid #ddd;\n}\n\n.exprviz-col-factor {\n  background: #eef6ff;\n}\n\n.exprviz-col-char {\n  background: #f5f5f0;\n}\n\n.exprviz-fields-table tbody tr:hover {\n  background: #fafaff;\n}\n\n",".attrtable-view {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n\n.attrtable-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    padding: 0.25rem 0 0.5rem;\n}\n\n.attrtable-status {\n    font-size: small;\n}\n\n/* pale → dark = low → high, matching the tbrowse Expression zone */\n.attrtable-legend {\n    display: flex;\n    align-items: center;\n    gap: 1px;\n    margin-left: auto;\n}\n\n.attrtable-legend span {\n    width: 12px;\n    height: 12px;\n    display: inline-block;\n    border: 1px solid rgba(0, 0, 0, 0.08);\n}\n\n.attrtable-notice {\n    padding: 0.4rem 0.75rem;\n    margin-bottom: 0.5rem;\n    font-size: small;\n}\n\n.attrtable-columns-panel {\n    border: 1px solid #dee2e6;\n    border-radius: 4px;\n    padding: 0.5rem;\n    margin-bottom: 0.5rem;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.attrtable-columns-head {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    margin-bottom: 0.5rem;\n}\n\n.attrtable-field-search {\n    flex: 1;\n}\n\n.attrtable-aggrid {\n    width: 100%;\n    height: 600px;\n    /* Block the browser's edge-of-scroll back/forward gesture when scrolling\n     * all the way left or right inside the grid. */\n    overscroll-behavior-x: contain;\n}\n\n.attrtable-aggrid .ag-body-viewport,\n.attrtable-aggrid .ag-body-horizontal-scroll-viewport,\n.attrtable-aggrid .ag-center-cols-viewport {\n    overscroll-behavior-x: contain;\n}\n\n.attrtable-empty {\n    padding: 1rem;\n    color: #6c757d;\n}\n\n/* Vertical headers for the narrow organ columns: full tissue names read\n * bottom-to-top, centred within each column so they stay inside the cell and\n * never cross the column separators (which they did when slanted). */\n\n/* The quartz theme gives header cells 16px of horizontal padding, which on a\n * 22px organ column leaves the label no room (its container collapses to 0 and\n * overflow:hidden clips it). Zero it so the vertical label uses the full column\n * width — the column itself stays 22px, so the heatmap doesn't get wider. */\n.attrtable-aggrid .attrtable-organ-header {\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n}\n\n.attrtable-rot-header {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    cursor: pointer;\n}\n\n/* Left-justified: the label is anchored at the bottom-left and rises straight\n * up, so every tissue name starts on the same line just above the heatmap\n * (rather than floating centred in the tall header). */\n.attrtable-rot-header > span {\n    position: absolute;\n    /* Rotating -90° about the baseline throws the glyph height to the left of\n     * the pivot, so anchor the pivot ~13px in to keep the text inside its own\n     * 22px column. */\n    left: 13px;\n    bottom: 3px;\n    transform-origin: left bottom;\n    transform: rotate(-90deg);\n    white-space: nowrap;\n    font-size: 10px;\n    line-height: 1;\n}\n\n/* Tight heatmap cells: colour fills the whole (narrow) cell, no padding. */\n.attrtable-aggrid .attrtable-organ-cell {\n    padding: 0 !important;\n}\n\n/* Drop the theme's resize-handle grip (a 2px bar drawn on every header cell's\n * right edge) — it read as a heavy, header-only column separator. Resizing by\n * dragging the edge still works; only the decoration is gone. */\n.attrtable-aggrid .ag-header-cell-resize::after {\n    display: none;\n}\n\n/* Column separators between all columns, clearly visible in both the header and\n * the body (the theme's default border is near-invisible on white). */\n.attrtable-aggrid .ag-cell,\n.attrtable-aggrid .ag-header-cell {\n    border-right: 1px solid #c6ccd2;\n}\n\n/* ...except within the expression heatmap: the organ columns read as one\n * continuous block, so drop their internal separators. The last organ column\n * keeps its right border so the heatmap's outer edge is still divided from the\n * next column. */\n.attrtable-aggrid .attrtable-organ-cell,\n.attrtable-aggrid .attrtable-organ-header {\n    border-right: none;\n}\n\n.attrtable-aggrid .attrtable-organ-cell.attrtable-organ-last,\n.attrtable-aggrid .attrtable-organ-header.attrtable-organ-last {\n    border-right: 1px solid #c6ccd2;\n}\n\n/* With the tall header (organ heatmap shown), sit the plain column labels at\n * the bottom so they line up with the base of the slanted organ labels. */\n.attrtable-aggrid.attrtable-tall-header .ag-header-cell-label {\n    align-items: flex-end;\n    padding-bottom: 3px;\n}\n",".oe-view {\n  padding: 0.25rem 0.5rem;\n}\n\n.oe-layout {\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n}\n\n.oe-layout-tree {\n  max-height: 80vh;\n  overflow: auto;\n  border: 1px solid #e1e4e8;\n  border-radius: 4px;\n  padding: 0.25rem 0.5rem;\n  background: #fafbfc;\n  font-size: 13px;\n  min-width: 0;\n}\n\n.oe-splitter {\n  flex: 0 0 6px;\n  cursor: col-resize;\n  background: transparent;\n  border-left: 1px solid #e1e4e8;\n  border-right: 1px solid #e1e4e8;\n  margin: 0 1px;\n  align-self: stretch;\n}\n\n.oe-splitter:hover,\n.oe-splitter:active {\n  background: #d6e9ff;\n}\n\n.oe-layout-panel {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.oe-tree-leaf {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: 2px;\n}\n\n.oe-tree-leaf:hover {\n  background: #eef5ff;\n}\n\n.oe-tree-leaf-active {\n  background: #d6e9ff !important;\n  font-weight: 600;\n}\n\n.oe-tree-leaf-name {\n  flex: 1 1 auto;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.oe-tree-leaf-count {\n  color: #555;\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n}\n\n.oe-loading {\n  padding: 1rem;\n}\n\n.oe-summary {\n  font-size: 0.9rem;\n  margin: 0.25rem 0 0.5rem 0;\n}\n\n.oe-controls {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.75rem;\n  align-items: end;\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  background-color: #f6f8fa;\n  border: 1px solid #e1e4e8;\n  border-radius: 4px;\n}\n\n.oe-control {\n  min-width: 100px;\n}\n\n.oe-control-grow {\n  flex-grow: 1;\n  min-width: 200px;\n}\n\n.oe-control .form-label {\n  font-size: 0.8rem;\n  margin-bottom: 0.15rem;\n}\n\n.oe-help {\n  display: inline-flex;\n  align-items: center;\n  margin-left: 3px;\n  color: #6c757d;\n  cursor: help;\n  vertical-align: middle;\n  font-size: 0.85em;\n}\n\n.oe-help:hover,\n.oe-help:focus {\n  color: #0366d6;\n  outline: none;\n}\n\n.oe-switch {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.oe-ont-title {\n  font-weight: 600;\n  margin-right: 0.5rem;\n}\n\n.oe-ont-badge {\n  font-weight: normal;\n}\n\n.oe-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.85rem;\n}\n\n.oe-table th,\n.oe-table td {\n  padding: 0.25rem 0.5rem;\n  border-bottom: 1px solid #eee;\n  text-align: left;\n}\n\n.oe-table th {\n  background: #f0f3f6;\n  position: sticky;\n  top: 0;\n}\n\n.oe-sort-th {\n  cursor: pointer;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.oe-sort-th:hover {\n  background: #dde3ea;\n}\n\n.oe-sort-th-active {\n  background: #dde3ea;\n  color: #003366;\n}\n\n.oe-table tbody tr {\n  cursor: pointer;\n}\n\n.oe-table tbody tr:hover {\n  background-color: #eef5ff;\n}\n\n.oe-num {\n  text-align: right !important;\n  font-variant-numeric: tabular-nums;\n}\n\n.oe-term-id {\n  font-family: monospace;\n  white-space: nowrap;\n}\n\n.oe-term-name {\n  max-width: 32rem;\n}\n\n.oe-term-type {\n  white-space: nowrap;\n  color: #555;\n  font-size: 0.8rem;\n}\n"],"names":[],"version":3,"file":"index.css.map"}

package/dist/index.js

@@ -17001,15 +17001,32 @@ const $8f8e530286a37ce9$var$chipRenderer = (dir)=>({ value: value })=>{
         });
     };
 // Vertical header for the narrow organ columns, so full tissue names stay
-// legible without widening the heatmap. Clicking still sorts the column.
+// legible without widening the heatmap. Clicking still sorts the column, and a
+// rotated sort arrow is drawn before the label (the default ag-grid sort UI is
+// replaced by this custom header, so we render our own indicator). The arrow
+// sits in the rotated span, so ▲ (asc) renders pointing left and ▼ (desc) right.
 const $8f8e530286a37ce9$var$RotatedHeader = (props)=>{
+    const [sort, setSort] = (0, $gXNCa$react.useState)(props.column.getSort ? props.column.getSort() : null);
+    (0, $gXNCa$react.useEffect)(()=>{
+        const col = props.column;
+        const onSort = ()=>setSort(col.getSort ? col.getSort() : null);
+        col.addEventListener('sortChanged', onSort);
+        onSort();
+        return ()=>col.removeEventListener('sortChanged', onSort);
+    }, [
+        props.column
+    ]);
     const onClick = (e)=>props.progressSort && props.progressSort(e.shiftKey);
+    const arrow = sort === 'asc' ? "\u25B2\u2009" : sort === 'desc' ? "\u25BC\u2009" : '';
     return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
         className: "attrtable-rot-header",
         title: props.displayName,
         onClick: onClick,
-        children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-            children: props.displayName
+        children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("span", {
+            children: [
+                arrow,
+                props.displayName
+            ]
         })
     });
 };
@@ -17084,14 +17101,18 @@ const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
             const headerName = labelOf(f);
             const width = $8f8e530286a37ce9$var$WIDTHS[f] || 150;
             if (f === $8f8e530286a37ce9$var$ORGAN_FIELD) {
-                organs.forEach((o)=>cols.push({
+                organs.forEach((o, i)=>{
+                    // The last organ keeps a right border (heatmap's outer edge); the rest
+                    // drop it so the heatmap reads as one continuous block.
+                    const last = i === organs.length - 1 ? ' attrtable-organ-last' : '';
+                    cols.push({
                         // No ':' in colId — ag-grid uses colId in internal CSS selectors, where
                         // a colon is a metacharacter and silently breaks the column.
                         colId: `organ_${o}`,
                         headerName: (0, $4b8473139e48e77e$export$50c1f966fd3af83e)(o),
                         headerComponent: $8f8e530286a37ce9$var$RotatedHeader,
-                        headerClass: 'attrtable-organ-header',
-                        cellClass: 'attrtable-organ-cell',
+                        headerClass: `attrtable-organ-header${last}`,
+                        cellClass: `attrtable-organ-cell${last}`,
                         headerTooltip: (0, $4b8473139e48e77e$export$50c1f966fd3af83e)(o),
                         width: 22,
                         minWidth: 18,
@@ -17112,7 +17133,8 @@ const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
                             else if (p.data && p.data._enhanced.has(o)) style.boxShadow = `inset 0 0 0 1px ${0, $4b8473139e48e77e$export$39a35029fe99c21}`;
                             return style;
                         }
-                    }));
+                    });
+                });
                 return;
             }
             if (f === 'expr_max_tpm__attr_f') {