/* ── Self-hosted Inter (variable) — no third-party font requests (GDPR-safe) ─── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Bohlen Lab color palette (exact from tailwind.config.mjs) */
  --navy: #1a365d;
  --sky-blue: #0891b2;
  --coral: #dc2626;
  --gold: #d97706;
  --cream: #f2f2f4;  /* re-style: neutral light gray for minor chrome (orig warm cream: #fef7ed) */
  --light-blue: #e0f2fe;
  --light-coral: #fee2e2;
  --light-gold: #fef3c7;

  /* 2026 re-style — toned DOWN (Aug 2026): purple kept only as deliberate accents; the ambient
     chrome (background, table headers, bar tracks, hovers) is neutral gray so the layout no longer
     reads as "all purple". Data plots (structure/function/overview bars, in JS) are unaffected. */
  --accent: #8a37c0;         /* purple accent — stat numbers, nav pill, focus ring, links-on-hover */
  --heading: #2c1a3d;        /* deep aubergine — bold headlines (reads ~black, purple-tinted) */
  --accent-soft: #d9c4ec;    /* soft light purple — thin card top accent line (was bright #D987FF) */
  --accent-mid: #B98BDA;     /* muted purple — fills (unused in chrome) */
  --lavender: #f5f6f8;       /* neutral light gray — row/result hovers (was lavender #f6f1fb) */
  --lavender-2: #ebecf0;     /* neutral light-cool gray — table headers, bar tracks (was #ece2f7) */

  /* Derived */
  --text: #1a365d;
  --text-70: rgba(26, 54, 93, 0.7);
  --text-50: rgba(26, 54, 93, 0.5);
  --border: #e5e7eb;  /* gray-200 */
  --bg-white-t: rgba(255, 255, 255, 0.85);
  --bg-cream-t: rgba(253, 251, 247, 0.85);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Typography */
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Sizing */
  --radius: 0.5rem;  /* rounded-lg */
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  background: linear-gradient(170deg, #f3f1f7 0%, #f8f6fb 48%, #fefdff 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--navy);
}

a {
  color: var(--sky-blue);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover { color: var(--coral); }

::selection { background: rgba(138, 55, 192, 0.22); }

/* ── Layout ──────────────────────────────────────────────────────────── */
.container-wide {
  max-width: 72rem;  /* 1152px, same as bohlenlab.com */
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container-wide { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container-wide { padding: 0 2rem; } }

/* ── Header ──────────────────────────────────────────────────────────── */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border);
}

.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.5rem 0;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
  justify-self: start;
}
.logo:hover { opacity: 0.8; }

.logo-img {
  height: 2.5rem;
  width: auto;
  display: block;
}

.header-titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.2s;
  gap: 0.1rem;
}
.header-titles:hover { opacity: 0.8; text-decoration: none; }

.site-title {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.03em;
}

.site-subtitle {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-50);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-subtitle em {
  font-style: normal;
  color: var(--sky-blue);
  text-transform: none;   /* keep "5S rRNA" cased correctly inside the uppercase subtitle */
}

nav {
  display: flex;
  justify-content: space-evenly;
  border-top: 1px solid var(--border);
  padding-top: 0.375rem;
  padding-bottom: 0.25rem;
}

nav a {
  padding: 0.375rem 1rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--navy);
  transition: all 0.2s;
}

nav a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--accent);
  text-decoration: none;
}

nav a.active {
  background: var(--accent);
  color: #ffffff;
}

nav a.nav-external {
  color: var(--text-70);
  font-size: 0.8rem;
}
nav a.nav-external:hover { color: var(--coral); background: none; }

/* Search */
.search-box {
  position: relative;
  width: 260px;
  justify-self: end;
}

.search-box input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #efe9f7;   /* one deliberate soft-purple touch (search field) */
  color: var(--text);
  font-size: 0.875rem;
  font-family: var(--mono);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(138, 55, 192, 0.15);
}

.search-box::before {
  content: '\1F50D';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  opacity: 0.4;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 4px;
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 200;
  box-shadow: var(--shadow-lg);
}

.search-results.visible { display: block; }

.search-result-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}

.search-result-item:hover { background: var(--lavender); }
.search-result-item:last-child { border-bottom: none; }
.search-result-item .label { color: var(--navy); font-weight: 600; }
.search-result-item .detail { color: var(--text-70); font-size: 0.8rem; }

/* Breadcrumb */
.breadcrumb {
  padding: 0.75rem 0;
  font-size: 0.85rem;
  color: var(--text-50);
}

.breadcrumb a {
  padding: 0;
  color: var(--text-70);
  font-size: 0.85rem;
}
.breadcrumb a:hover { color: var(--sky-blue); }
.breadcrumb .sep { margin: 0 6px; }

/* ── Main content ────────────────────────────────────────────────────── */
main {
  flex: 1;
  position: relative;
  z-index: 10;
  isolation: isolate;
  padding: 1.5rem 0 3rem;
}

.page-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--heading);
}

.page-subtitle {
  color: var(--text-70);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.section {
  margin-bottom: 2rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  position: relative;
}

.section-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--heading);
}

/* ── Cards & Stats ───────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent-soft);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s;
}

.stat-card:hover {
  box-shadow: var(--shadow-lg);
}

.stat-card .value {
  font-size: 1.7rem;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--accent);
  line-height: 1.2;
}

.stat-card .label {
  font-size: 0.75rem;
  color: var(--text-70);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.table-wrap {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  box-shadow: var(--shadow);
}
.section .table-wrap,
.section .plot-container,
.section .acknowledgments {
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th, td {
  padding: 0.625rem 0.875rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th {
  background: var(--lavender-2);
  color: var(--text-70);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}

th:hover { color: var(--accent); }
th.sorted-asc::after { content: ' \25B2'; font-size: 0.65rem; }
th.sorted-desc::after { content: ' \25BC'; font-size: 0.65rem; }

tr:hover { background: rgba(0, 0, 0, 0.03); }
tr:last-child td { border-bottom: none; }

td.num { text-align: right; font-family: var(--mono); font-size: 0.82rem; }
td.clickable { cursor: pointer; color: var(--sky-blue); }
td.clickable:hover { color: var(--coral); text-decoration: underline; }

/* ── Badges & Tags ───────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;  /* rounded-full */
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--mono);
}

.badge-snv { background: var(--light-blue); color: #075985; }
.badge-insertion { background: #dcfce7; color: #166534; }
.badge-deletion { background: var(--light-coral); color: #991b1b; }
.badge-complex { background: #ffedd5; color: #9a3412; }
.badge-anticodon { background: #f3e8ff; color: #6b21a8; }

.element-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  background: var(--cream);
  color: var(--text-70);
  border: 1px solid var(--border);
  font-weight: 500;
}

/* ── Bar chart (CSS-based) ───────────────────────────────────────────── */
.bar-chart { margin: 0.5rem 0; }

.bar-row {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.82rem;
}

.bar-label {
  width: 130px;
  text-align: right;
  padding-right: 10px;
  color: var(--text-70);
  flex-shrink: 0;
  font-size: 0.8rem;
}

.bar-track {
  flex: 1;
  height: 22px;
  background: var(--lavender-2);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}

.bar-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.4s ease;
  min-width: 1px;
}

.bar-value {
  width: 70px;
  text-align: right;
  padding-left: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-70);
  flex-shrink: 0;
}

/* ── Sequence viewer ─────────────────────────────────────────────────── */
.seq-viewer {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  box-shadow: var(--shadow);
}

.seq-row {
  display: flex;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.8;
}

.seq-pos {
  color: var(--text-50);
  width: 40px;
  text-align: right;
  padding-right: 12px;
  flex-shrink: 0;
  font-size: 0.75rem;
}

.seq-bases { letter-spacing: 2px; }

.seq-base {
  display: inline-block;
  width: 16px;
  text-align: center;
  cursor: default;
  position: relative;
}

.seq-base.has-variant {
  cursor: pointer;
  font-weight: 700;
}

.seq-base.has-variant::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 2px;
  right: 2px;
  height: 2px;
  border-radius: 1px;
}

.seq-base.ac-high::after { background: var(--coral); }
.seq-base.ac-med::after { background: var(--gold); }
.seq-base.ac-low::after { background: var(--sky-blue); }

/* Structure color coding — Bohlen Lab palette harmonized */
.el-acceptor { color: #dc2626; }      /* coral */
.el-d-stem { color: #d97706; }        /* gold */
.el-d-loop { color: #b45309; }        /* amber-dark */
.el-ac-stem { color: #1a365d; }       /* navy */
.el-ac-loop { color: #0891b2; }       /* sky-blue */
.el-variable { color: #0d9488; }      /* teal */
.el-var-stem { color: #0284c7; }      /* blue */
.el-t-stem { color: #7c3aed; }        /* violet */
.el-t-loop { color: #a855f7; }        /* purple-light */
.el-other { color: var(--text-50); }

.seq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.78rem;
}

.seq-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-70);
}

.seq-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ── Cloverleaf Structure ────────────────────────────────────────────── */
.gene-hero {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.gene-hero-left {
  flex: 1;
  min-width: 0;
}
.gene-hero-right {
  flex: 0 0 420px;
}
@media (max-width: 900px) {
  .gene-hero { flex-direction: column; }
  .gene-hero-right { flex: none; width: 100%; }
}

.cloverleaf-wrap {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.cloverleaf-svg {
  width: 100%;
  height: auto;
}

.cl-nt {
  cursor: pointer;
  transition: opacity 0.15s;
}

.cl-nt:hover {
  opacity: 1 !important;
  filter: brightness(1.15);
}

.cl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 0.78rem;
}

.cl-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-70);
}

.cl-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cl-ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.5px solid;
  flex-shrink: 0;
}

.cl-legend-note {
  font-style: italic;
  color: var(--text-50);
  font-size: 0.72rem;
}

/* ── Export button ────────────────────────────────────────────────────── */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.section-header .section-title {
  margin-bottom: 0;
}
.export-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-70);
  font-size: 0.78rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.2s;
}
.export-btn::before { content: '\2913'; font-size: 0.85rem; }

.variant-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}
.export-btn:hover {
  border-color: var(--sky-blue);
  color: var(--sky-blue);
}

/* ── Tooltip ─────────────────────────────────────────────────────────── */
.tooltip {
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  font-size: 0.82rem;
  z-index: 300;
  pointer-events: none;
  display: none;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
}

.tooltip.visible { display: block; }
.tooltip .tt-row { margin-bottom: 3px; }
.tooltip .tt-label { color: var(--text-70); }
.tooltip .tt-value { color: var(--navy); font-family: var(--mono); }

/* ── Loading ─────────────────────────────────────────────────────────── */
.loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-50);
}

.loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--sky-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 8px;
  vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Structure heatmap ───────────────────────────────────────────────── */
.structure-bar {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin: 0.5rem 0;
  border: 1px solid var(--border);
}

.structure-bar .seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  cursor: default;
  min-width: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 3px;
}

/* ── SVG Plots ───────────────────────────────────────────────────────── */
.plot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.plot-container {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
  margin-bottom: 0.75rem;
}

.heatmap-wrap {
  overflow-x: auto;
  padding: 0.5rem;
}

.heatmap-plot {
  width: 100%;
  height: auto;
}

.heatmap-plot .heatmap-label {
  font-family: var(--sans);
  font-weight: 500;
  fill: var(--navy);
}

.heatmap-plot a:hover .heatmap-label {
  fill: var(--sky-blue);
  text-decoration: underline;
}

.heatmap-plot .region-label {
  font-family: var(--sans);
  font-weight: 600;
}

.section-desc {
  color: var(--text-50);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.gene-link {
  color: var(--sky-blue);
  text-decoration: none;
  cursor: pointer;
}
.gene-link:hover { text-decoration: underline; }

.view-all-link {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--sky-blue);
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}
.view-all-link:hover { text-decoration: underline; }

.density-plot {
  width: 100%;
  height: auto;
  max-height: 260px;
}

.density-plot .plot-title {
  font-size: 11px;
  font-weight: 600;
  fill: var(--navy);
  font-family: var(--sans);
}

.density-plot .axis-label {
  font-size: 9px;
  fill: var(--text-70);
  font-family: var(--mono);
}

.density-plot .axis-title {
  font-size: 9px;
  fill: var(--text-50);
  font-family: var(--sans);
  font-weight: 500;
}

.density-plot .band-label {
  font-size: 7px;
  fill: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-family: var(--sans);
}

.density-plot .grid-line {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 3,3;
}

.plot-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .plot-row { grid-template-columns: 1fr; }
}

/* ── Footer (matching bohlenlab.com) ─────────────────────────────────── */
footer {
  background: var(--navy);
  color: #ffffff;
  margin-top: auto;
  position: relative;
  z-index: 20;
}

footer .container-wide {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr; gap: 2rem; }
}

.footer-col h3 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li { margin-bottom: 0.25rem; }

.footer-col ul a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  transition: color 0.2s;
}
.footer-col ul a:hover { color: var(--gold); }

.footer-col address {
  font-style: normal;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.875rem;
  line-height: 1.6;
}

.footer-email { padding-top: 0.25rem; }
.footer-email a { color: rgba(255, 255, 255, 0.8); }
.footer-email a:hover { color: var(--gold); }

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-funding {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  text-align: center;
  margin-bottom: 0.75rem;
}

.footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-dataver {
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
}
.footer-links a:hover { color: var(--gold); }

.footer-desc a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-desc a:hover { color: var(--gold); }

/* ── Isotype listing grid ──────────────────────────────────────────── */
.iso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.iso-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.iso-card:hover {
  border-color: var(--sky-blue);
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.12);
}

.iso-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.iso-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
}

.iso-card-count {
  font-size: 0.78rem;
  color: var(--text-50);
}

.iso-card-anticodons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.iso-card-ac {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--cream);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.15s;
}
.iso-card-ac:hover {
  background: var(--sky-blue);
  color: #fff;
  text-decoration: none;
}

.iso-card-ac-n {
  font-size: 0.72rem;
  color: var(--text-50);
}
.iso-card-ac:hover .iso-card-ac-n { color: rgba(255,255,255,0.8); }

.iso-card-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-50);
}

/* ── Download table ─────────────────────────────────────────────────── */
.download-table th {
  cursor: default;
}

.download-table td.dl-desc {
  white-space: normal;
  color: var(--text-70);
  font-size: 0.82rem;
  line-height: 1.5;
}

.download-link {
  font-weight: 600;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.download-link::before {
  content: '\2913';
  display: inline-block;
  font-family: var(--sans, sans-serif);
  font-size: 1.15em;
  line-height: 1;
  margin-right: 0.55em;
  color: var(--sky-blue);
  vertical-align: -0.05em;
}

.download-note {
  margin-top: 1rem;
  color: var(--text-50);
  font-size: 0.85rem;
  line-height: 1.6;
}

.acknowledgments {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-70);
}

.acknowledgments p { margin-bottom: 0.75rem; }

.acknowledgments ul {
  list-style: none;
  padding: 0;
}

.acknowledgments ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.acknowledgments ul li:last-child { border-bottom: none; }

/* ── Floating background ─────────────────────────────────────────────── */
.floating-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;            /* cover the actual page height, not a fixed 500vh */
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-icon {
  position: absolute;
  opacity: 0.10;
  filter: blur(0.5px);
  animation-name: float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  will-change: transform;
  pointer-events: none;
  --base-rotation: 0deg;
  object-fit: contain;
  transform: rotate(var(--base-rotation));
}

/* Alternate animation directions */
.floating-icon.anim-reverse { animation-name: float-reverse; }
.floating-icon.anim-diagonal { animation-name: float-diagonal; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(var(--base-rotation)); }
  25% { transform: translate(12px, -18px) rotate(calc(var(--base-rotation) + 8deg)); }
  50% { transform: translate(-8px, -30px) rotate(calc(var(--base-rotation) - 5deg)); }
  75% { transform: translate(-15px, -12px) rotate(calc(var(--base-rotation) + 12deg)); }
}

@keyframes float-reverse {
  0%, 100% { transform: translate(0, 0) rotate(var(--base-rotation)); }
  25% { transform: translate(-12px, 15px) rotate(calc(var(--base-rotation) - 10deg)); }
  50% { transform: translate(8px, 25px) rotate(calc(var(--base-rotation) + 6deg)); }
  75% { transform: translate(15px, 8px) rotate(calc(var(--base-rotation) - 8deg)); }
}

@keyframes float-diagonal {
  0%, 100% { transform: translate(0, 0) rotate(var(--base-rotation)); }
  25% { transform: translate(15px, -10px) rotate(calc(var(--base-rotation) + 10deg)); }
  50% { transform: translate(5px, -25px) rotate(calc(var(--base-rotation) - 7deg)); }
  75% { transform: translate(-10px, -15px) rotate(calc(var(--base-rotation) + 5deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-icon {
    animation: none;
    opacity: 0.08;
    transform: rotate(var(--base-rotation));
  }
}

/* ── Toggle button ───────────────────────────────────────────────────── */
.toggle-btn {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--text-70);
  font-size: 0.82rem;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.2s;
}

.toggle-btn:hover {
  border-color: var(--sky-blue);
  color: var(--sky-blue);
}

.toggle-btn.active {
  background: var(--sky-blue);
  border-color: var(--sky-blue);
  color: #ffffff;
}

.toggle-group {
  display: inline-flex;
  gap: 0;
  margin-bottom: 0.75rem;
}
.toggle-group .toggle-btn {
  border-radius: 0;
  margin-bottom: 0;
}
.toggle-group .toggle-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.toggle-group .toggle-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.toggle-group .toggle-btn + .toggle-btn { border-left: none; }

/* ── Flanking variant rows (hidden by default, shown on toggle) ──────── */
tr.flanking-row { display: none; }
.show-flanking tr.flanking-row { display: table-row; }

tr.flanking-row td {
  color: var(--text-50);
  background: rgba(253, 251, 247, 0.4);
}

/* ── Region tags (upstream / downstream) ─────────────────────────────── */
.region-tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid var(--border);
}

.region-tag.upstream {
  background: #eff6ff;
  color: #1e40af;
}

.region-tag.downstream {
  background: #fef3c7;
  color: #92400e;
}

/* ── Position highlight (click positional bar → highlight table row) ── */
tr.pos-highlight {
  background: rgba(8, 145, 178, 0.15) !important;
}

tr.pos-highlight td {
  border-bottom-color: rgba(8, 145, 178, 0.3);
}

/* ── Bin popover (click histogram bar → gene list) ───────────────────── */
.bin-popover {
  position: fixed;
  display: none;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 300;
  min-width: 180px;
  max-width: 260px;
  max-height: 400px;
  overflow-y: auto;
}

.bin-pop-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-70);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}

.bin-pop-list {
  padding: 0.25rem 0;
}

.bin-pop-item {
  display: block;
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  color: var(--sky-blue);
  text-decoration: none;
  cursor: pointer;
}

.bin-pop-item:hover {
  background: var(--cream);
  color: var(--coral);
}

.bin-pop-more {
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
  color: var(--text-50);
}

/* ── Variant type toggles & plot controls ────────────────────────────── */
.variant-type-toggles { display: inline-flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.toggle-group-label { font-size: 0.82rem; color: var(--text-50); margin-right: 0.25rem; }
.plot-controls-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .header-top { grid-template-columns: auto 1fr; gap: 0.5rem; }
  .header-titles { grid-column: 1 / -1; justify-self: center; }
  .site-title { font-size: 1.1rem; }
  .site-subtitle { font-size: 0.75rem; }
  .search-box { grid-column: 1 / -1; width: 100%; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .bar-label { width: 90px; font-size: 0.72rem; }
  nav { flex-wrap: wrap; }
  nav a { padding: 0.375rem 0.5rem; font-size: 0.8rem; }
  .logo-img { height: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   5S rRNA Atlas — additions on top of the shared design system
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Repeat-unit linear feature map ──────────────────────────────────── */
.unit-map-wrap { overflow-x: auto; padding: 0.5rem 0 0.25rem; }
.unit-map { width: 100%; height: auto; min-width: 640px; }
.unit-feature { cursor: pointer; transition: opacity 0.15s; }
.unit-feature:hover { opacity: 0.82; }
.unit-map .feat-label { font-family: var(--sans); font-size: 8px; font-weight: 600; }
.unit-map .axis-tick { font-family: var(--mono); font-size: 8px; fill: var(--text-50); }
.unit-track-line { stroke-width: 0; }

/* Feature-class colors (repeat unit) */
.fc-gene       { fill: #e8c07a; }   /* tan — the 5S gene */
.fc-alu        { fill: #cdcdcd; }   /* grey — Alu SINE */
.fc-promoter   { fill: #b45309; }   /* amber — ICR boxes */
.fc-terminator { fill: #7c3aed; }   /* violet */
.fc-spacer     { fill: #eef2f7; }   /* near-white — NTS */
.fc-lowcomplex { fill: #a7d8de; }   /* pale cyan — microsatellites */
.fc-indel      { fill: #fca5a5; }   /* light coral */

/* ── Structure viewer (5S rRNA 2° structure) ─────────────────────────── */
.struct-hero { display: flex; gap: 1.5rem; align-items: flex-start; }
.struct-hero-main { flex: 1 1 560px; min-width: 0; }
.struct-hero-side { flex: 0 0 300px; }
@media (max-width: 940px) {
  .struct-hero { flex-direction: column; }
  .struct-hero-side { flex: none; width: 100%; }
}
.struct-svg { width: 100%; height: auto; }
.struct-nt { cursor: pointer; transition: filter 0.15s; }
.struct-nt:hover { filter: brightness(1.15); }
.struct-nt.selected { stroke: #111; stroke-width: 2.5px; }
.struct-bp { stroke: #b9c2cc; stroke-width: 1; }
.struct-bp.nwc { stroke: #d97706; stroke-dasharray: 4 2; }
.struct-backbone { stroke: #6b7686; stroke-width: 1.4; fill: none; }

/* colorbar */
.colorbar-wrap { display: flex; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.2rem; font-size: 0.72rem; color: var(--text-70); }
.colorbar { height: 12px; width: 180px; border-radius: 3px; border: 1px solid var(--border); }

/* per-position detail card */
.pos-card { background:#fff; border:1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
.pos-card h4 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.pos-card .pos-sub { font-size: 0.78rem; color: var(--text-50); margin-bottom: 0.75rem; }
.sub-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; }
.sub-table th, .sub-table td { padding: 0.3rem 0.4rem; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sub-table th:first-child, .sub-table td:first-child { text-align: left; }
.sub-table th { font-size: 0.68rem; }
.func-pill { display:inline-block; padding: 0.05rem 0.4rem; border-radius: 9999px; font-size: 0.72rem; font-family: var(--mono); font-weight: 600; }
.func-damaging { background:#fde2e2; color:#991b1b; }
.func-neutral  { background:#fef3c7; color:#92400e; }
.func-elevated { background:#dcfce7; color:#166534; }
.func-none     { background:#f1f5f9; color:#64748b; }

/* PheWAS badge / callout */
.phewas-badge { display:inline-flex; align-items:center; gap:4px; padding:0.1rem 0.5rem; border-radius:9999px;
  background:#f3e8ff; color:#6b21a8; font-size:0.72rem; font-weight:600; }
.phewas-badge::before { content:'\2691'; }
.phewas-list { margin-top: 0.5rem; }
.phewas-item { padding:0.4rem 0; border-bottom:1px solid var(--border); font-size:0.82rem; }
.phewas-item:last-child { border-bottom:none; }

/* ── Functional heatmap (120 x 3) ────────────────────────────────────── */
.func-hm-wrap { overflow-x: auto; padding: 0.5rem; }
.func-hm { min-width: 900px; height: auto; }
.func-hm .fh-cell { cursor: pointer; }
.func-hm .fh-cell:hover { stroke: #111; stroke-width: 1.5px; }
.func-hm .fh-axis { font-family: var(--mono); font-size: 8px; fill: var(--text-50); }
.func-hm .fh-wt { font-family: var(--mono); font-size: 8px; fill: var(--navy); font-weight:600; }

/* selection O/E bars (region browser) */
.oe-note { font-size: 0.78rem; color: var(--text-50); }
.dotted-1 { stroke: var(--text-50); stroke-dasharray: 3 3; stroke-width: 1; }

/* legend inline */
.inline-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; font-size:0.76rem; color:var(--text-70); }
.inline-legend .li { display:flex; align-items:center; gap:5px; }
.inline-legend .sw { width:12px; height:12px; border-radius:3px; flex-shrink:0; border:1px solid rgba(0,0,0,0.08); }
.inline-legend .swc { border-radius:50%; }

/* structure element chips */
.elem-chip { display:inline-block; padding:0.1rem 0.5rem; border-radius:9999px; font-size:0.7rem; font-weight:600; }

/* variant table filter input */
.table-filter {
  flex: 1; min-width: 240px; max-width: 520px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text); font-size: 0.85rem; font-family: var(--sans);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.table-filter:focus { border-color: var(--sky-blue); box-shadow: 0 0 0 3px rgba(8,145,178,.15); }
.var-row { cursor: pointer; }

/* example-query chips under a search box */
.filter-examples {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0.5rem 0 1.1rem; font-size: 0.78rem; color: var(--text-50);
}
.ex-chip {
  font-family: var(--mono); font-size: 0.75rem; cursor: pointer;
  padding: 0.15rem 0.55rem; border-radius: 9999px;
  border: 1px solid var(--border); background: var(--lavender-2); color: var(--text-70);
  transition: background .15s, border-color .15s, color .15s;
}
.ex-chip:hover { background: #efe9f7; border-color: var(--accent-soft); color: var(--accent); }

/* "What the atlas asks" — question flow with arrows */
.atlas-questions {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.45rem; margin-top: 0.6rem;
}
.atlas-questions > span {
  background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--accent-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.4rem 0.65rem; font-size: 0.85rem; color: var(--navy);
  display: flex; align-items: center;
}

/* "this variant" red halo on the variant page structure */
.struct-nt.variant-focus { stroke: #dc2626; stroke-width: 3px; }

/* clickable variant rows on the position page */
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: rgba(8,145,178,0.08); }

/* haplotype array map */
.am-wrap { overflow-x: auto; padding: 0.25rem 0; }
.am-svg { width: 100%; height: auto; min-width: 620px; }
.am-svg .am-axis { font-family: var(--mono); font-size: 8px; fill: var(--text-50); }
.am-dot { }
.am-gene { cursor: pointer; }
.am-gene:hover { stroke: #111; stroke-width: 1.2px; }
tr.donor-row, tr.hap-row { }
tr.hap-row { cursor: pointer; }
tr.hap-row:hover { background: rgba(8,145,178,0.08); }

/* legal pages (Impressum / Datenschutz) */
.legal-prose { line-height: 1.7; color: var(--text-70); max-width: 52rem; }
.legal-prose h2 { font-size: 1.05rem; color: var(--navy); margin: 1.4rem 0 0.5rem; }
.legal-prose p { margin-bottom: 0.8rem; }
.legal-prose address { font-style: normal; margin-bottom: 0.5rem; }
.legal-prose address p { margin-bottom: 0.1rem; }

/* overview stat cards: force a single row at wide widths (6 cards) */
.stat-grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .stat-grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .stat-grid-6 { grid-template-columns: repeat(6, 1fr); } }

/* overview hero: ribosome image/3D + main stat cards beside it (two rows) */
.ov-hero { display: flex; gap: 1.75rem; align-items: center; margin-bottom: 1.5rem; }
.ov-hero-fig { flex: 0 0 400px; margin: 0; text-align: center; }
.ov-hero-fig img { width: 100%; height: auto; max-width: 400px; }
.ov-hero-fig figcaption { font-size: 0.72rem; color: var(--text-50); line-height: 1.4; margin-top: 0.25rem; }
.ribo-credit { font-size: 0.66rem; color: var(--text-50); line-height: 1.4; margin-top: 0.4rem; }
.ribo-credit a { color: var(--text-70); text-decoration: underline; text-underline-offset: 2px; }
.ribo-credit a:hover { color: var(--accent); }
.ov-hero-stats { flex: 1 1 auto; margin-bottom: 0; grid-template-columns: repeat(3, 1fr); align-content: center; }
@media (max-width: 820px) {
  .ov-hero { flex-direction: column-reverse; align-items: stretch; }
  .ov-hero-fig { flex: none; max-width: 380px; margin: 0 auto; }
  .ov-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* interactive 3D ribosome toggle */
.ribo-3d-btn {
  display: inline-block; margin: 0.4rem auto 0; padding: 0.3rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--text-70); font-size: 0.78rem; font-family: var(--sans);
  cursor: pointer; transition: all 0.2s;
}
.ribo-3d-btn:hover { border-color: var(--sky-blue); color: var(--sky-blue); }
.ov-hero-fig #ribo-media { min-height: 340px; display: flex; align-items: center; justify-content: center; }
.ov-hero-fig model-viewer { --poster-color: transparent; }

/* 3D viewer loading hint + canvas */
.ribo-loading { font-size: 0.78rem; color: var(--text-50); padding: 0.4rem; }
.ov-hero-fig #ribo3d-mount canvas { display: block; margin: 0 auto; touch-action: none; }

/* Background / About page (didactic) */
.doc-prose { line-height: 1.7; color: var(--text-70); max-width: 54rem; }
.doc-prose h2 { font-size: 1.15rem; color: var(--navy); margin: 1.6rem 0 0.5rem; }
.doc-prose h2:first-child { margin-top: 0; }
.doc-prose p { margin-bottom: 0.85rem; }
.doc-prose a { font-weight: 500; }
.doc-list { list-style: none; padding: 0; margin: 0.25rem 0 0.85rem; }
.doc-list li { padding: 0.35rem 0 0.35rem 1.1rem; position: relative; border-bottom: 1px solid var(--border); }
.doc-list li:last-child { border-bottom: none; }
.doc-list li::before { content: '▸'; position: absolute; left: 0; color: var(--sky-blue); }
.callout {
  background: var(--light-blue); border-left: 4px solid var(--sky-blue);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.85rem 1.1rem;
  margin: 1.1rem 0; color: var(--navy); font-size: 0.92rem; line-height: 1.6;
}
.callout-insight { background: #fef3c7; border-left-color: var(--gold); }
.glossary { margin-top: 0.5rem; }
.gloss-item { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.gloss-item:last-child { border-bottom: none; }
.gloss-item dt { font-weight: 600; color: var(--navy); font-size: 0.92rem; }
.gloss-item dd { margin: 0.15rem 0 0; font-size: 0.9rem; }