/* Uses the :root tokens and .site-header/.wordmark/.lang-switch/.status
   rules already defined in style.css -- only page-specific styles here. */

.back-link {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green);
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--accent);
}

.species-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

/* Server-rendered fallback paragraph (see <!--SEO_SUMMARY--> in
   src/api.py) -- visible only until species.js loads the real profile and
   removes it, or permanently for a client that never runs JS at all. */
.seo-summary {
  margin: 0.75rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Identity block */

.identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 1rem 0 0.5rem;
}

.identity-text {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dex-number {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}

.species-photo-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 0 auto;
}

.thumb-placeholder {
  display: block;
  width: 140px;
  aspect-ratio: 1 / 1;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 0.3rem 0;
  object-fit: cover; /* only affects an <img> -- a no-op on the plain placeholder <span> used when a species has no photo */
}

/* Full, untruncated species.image_attribution (unlike the compact,
   ellipsis-truncated .photo-credit reused on atlas cards/rank rows --
   see style.css) plus a link back to the original observation/file. */
.species-photo-credit {
  max-width: 140px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
}

.species-photo-link {
  display: block;
  color: var(--green);
  font-weight: 600;
}

.species-photo-link:hover,
.species-photo-link:focus-visible {
  color: var(--accent);
}

.species-name {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
}

.species-vernacular {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--ink);
}

.species-vernacular:empty {
  display: none;
}

.species-taxon {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Key figures and section titles now live in style.css, shared with the
   region map's side panel (map.html). */

.commonness {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--ink);
}

/* Seasonality chart */

.monthly-chart {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-box);
  padding: 0.5rem 0.25rem 0.25rem;
}

.monthly-chart-svg {
  display: block;
  width: 100%;
  height: auto;
}

.bar-rect {
  fill: var(--green);
}

.bar-group:hover .bar-rect {
  fill: var(--accent);
}

.bar-pct {
  font-family: var(--font-sans);
  font-size: 6.5px;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.1s ease;
}

.bar-group:hover .bar-pct {
  opacity: 1;
}

.bar-label {
  font-family: var(--font-sans);
  font-size: 6.5px;
  fill: var(--muted);
}

/* Month filter, region selector, and map panels/legend/popup styles now
   live in style.css -- shared with the region map (static/map.js). The
   cladogram itself (.cladogram-canvas/.cladogram-*) also lives in
   style.css, shared with tree.html -- only this section's own "open in
   full tree" link is specific to this page. */

/* Deliberately breaks out of .species-main's 720px reading-width column --
   a cladogram (even a small one) needs real horizontal room to stay
   legible, unlike the prose/figures above it, which stay narrow on
   purpose. Standard full-bleed technique: span the viewport, capped at a
   sane max-width, then re-center on the page's own axis (the same one
   .species-main's margin:0 auto already centers on, since both are
   centered relative to the same viewport). */
.phylogeny {
  width: 100vw;
  max-width: 1000px;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0 1rem; /* matches .species-main's own side padding, since this section no longer sits inside it width-wise */
  box-sizing: border-box;
}

/* This view is deliberately narrow (species' own tip + its handful of
   closest relatives -- see phylo_species_neighbourhood in src/queries.py),
   so unlike tree.html's full-tree canvas (which needs real scroll room and
   its own zoom control), this one should never need to scroll at all.
   max-width/height:auto lets the SVG's own viewBox scale it responsively,
   the same way tree.js's zoom control already scales the full tree's
   painted output -- text shrinks along with the graphic, which stays
   legible here because there are only ever a handful of rows and columns
   after pruning. max-height + overflow-y is a defensive ceiling, not
   something normal data should ever hit. */
#phylo-canvas.cladogram-canvas {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}

#phylo-canvas .cladogram-svg {
  max-width: 100%;
  height: auto;
}

/* Smaller than the full tree's own .cladogram-label (style.css) to match
   the compact colWidth/labelMargin species.js passes renderCladogram for
   this view -- keeps the intrinsic SVG narrower to begin with, so the
   responsive scaling above has less shrinking left to do on a small
   screen. */
#phylo-canvas .cladogram-label {
  font-size: 0.68rem;
}

#phylo-canvas .cladogram-node.is-internal .cladogram-label {
  font-size: 0.62rem;
}

.phylo-open-tree-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green);
}

.phylo-open-tree-link:hover,
.phylo-open-tree-link:focus-visible {
  color: var(--accent);
}

/* Wider screens */

@media (min-width: 640px) {
  .species-main {
    padding: 1.5rem 1.5rem 4rem;
  }

  .identity {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
  }

  .thumb-placeholder {
    width: 120px;
    margin: 0;
    flex: 0 0 auto;
  }

  .species-photo-credit {
    max-width: 120px;
  }
}