/* DecodingUs custom styles (vendored bootstrap handles the rest). Mirrors the
   Scala app's main.css for a consistent site feel: fixed top + bottom navbars,
   smooth scroll, and a gray code style. */
html { scroll-behavior: smooth; }
body { padding-top: 56px; padding-bottom: 56px; }

/* Override Bootstrap's default pink/cyan code styling to use gray (Scala parity). */
code { color: #495057; background-color: #f8f9fa; }

.logo-placeholder {
  max-width: 900px;
  display: block;
  margin: 0 auto;
  padding: 20px 0;
}

.detail-empty { color: var(--bs-secondary-color); }

/* References list: clamp the abstract preview to two lines. */
.ref-abstract {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Phylogenetic tree (SVG cladogram) ─────────────────────────────────────── */
.tree-scroll-container {
  overflow: auto;
  max-height: 78vh;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background:
    linear-gradient(90deg, rgba(0,0,0,.02) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(0,0,0,.02) 1px, transparent 1px) 0 0 / 24px 24px;
}
.phylo-tree { display: block; }

.tree-link { fill: none; stroke: var(--bs-border-color, #ccc); stroke-width: 1.5; }

/* "More below" affordance on depth-clipped nodes: a stub + chevron growing out of
   the box so it's obvious the node re-roots into a deeper view. Cue only — the box
   itself is the click target, so the stub never steals pointer events. */
.tree-more-stub {
  fill: none;
  stroke: var(--bs-secondary-color, #6c757d);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.tree-node-rect {
  stroke: #888;
  stroke-width: 1;
  cursor: pointer;
  transition: filter .12s ease;
}
.tree-node-rect:hover,
.tree-node-rect:focus {
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
  stroke-width: 1.5;
  outline: none;
}
.tree-node-rect.node-backbone { fill: #d4edda; stroke: #2e7d32; }
.tree-node-rect.node-recent   { fill: #ffeeba; stroke: #e65100; stroke-dasharray: 4 2; }
.tree-node-rect.node-default  { fill: #f8f9fa; stroke: #6c757d; }

.tree-node-name {
  text-anchor: middle;
  font-weight: 600;
  font-size: 13px;
  fill: #212529;
  pointer-events: none;
}
.tree-variant-link {
  text-anchor: middle;
  font-size: 11px;
  fill: #0d6efd;
  cursor: pointer;
}
.tree-variant-link:hover { text-decoration: underline; }
.tree-node-age {
  text-anchor: middle;
  font-size: 10px;
  fill: var(--bs-secondary-color, #6c757d);
  pointer-events: none;
}
/* TMRCA is the headline age estimate — give it a touch more weight/contrast so it
   reads at a glance instead of being lost among the other lines. */
.tree-node-tmrca {
  font-weight: 600;
  fill: #1b5e20;
}

/* Legend swatches mirror the node fills. */
.legend-swatch {
  display: inline-block;
  width: .9rem; height: .9rem;
  vertical-align: -2px;
  border-radius: 2px;
  border: 1px solid #888;
}
.legend-swatch.node-backbone { background: #d4edda; border-color: #2e7d32; }
.legend-swatch.node-recent   { background: #ffeeba; border-color: #e65100; }
.legend-swatch.node-default  { background: #f8f9fa; border-color: #6c757d; }

/* ── Clade "Geography & Time" panel (in the SNP off-canvas) ──────────────────── */
/* Give the off-canvas enough room for a usable map + full-width time axis. */
#snpOffcanvas { --bs-offcanvas-width: min(94vw, 480px); }

.clade-map {
  height: 240px;
  border-radius: .375rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg, #f8f9fa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color, #6c757d);
  font-size: .8rem;
}

.clade-time-axis { display: block; width: 100%; height: auto; }
.cta-grid   { stroke: rgba(0,0,0,.08); stroke-width: 1; }
.cta-tick   { font-size: 9px; fill: var(--bs-secondary-color, #6c757d); }
.cta-axis-label { font-size: 9px; fill: var(--bs-secondary-color, #6c757d); }
.cta-branch { stroke: #6c757d; stroke-width: 2; stroke-linecap: round; }
.cta-ci     { fill: rgba(27,94,32,.18); stroke: #1b5e20; stroke-width: .75; }
.cta-tmrca  { fill: #1b5e20; stroke: #fff; stroke-width: 1; }
.cta-formed { stroke: #6c757d; stroke-width: 1.5; stroke-linecap: round; }
.cta-whisker { stroke: #8a4b12; stroke-width: 1; }
.cta-anchor  { fill: #e08a3c; stroke: #8a4b12; stroke-width: 1; }

/* Clade-map legend dots. */
.clade-geo-legend { display: flex; flex-wrap: wrap; align-items: center; }
.cg-dot, .cg-diamond {
  display: inline-block;
  width: .75rem; height: .75rem;
  vertical-align: -1px;
  margin-right: .2rem;
}
.cg-dot { border-radius: 50%; border: 1px solid; }
.cg-modern  { background: #0d6efd; border-color: #0d6efd; }
.cg-ancient { background: #e08a3c; border-color: #8a4b12; }
.cg-tmrca   { background: rgba(27,94,32,.35); border-color: #1b5e20; border-radius: 2px; }
.cg-diamond { transform: rotate(45deg); }
.cg-anchor  { background: #e08a3c; border: 1px solid #8a4b12; }

/* ── Mobile layout ──────────────────────────────────────────────────────────
   The footer is a `fixed-bottom` navbar. Below `lg` its links don't collapse, so
   they wrap into a tall bar that overlaps `main` while `body`'s padding only
   reserves one row's height — content gets hidden and you "can't scroll far
   enough". On small screens let the footer flow after the content (static) and
   drop the reserved padding, so nothing is ever trapped under it. Keep the links
   as a compact centered wrap instead of a tall stacked column. */
@media (max-width: 991.98px) {
  body { padding-bottom: 0; }
  footer .navbar.fixed-bottom {
    position: static;
  }
  footer .navbar.fixed-bottom .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  footer .navbar.fixed-bottom .nav-link {
    padding-left: .5rem;
    padding-right: .5rem;
  }
  /* The nested tree canvas no longer competes with a fixed footer for the last
     slice of viewport — give it more room and let the page scroll carry the rest. */
  .tree-scroll-container { max-height: 88vh; }
}