:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1b1f24;
  --muted: #6b7280;
  --line: #e4e7eb;
  --accent: #603ea6;      /* D8A purple from the manuscript palette */
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* header */
.site-header {
  background: linear-gradient(135deg, #0b2a5c 0%, #1857b8 55%, #2f9bd8 130%);
  color: #fff;
  padding: 34px 0 30px;
}
.site-header h1 { margin: 0 0 6px; font-size: 1.7rem; letter-spacing: -.01em; }
.tagline { margin: 0; max-width: 380px; opacity: .92; font-size: .98rem; }

/* Two fixed rows — the manuscript link, then both lab links together. As one
   wrapping row the break landed between the two labs at some widths and not
   others, so the layout depended on window size, zoom, and font fallback. */
.header-links {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* pills rather than bare links: they have to read as targets against the
   gradient, where a plain underline washes out */
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.header-link:hover,
.header-link:focus-visible {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .85);
}
.header-link span { font-size: .85em; opacity: .85; }
/* the lab links sit beside the manuscript link; a lighter fill keeps the
   manuscript (the primary call to action) ahead of them in the row */
.lab-link {
  background: transparent;
  border-color: rgba(255, 255, 255, .35);
  font-weight: 400;
  font-size: .88rem;
}

/* Two-column header: lede on the left, data-generation schematic on the right */
.header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: 28px;
  align-items: center;
}
.header-lede { min-width: 0; }

.header-schematic {
  margin: 0;
  padding: 12px 14px 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 6px 20px rgba(20, 12, 45, .28);
  backdrop-filter: blur(4px);
}
.header-schematic img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 760px) {
  .header-grid { grid-template-columns: 1fr; gap: 20px; }
  .header-schematic { max-width: 460px; }
}

main.wrap { padding-top: 28px; padding-bottom: 40px; }

/* search */
.search-block { margin-bottom: 26px; }
.search-box { position: relative; }
#search {
  width: 100%;
  padding: 14px 16px;
  font-size: 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  outline: none;
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(96, 62, 166, .15); }

.suggestions {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-height: 360px;
  overflow-y: auto;
}
.suggestion {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.suggestion.active, .suggestion:hover { background: #f0edf8; }
.s-symbol { font-weight: 700; color: var(--accent); }
.s-desc { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-badges { font-size: .78rem; color: #9aa0a6; white-space: nowrap; }

.hint { color: var(--muted); font-size: .9rem; margin: 10px 2px 0; }
.example {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 2px 10px; cursor: pointer; color: var(--accent); font: inherit; font-size: .85rem;
}
.example:hover { background: #f0edf8; }

/* gene view */
.gene-header { margin-bottom: 14px; }
.gene-header h2 { margin: 0 0 2px; font-size: 1.5rem; }
.gene-desc { margin: 0 0 4px; font-size: 1rem; }
.muted { color: var(--muted); font-size: .9rem; margin: 2px 0; }
.gene-function {
  margin: 8px 0 0;
  max-width: 720px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--muted);
  border-left: 3px solid var(--accent);
  padding-left: 10px;
}
.gene-function .fn-label {
  display: block;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.gene-function .fn-text { display: block; }
.gene-function .fn-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fn-toggle {
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: .8rem;
  cursor: pointer;
}
.fn-toggle:hover { text-decoration: underline; }
.gene-header a { color: var(--accent); }
.error { color: #b23b3b; }

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 18px;
}
.chart-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
  min-width: 0; /* grid item: allow shrink below plot's intrinsic width */
}
.chart-title {
  margin: 6px 8px 2px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.plot { width: 100%; height: 360px; }
/* stands in for a plot inside a chart-card, so it holds the same track height
   and its siblings' grid rows stay aligned */
.no-data {
  display: flex;
  align-items: center;
  height: 360px;
  margin: 0;
  padding: 0 28px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}

/* volcano (dataset-wide) */
.volcano {
  margin-top: 40px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.volcano-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.volcano-head h2 { margin: 0 0 4px; font-size: 1.2rem; }
.volcano-head .muted { max-width: 640px; }
.volcano-pickers { display: flex; flex-wrap: wrap; gap: 12px; }
.volcano-picker {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .8rem; color: var(--muted); white-space: nowrap;
}
.volcano-picker select {
  font: inherit; font-size: .92rem; color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  cursor: pointer; outline: none;
}
.volcano-picker select:focus { border-color: var(--accent); }
.volcano-plot { height: 520px; margin-top: 12px; }

/* downloads */
.downloads {
  margin-top: 40px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.downloads h2 { margin: 0 0 4px; font-size: 1.2rem; }
.downloads-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.download-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .12s, transform .12s;
}
.download-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.download-item.combined { border-color: var(--accent); background: #f7f4fd; }
.d-label { font-weight: 600; font-size: .92rem; }
.d-meta { color: var(--muted); font-size: .8rem; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); }
.site-footer p { margin: 0; font-size: .85rem; }
.site-footer p + p { margin-top: 6px; }

@media (max-width: 520px) {
  .charts { grid-template-columns: 1fr; }
  .suggestion { grid-template-columns: 70px 1fr; }
  .s-badges { display: none; }
}