/* ═══════════════════════════════════════════════════════════════
   repo.css — the repository pages: /variants and /genes.

   Load order: tokens.css → chrome.css → page.css → repo.css.
   page.css supplies the hero (.page-eyebrow / .page-title /
   .page-lede / .page-meta) and .seq-rule; this file adds the gene
   grid, the variant table and the pager.

   Declares no :root. The version of variants.html this replaces
   carried ~120 lines of inline <style> including its own copy of
   the classification palette under a second set of names
   (.cls-badge / .cls-P), which is how the repository list and the
   rest of the site ended up drawing the same five calls in two
   different reds. Classification tags here use the .tag primitive
   from tokens.css — the same one home.js writes into the browse
   card — so there is one definition of what Pathogenic looks like.

   Both pages share this file for the same reason /about, /terms and
   /changelog share page.css: they are the same shape, and two
   copies drift.
═══════════════════════════════════════════════════════════════ */

.repo-page { padding-bottom: 90px; }

/* ═══════════ breadcrumb ═══════════ */
/* Mirrored by BreadcrumbList JSON-LD in both templates. Visible and
   structured versions must stay in step. */
.crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
  font-family: var(--mono); font-size: 11.5px; color: var(--dimmer);
}
.crumb a { color: var(--dim); text-decoration: none; transition: color .15s; }
.crumb a:hover { color: var(--gold); }
.crumb .sep { opacity: .5; }
.crumb .here { color: var(--gold); }

/* ═══════════ section heads ═══════════ */
.repo-sec { margin-top: 44px; }
.repo-sec + .repo-sec { margin-top: 52px; padding-top: 44px; border-top: 1px solid var(--hair); }
.repo-sec-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.repo-sec-hd h2 { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.repo-sec-hd h2 strong { color: var(--gold); font-weight: 700; }
.repo-sec-hd p { max-width: 62ch; margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--dim); }
.repo-sec-count {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dimmer); white-space: nowrap;
}

/* ═══════════ gene grid ═══════════ */
/* Every gene in the corpus as a real anchor. This is the internal
   linking layer the repository was missing — the variant reports were
   reachable only from sitemap.xml, which is how a thousand pages ended
   up orphaned. auto-fill rather than a fixed count so the grid reflows
   without a media query per breakpoint. */
.gene-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}
.gene-card {
  display: block; padding: 13px 15px; text-decoration: none;
  background: var(--slate); border: 1px solid var(--hair); border-radius: 10px;
  border-left: 3px solid var(--accent, var(--line));
  transition: border-color .15s, background .15s, transform .15s;
}
.gene-card:hover {
  background: rgba(255,255,255,.03);
  border-color: var(--gold-edge); border-left-color: var(--accent, var(--gold));
  transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) { .gene-card:hover { transform: none; } }

.gene-card.acc-P   { --accent: var(--P);   }
.gene-card.acc-LP  { --accent: var(--LP);  }
.gene-card.acc-VUS { --accent: var(--VUS); }
.gene-card.acc-B   { --accent: var(--B);   }
.gene-card.acc-LB  { --accent: var(--LB);  }
.gene-card.acc-UNK { --accent: var(--UNK); }

.gene-name { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--gold); letter-spacing: -.01em; }
.gene-meta { margin-top: 5px; font-size: 11.5px; color: var(--dimmer); }
.gene-meta b { color: var(--dim); font-weight: 600; }
.gene-badge { margin-top: 8px; }

/* ═══════════ tools row ═══════════ */
/* Filter and search operate on rows already in the DOM. They are an
   enhancement, not the source of the list — with JS off the full page
   of variants is still there and still linked. */
.repo-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
}
.repo-search {
  display: flex; align-items: center; gap: 9px; flex: 1 1 240px; min-width: 0;
  padding: 8px 13px; background: var(--well);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .15s;
}
.repo-search:focus-within { border-color: var(--gold-edge); }
.repo-search svg { width: 14px; height: 14px; flex-shrink: 0; stroke: var(--dimmer); fill: none; stroke-width: 1.6; }
.repo-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--paper); font-family: var(--mono); font-size: 12.5px;
}
.repo-search input::placeholder { color: var(--dimmer); font-family: var(--sans); }

.repo-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.repo-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: none; border: 1px solid var(--line); color: var(--dim);
  font-size: 11.5px;
  transition: border-color .12s, color .12s, background .12s;
}
.repo-filter:hover { border-color: rgba(124,152,208,.28); color: var(--paper); }
.repo-filter.is-active { background: var(--gold-soft); border-color: var(--gold-edge); color: var(--gold); }
.repo-filter i { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ═══════════ variant table ═══════════ */
/* Rows are anchors, not divs with a click handler: a crawler follows
   them and middle-click works. Wrapped in an overflow container so a
   long HGVS string scrolls inside the table rather than widening the
   page body. */
.vtable { border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--slate); }
.vtable-scroll { overflow-x: auto; }

.vth, .vtr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 170px 90px;
  gap: 16px; align-items: center;
  padding: 12px 18px;
  min-width: 620px;
}
.vth {
  background: rgba(0,0,0,.22); border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dimmer);
}
.vtr {
  border-bottom: 1px solid var(--hair); text-decoration: none; color: var(--paper);
  transition: background .15s;
}
.vtr:last-child { border-bottom: none; }
.vtr:hover { background: rgba(255,255,255,.03); }
.vtr:hover .vt-open { color: var(--gold); }

.vt-var { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.vt-gene { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--gold); flex-shrink: 0; }
.vt-hgvs { font-family: var(--mono); font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-prot { font-family: var(--mono); font-size: 11.5px; color: var(--dimmer); }
.vt-open { font-size: 11.5px; font-weight: 600; color: var(--dimmer); white-space: nowrap; transition: color .15s; }

/* ═══════════ pager ═══════════ */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 24px;
}
.pager a, .pager span {
  padding: 8px 15px; border-radius: 8px; text-decoration: none;
  font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--line); color: var(--dim);
  transition: border-color .15s, color .15s, background .15s;
}
.pager a:hover { border-color: var(--gold-edge); color: var(--gold); background: var(--gold-soft); }
.pager .is-pos { border-color: transparent; color: var(--dimmer); }
.pager .is-off { opacity: .35; pointer-events: none; }

/* ═══════════ empty / no-result states ═══════════ */
/* Neutral wording throughout. These pages are indexed, so a rendered
   empty state must not read as the service being out of action. */
.repo-empty {
  padding: 54px 30px; text-align: center;
  border: 1px dashed var(--line); border-radius: 12px;
  color: var(--dimmer); font-size: 14px;
}
.repo-empty p + p { margin-top: 8px; }
.repo-empty a { color: var(--gold); text-decoration: none; }
.repo-empty a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════ responsive ═══════════ */
@media (max-width: 700px) {
  .vth, .vtr { grid-template-columns: minmax(0, 1fr) 150px; min-width: 0; }
  .vth > :nth-child(2), .vtr > :nth-child(2),
  .vth > :nth-child(4), .vtr > :nth-child(4) { display: none; }
  .vtable-scroll { overflow-x: visible; }
  .gene-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}