:root {
    /* Teal workspace + deep-slate text, matching the palette established
       across the rest of the site (see homepage.php / header_gdp.php). The
       old "blue-*" table-chrome variables are kept (other rules still
       reference them) but repointed at the teal family instead of the
       previous purple/violet tones. */
    --main-color: #008995;
    --primary: #0F172A;
    --secondary: #475569;
    --text-muted: #64748B;
    --text-color: #0F172A;
    --light-bg: #E6F5F6;
    --border-color: #E0EAE4;
    --accent: #17A2AC;
    --accent-color: #17A2AC;
    --accent-dark: #0d7a82;
    --hover-color: #006B76;
    --row-hover: #E6F5F6;
    --blue-light: #DFF3F4;
    --blue-mid: #4FC3CC;
    --blue-accent: #008995;
    --blue-link: #008995;
    --blue-link-hover: #006B76;
    --tbl-border: #E0EAE4;
    --tbl-header-bg: linear-gradient(90deg, #B3E4E7 0%, #DFF3F4 100%);
    --tbl-shadow: 0 2px 12px rgba(15,23,42,0.08), 0 1px 3px rgba(0,0,0,0.06);
    --tbl-radius: 10px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* This page also loads the legacy css/style.css, which sets a blanket
     `a, a:visited { color: #0066CC; }` (blue) for every link on the page.
     gene_detail.css loads after it, so an equal-specificity `a` rule here
     wins by source order and overrides that blue site-wide for this page's
     own content. header_gdp.php's .logo-text rule is unaffected either way
     (a class selector always beats a bare element selector regardless of
     order), so the header logo keeps its own gradient styling untouched. */
  a, a:visited { color: var(--main-color); text-decoration: none; }
  a:hover, a:focus { color: var(--hover-color); }

  body {
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    color: var(--text-color);
    background: linear-gradient(160deg, #E6F5F6 0%, #F7FDFD 40%, #ffffff 75%);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    position: relative;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(circle at 15% 0%, rgba(0, 137, 149, 0.07), transparent 45%),
      radial-gradient(circle at 100% 100%, rgba(23, 162, 172, 0.06), transparent 40%);
    pointer-events: none;
    z-index: -1;
  }

  .main-content { padding: 20px clamp(16px, 3vw, 40px); max-width: 100%; margin: 0 auto; flex: 1; }

  /* The sidebar's scroll-spy (js/gene_detail.js) uses an IntersectionObserver
     with a trigger band 15%-75% down the viewport -- without room to scroll
     past it, the LAST section on the page (Related genes) can end up stuck
     near the bottom of the viewport and never actually cross into that band,
     so its sidebar link never highlights. Reserving extra space below the
     content guarantees there's always enough scroll room left to pull the
     last section up into the trigger zone. */
  .main-content { padding-bottom: 60vh; }

  /* Left sidebar nav -- replaces the old per-section "Go to:"
     dropdown that used to repeat at the top of every section.
     Fixed to the edge of the viewport (like GeneCards) rather
     than sitting inside .main-content, so the centered content
     column -- including the page header -- is completely
     unaffected by its presence. Only shown once the viewport is
     wide enough to fit it in the gutter beside the centered
     1400px-max content without overlapping it. */
  /* Below 1300px there isn't room to permanently reserve a left gutter
     without cramping the page (e.g. two windows snapped side-by-side on one
     monitor), so at those widths the sidebar instead starts off-screen and
     slides in via the toggle button when clicked -- same pattern as
     glossary.php's "On this page" sidebar. */
  .gd-sidebar {
    position: fixed;
    left: 24px;
    top: 50%;
    width: 190px;
    background: #fff;
    border: 1px solid var(--tbl-border);
    border-radius: var(--tbl-radius);
    box-shadow: var(--tbl-shadow);
    padding: 14px 0;
    z-index: 20;
    transform: translate(-250px, -50%);
    transition: transform 0.25s ease;
  }
  .gd-sidebar.open { transform: translate(0, -50%); }

  .gd-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--tbl-border);
    background: #fff;
    box-shadow: var(--tbl-shadow);
    cursor: pointer;
    z-index: 19;
  }
  .gd-sidebar-toggle svg { width: 20px; height: 20px; color: var(--primary); }

  .gd-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 15;
  }
  .gd-sidebar-backdrop.open { display: block; }

  @media (min-width: 1300px) {
    .gd-sidebar { display: block; transform: translateY(-50%); }
    .gd-sidebar-toggle { display: none; }
    /* Reserve room for the fixed sidebar (24px left offset + 190px width + gap)
       so it doesn't sit on top of the content -- .main-content has no max-width
       of its own, so without this the sidebar overlaps the page header and
       tables instead of sitting in a true gutter beside them. */
    .main-content { padding-left: 250px; }
  }
  .gd-sidebar-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding: 0 18px 10px;
  }
  .gd-sidebar a {
    display: block;
    padding: 8px 18px;
    font-size: 0.85rem;
    color: var(--primary);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, border-color 0.15s;
  }
  .gd-sidebar a:hover { background: var(--light-bg); }
  .gd-sidebar a.active { background: var(--light-bg); border-left-color: var(--main-color); font-weight: 600; }

  .page-header { text-align: center; margin-bottom: 30px; }
  .page-header h1 { color: var(--primary); font-size: 2.2em; margin-bottom: 15px; font-weight: 600; position: relative; display: inline-block; }
  .page-header .info-icon { color: var(--main-color); font-size: 0.5em; cursor: help; position: absolute; top: -0.3em; right: -0.9em; transition: color 0.3s ease, transform 0.2s ease; text-decoration: none; }
  .page-header .info-icon:hover { color: var(--hover-color); transform: scale(1.1); }
  .page-header .info-icon:active { transform: scale(0.95); }

  .gene-info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid var(--tbl-border);
    border-radius: var(--tbl-radius);
    box-shadow: var(--tbl-shadow);
    overflow: hidden;
    animation: fadeUp 0.35s ease both;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .section-header {
    background: var(--tbl-header-bg) !important;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary) !important;
    padding: 13px 22px !important;
    border-bottom: 1px solid var(--blue-mid);
    position: relative;
  }

  .gene-info-table > tbody > tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
  }
  .gene-info-table > tbody > tr:last-child { border-bottom: none; }
  /* Only rows that DON'T wrap a nested .data-table get the whole-row hover --
     a row that does wrap one (i.e. this is just the section's table-wrapper
     row) already gets correct per-row hover from .data-table tbody tr:hover
     below; without this exclusion, hovering any single row inside that
     nested table also lit up the *entire* wrapper row behind it, making the
     whole table/section look highlighted instead of just the row under the
     cursor. */
  .gene-info-table > tbody > tr:not(:first-child):not(:has(.data-table)):hover { background: var(--row-hover); }

  .gene-info-table td {
    padding: 11px 20px;
    font-size: 0.88rem;
    vertical-align: top;
  }

  .gene-info-table td[bgcolor="#FFFFFF"]:first-child,
  .gene-info-table td:first-child strong {
    color: var(--primary);
  }

  .data-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 8px 0 4px;
  }

  .data-table th {
    background: #B3E4E7;
    padding: 9px 14px;
    border-bottom: 2px solid #4FC3CC;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--primary);
    text-align: left;
  }

  .data-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.87rem;
    vertical-align: top;
    color: var(--secondary);
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .data-table tbody tr:last-child td { border-bottom: none; }
  .data-table tbody tr:hover { background: var(--row-hover); }

  /* IDs/accessions/names inside data tables stay plain dark text at rest
     (not colored) -- teal only shows up on hover as a discoverability
     cue, matching the same convention used on search_results.php. */
  .data-table td a[href*="mirtarbase"] {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    background: var(--light-bg);
    border-radius: 4px;
    padding: 2px 7px;
    color: var(--primary);
    white-space: nowrap;
    text-decoration: none;
  }
  .data-table td a[href*="mirtarbase"]:hover { background: var(--row-hover); color: var(--blue-accent); }

  .data-table td a { color: var(--primary); text-decoration: none; }
  .data-table td a:hover { color: var(--blue-link); text-decoration: underline; }

  .exp-tag {
    display: inline-block;
    background: rgba(23,162,172,0.12);
    color: var(--accent-dark);
    border: 1px solid rgba(23,162,172,0.3);
    border-radius: 4px;
    font-size: 0.72rem;
    padding: 2px 7px;
    margin: 2px 2px 2px 0;
    white-space: nowrap;
  }

  .synonyms { display: flex; flex-wrap: wrap; gap: 5px; }
  .syn-tag {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.78rem;
    color: var(--secondary);
  }

  .chip-chr {
    display: inline-block;
    background: rgba(0,137,149,0.10);
    border-radius: 5px;
    padding: 2px 10px;
    font-weight: 600;
    color: var(--blue-accent);
    font-size: 0.88rem;
  }

  .section-badge {
    background: rgba(0,137,149,0.12);
    color: var(--hover-color);
    font-size: 0.7rem;
    border-radius: 20px;
    padding: 2px 9px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.03em;
  }

  /* Sits inline in a section's own header (.section-header, which is
     already position:relative) instead of its own row above the table --
     that separate row was the extra gap between a section's title and its
     table headers. Positioned to the left of .section-dl's download button
     when both are present (right:14px + ~40px button width + gap). */
  .show-hide-inline {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
  }
  .show-hide-inline a {
    color: var(--blue-link);
    text-decoration: none;
    border-bottom: 1px dashed var(--blue-link);
    cursor: pointer;
    transition: color 0.15s;
  }
  .show-hide-inline a:hover { color: var(--blue-link-hover); }

  /* The Causal/Unknown/Text-Mining disease subsections have no download
     button competing for the right edge, and their header td isn't
     position:relative by default (it's a plain centered td inside the
     data-table itself, not a .section-header) -- so it gets its own rule
     rather than reusing .section-header's context, and the link sits at
     the same right:14px .section-dl normally uses since nothing else is
     out there to avoid. */
  tr.disease-causal-header td,
  tr.disease-unknown-header td,
  tr.disease-text-header td {
    position: relative;
  }
  tr.disease-causal-header .show-hide-inline,
  tr.disease-unknown-header .show-hide-inline,
  tr.disease-text-header .show-hide-inline {
    right: 14px;
  }

  .dropbtn {
    background: rgba(0,137,149,0.10);
    color: var(--hover-color);
    padding: 5px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid rgba(0,137,149,0.25);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
  }
  .dropbtn:hover, .dropbtn:focus { background: rgba(0,137,149,0.2); }

  .dropdown { position: relative; display: inline-block; }
  .dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    min-width: 190px;
    overflow: auto;
    box-shadow: 0 6px 20px rgba(15,23,42,0.15);
    border-radius: 7px;
    border: 1px solid var(--tbl-border);
    z-index: 999;
    right: 0;
    top: calc(100% + 4px);
  }
  .dropdown-content a {
    color: var(--primary);
    padding: 9px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.8rem;
    transition: background 0.15s;
  }
  .dropdown-content a:hover { background: var(--light-bg); color: var(--blue-accent); }
  .show { display: block; }

  /* Per-section download button, sat top-right inside each
     .section-header (which is already position:relative) so the
     centered section title is undisturbed. */
  .section-dl { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  .section-dl .dropbtn { padding: 4px 9px; }

  .disease-causal-header { background: #fff0f0 !important; }
  .disease-unknown-header { background: #fff8ee !important; }
  .disease-text-header { background: #f0fff4 !important; }

  /* Source badge styling */
  .source-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .source-badge-clinvar  { background: #e3f0fb; color: #1a5a8a; border: 1px solid #b8d9ef; }
  .source-badge-omim     { background: #fce8d5; color: #7a3800; border: 1px solid #f0c090; }
  .source-badge-orphanet { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
  .source-badge-gwas     { background: #f3e5f5; color: #4a148c; border: 1px solid #ce93d8; }
  .source-badge-other    { background: #f5f5f5; color: #424242; border: 1px solid #bdbdbd; }

  /* ── Evidence score stars ── */
  .evd-stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    cursor: help;
  }
  .evd-stars .s-filled { color: #f5a623; font-size: 1.55rem; line-height: 1; }
  .evd-stars .s-empty  { color: var(--border-color); font-size: 1.55rem; line-height: 1; }
  .evd-cell { text-align: center; vertical-align: middle !important; }

  /* Star tooltip */
  .evd-wrap {
    position: relative;
    display: inline-block;
    cursor: help;
  }
  .evd-wrap .evd-tip {
    visibility: hidden;
    opacity: 0;
    width: 260px;
    background: var(--primary);
    color: #e8f4fb;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    border-radius: 8px;
    padding: 10px 14px;
    position: absolute;
    z-index: 10000;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 6px 24px rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.08);
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
  }
  .evd-wrap .evd-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--primary) transparent transparent transparent;
  }
  .evd-wrap:hover .evd-tip {
    visibility: visible;
    opacity: 1;
  }
  .evd-tip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
  }
  .evd-tip-row.current {
    background: rgba(245,166,35,0.15);
    border-radius: 4px;
    padding: 3px 5px;
    margin: 0 -5px;
  }
  .evd-tip-stars { white-space: nowrap; letter-spacing: 1px; }

  /* Legend box */
  .evd-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 9px 16px;
    margin: 0 0 10px 0;
    font-size: 0.75rem;
    color: var(--secondary);
    align-items: center;
  }
  .evd-legend strong { color: var(--primary); margin-right: 4px; font-size: 0.73rem; }
  .evd-legend-title  { font-weight: 700; color: var(--main-color); font-size: 0.78rem; margin-right: 8px; white-space: nowrap; }

.tooltip { position: relative; display: inline-block; cursor: help; }
.tooltip .tooltiptext {
  visibility: hidden;
  text-transform: none;
  width: 260px;
  background: var(--primary);
  color: #e8f4fb;
  text-align: left;
  border-radius: 8px;
  padding: 10px 14px;
  position: absolute;
  z-index: 10000;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.12);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.08);
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--primary) transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}
  .scroll-to-top {
    position: fixed;
    bottom: 30px; right: 30px;
    width: 50px; height: 50px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0,137,149,0.3);
    transition: all 0.3s ease;
    z-index: 1000;
  }
  .scroll-to-top:hover { background: var(--hover-color); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,137,149,0.4); }
  .scroll-to-top.show { display: flex; }
  .scroll-to-top::before { content: "↑"; font-weight: bold; font-size: 22px; }

  #loaderWrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; padding: 40px; border-radius: 12px; }
  .loader { width: 50px; aspect-ratio: 1; display: grid; }
  .loader::before, .loader::after { content: ""; grid-area: 1/1; --c: no-repeat radial-gradient(farthest-side,#008995 92%,#0000); background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%; background-size: 12px 12px; animation: l12 1s infinite; }
  .loader::before { margin: 4px; filter: hue-rotate(45deg); background-size: 8px 8px; animation-timing-function: linear; }
  @keyframes l12 { 100% { transform: rotate(.5turn); } }

  @media (max-width: 768px) {
    .main-content { padding: 15px 20px; padding-bottom: 60vh; }
    .gene-info-table td, .data-table td, .data-table th { padding: 7px 10px; }
  }

  /* Related Genes section -- card grid, e-commerce "customers also viewed"
     style, instead of a plain data-table row per gene: the point is quick
     visual scanning/comparison of a handful of candidates, not a dense
     sortable dataset, so a table's row-per-item layout was the wrong fit. */

  /* .gene-info-table sets overflow:hidden (shared by every section on this
     page) purely so the .section-header bar's square corners don't poke
     past the table's own rounded border. For this one section that clips
     the shared-item hover tooltips (.tooltiptext) too, which need to render
     outside the table's edges -- so this instance opts out via its own
     extra class and rounds the header's top corners directly instead,
     without touching .gene-info-table's shared behavior for every other
     section on the page. */
  .related-genes-table { overflow: visible; }
  .related-genes-table > tbody > tr:first-child > .section-header {
    border-radius: var(--tbl-radius) var(--tbl-radius) 0 0;
  }

  /* Dedicated tooltip for the per-badge "why is this related" popups --
     NOT the shared .tooltip/.tooltiptext (used by every section-header's
     title hover across this page, which works fine where it sits). Badge
     tooltips need different positioning: this section is the last content
     block before the footer, so the default "appear below" direction has
     nowhere to go: opens upward instead. And a centered tooltip on a badge
     in the grid's leftmost column pushes off the left edge of the
     viewport, so it's left-anchored to the badge instead of centered. */
  .related-stat-tooltip { position: relative; display: inline-block; cursor: help; }
  .related-stat-tooltip .related-stat-tooltiptext {
    visibility: hidden;
    width: max-content;
    max-width: min(240px, calc(100vw - 32px));
    background: var(--primary);
    color: #e8f4fb;
    text-align: left;
    border-radius: 8px;
    padding: 10px 14px;
    position: absolute;
    z-index: 10000;
    bottom: calc(100% + 10px);
    left: 0;
    opacity: 0;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.12);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .related-stat-tooltip .related-stat-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 14px;
    border-width: 6px;
    border-style: solid;
    border-color: var(--primary) transparent transparent transparent;
  }
  .related-stat-tooltip:hover .related-stat-tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateY(-2px);
  }
  .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    padding: 4px 2px;
  }
  .related-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--tbl-radius);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-width: 0; /* grid items default to a content-based min-width, which let a long nowrap badge (e.g. "269 shared evidence sources") push the card past its own column and into the next one */
  }
  .related-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tbl-shadow);
    border-color: var(--main-color);
  }
  .related-card-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--main-color);
    font-family: 'IBM Plex Mono', monospace;
  }
  .related-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
  /* One-line auto-generated "why this rank" sentence under a card's badges,
     e.g. "Related via 12 shared diseases including X, Y — evidence mostly
     ClinVar." Pure formatting of columns already fetched, see
     renderRelatedWhySentence() above. */
  .related-why {
    display: block;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
  }
  /* Empty-state note shown when gene_related exists and is reachable but
     has no rows for this gene -- so the section reads as "checked, nothing
     found" instead of just silently missing. */
  .related-empty {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    font-style: italic;
    margin: 4px 2px;
  }
  /* "Sort by" toggle above the Related Genes grid -- re-orders the existing
     cards client-side by a single dimension (diseases/pathways/evidence)
     instead of the default blended score. See the inline <script> next to
     the grid for the actual re-sort logic. */
  .related-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 2px 12px;
  }
  .related-filter-label {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin-right: 2px;
  }
  .related-filter-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--main-color);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .related-filter-btn:hover { border-color: var(--main-color); }
  .related-filter-btn.active {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
  }
  .related-stat {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 20px;
    background: var(--blue-light);
    color: var(--hover-color);
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .related-stat-path { background: rgba(23,162,172,0.12); color: var(--accent-dark); }
  .related-stat-evidence { background: rgba(217,119,6,0.12); color: #B45309; }
  /* Collaborative-filtering badge ("Bookmarked together by N researchers") --
     deliberately never wrapped in .related-stat-tooltip like the other
     badges: there are no names to show, only an aggregate count (privacy --
     see shared_collab_users in sql/related_recommendations.sql). Pink/rose
     to read as a distinct "real user behavior" signal from the blue/green/
     amber content-based ones. */
  .related-stat-collab { background: rgba(219,39,119,0.12); color: #BE185D; }