/* ============================================================
   bos-taxon.css — taxon detail page
   Requires bos-common.css for variables
   ============================================================ */

/* ── Page layout: sidebar + resize handle + main ─────────────────────────── */
.page {
  display: grid;
  grid-template-columns: 290px 10px 1fr;
  min-height: calc(100vh - 62px);
  align-items: start;
}
/* Collapsed left panel — !important beats any inline width left over from
   dragging .sidebar-resize; removing the class restores that inline width
   (or the default above) automatically. Only .sidebar goes display:none —
   .sidebar-resize stays put as the sole remaining "expand" control, so the
   grid drops to exactly 2 tracks (its own width, then 1fr) rather than 1:
   with 3 tracks still defined, a display:none item is removed from grid
   auto-placement entirely, so a 3-track template with only 2 real items
   left would place them in the first two tracks (10px, then 1fr) and leave
   the 3rd (1fr) empty and .main squished — matching the track count to the
   surviving item count sidesteps that. */
.page.sidebar-collapsed { grid-template-columns: 10px 1fr !important; }
.page.sidebar-collapsed .sidebar { display: none; }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-self: start;
  scrollbar-width: thin;
  scrollbar-color: var(--stone) transparent;
  isolation: isolate;
  /* The sidebar is user-resizable via the drag handle (see .sidebar-resize
     JS), independent of viewport width, so the tree's narrow-width layout
     (below) reacts to the sidebar's own rendered width via a container
     query rather than a viewport media query. */
  container-type: inline-size;
  container-name: sidebar;
}

/* Drag handle — sits in its own 10px grid column, to the right of the
   scrollbar. Also doubles as the collapse/expand control (see JS): a plain
   click (no drag) toggles .sidebar-collapsed on .page. A small triangle is
   always visible (not just on hover) so the bar reads as a control rather
   than empty space — it points left (◀, "collapse") while expanded and
   flips to point right (▶, "expand") once collapsed. */
.sidebar-resize {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  z-index: 50;
  background: var(--cream);
  border-right: 1px solid var(--border);
  align-self: start;
}
.sidebar-resize:hover,
.sidebar-resize.dragging { background: rgba(196,147,63,0.35); }
.sidebar-resize::after {
  content: '';
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  /* Expanded (default): flat edge on the right, point on the left → ◀ */
  border-right: 5px solid var(--stone-dark);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.sidebar-resize:hover::after { opacity: 1; }

/* Collapsed: the bar is now the only visible remnant of the left panel —
   give it a permanent (not just hover) stronger tint so it clearly reads
   as "still here, click me", and flip the arrow to point right (▶, expand). */
.page.sidebar-collapsed .sidebar-resize {
  cursor: pointer;
  background: var(--cream-dark);
  border-right: 1px solid var(--border-strong);
}
.page.sidebar-collapsed .sidebar-resize:hover { background: rgba(196,147,63,0.35); }
.page.sidebar-collapsed .sidebar-resize::after {
  border-right: none;
  border-left: 5px solid var(--stone-dark);
  opacity: 0.8;
}
.page.sidebar-collapsed .sidebar-resize:hover::after { opacity: 1; }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

/* ── Taxon identity block ────────────────────────────────────────────────── */
.taxon-identity {
  position: relative;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Collapsed-panel identity bar (main content, hidden unless collapsed) ── */
.taxon-identity-collapsed {
  display: none;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.page.sidebar-collapsed .taxon-identity-collapsed { display: flex; }
.taxon-identity-collapsed-sci { font-size: var(--fs-lg); color: var(--navy); }
.taxon-identity-collapsed-author { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 300; }
.taxon-identity-collapsed-common { font-size: var(--fs-md); color: var(--text-primary, #3a3530); }
.taxon-rank-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  background: #FDF6EC;
  border: 1px solid #F0DCAE;
  border-radius: 2px;
  padding: 2px 8px;
  margin-bottom: 10px;
}
.taxon-sci-name {
  font-size: var(--fs-lg);
  font-weight: 400;
  font-style: normal;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 4px;
}
.taxon-author { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 300; margin-bottom: 8px; }
.taxon-common-name { font-size: var(--fs-md); color: var(--text-primary, #3a3530); font-weight: 400; margin-bottom: 10px; }

/* ── Section nav ─────────────────────────────────────────────────────────── */
.section-nav {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.section-nav a {
  display: block;
  font-size: var(--fs-base);
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 0 5px 10px;
  border-left: 2px solid transparent;
  margin-left: -10px;
  transition: color 0.15s, border-color 0.15s;
}
.section-nav a:hover { color: var(--navy); border-left-color: var(--gold); }
.section-nav a.active { color: var(--navy); border-left-color: var(--gold); font-weight: 500; }

/* ── Taxonomic tree ──────────────────────────────────────────────────────── */
/* No horizontal padding here — .tree-group below supplies its own padding
   (18px, no side margin) instead, so its tinted background runs edge-to-edge
   with the sidebar (no horizontal white space) while its label/rows text
   still lands at the same 18px inset as .taxon-identity/.section-nav.
   .tax-tree-title matches that same 18px directly. */
.tax-tree {
  padding: 14px 0;
  flex-shrink: 0;
}
.tax-tree-title {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin-bottom: 10px;
}
/* Very slight background tint per section — depth cue distinguishing
   ancestors / siblings / children (.tree-children below). */
.tree-group {
  margin: 0 0 10px;
  padding: 6px 18px;
  border-radius: 0;
}
.tree-group-ancestors { background: rgba(15,35,64,0.02); }
.tree-group-siblings  { background: rgba(15,35,64,0.035); }
.tree-group-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 3px;
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
/* Translucent overlay (not a flat colour) so hover stays visible regardless
   of which group's background tint (.tree-group-ancestors/-siblings, or
   .tree-children) the row sits on. */
.tree-row:hover { background: rgba(15,35,64,0.06); color: var(--navy); }
.tree-row.current { background: #FDF6EC; color: var(--navy); font-weight: 500; }
.tree-row.ancestor { color: var(--text-secondary); font-weight: 400; }
/* Minor (non-major) ranks — Subphylum, Superclass, Suborder, etc. — recede
   relative to the major-rank ancestors around them, same muted tone used
   elsewhere for de-emphasised text (adapts automatically on the dark
   taxon-tabs theme too, since --text-muted is redefined there). */
.tree-row.ancestor.tree-minor { color: var(--text-muted); }
/* Fixed (not just minimum) width so every ancestor row's taxon name starts
   at the same horizontal position regardless of rank label length — the
   longest labels (Superfamily, Infraorder, Superorder) exceed the old
   min-width:62px, which let the flex item grow to content size per-row and
   misaligned the .tree-sci column. text-overflow:ellipsis is a safety net
   for any rarer label (e.g. "Species-group") still wider than this. */
.tree-rank {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stone);
  flex: 0 0 80px;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-sci { font-style: normal; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tree-common { font-size: var(--fs-xs); color: var(--stone); font-style: normal; overflow: hidden; text-overflow: ellipsis; max-width: 80px; flex-shrink: 0; }
.tree-current-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.tree-sp-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--stone-dark);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1.5;
}

/* Leaf taxa (siblings/children — no rank badge, unlike ancestor rows) never
   truncate their name: wrap to a new line instead, at any sidebar width. */
.tree-row:not(.ancestor) {
  white-space: normal;
  overflow: visible;
}
.tree-row:not(.ancestor) .tree-sci {
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
}

/* ── Narrow sidebar: avoid truncating ancestor names ─────────────────────
   Ancestor rows show RANK + name + speciesCount on one line by default,
   which truncates the name once the (user-resizable) sidebar gets narrow.
   Below this container width, drop to two rows instead: rank (left) and
   speciesCount (right) on row 1, full taxon name — wrapped, never clipped
   — on its own row 2. Scoped to .ancestor rows specifically since siblings/
   children don't show a rank badge; those just gain normal text wrapping
   at the same width so their (rank-less) names aren't clipped either.
   One breakpoint for every ancestor row, major or minor (.tree-minor) —
   minor ranks carry longer rank labels (Superfamily, Infraorder, ...) than
   the 7 principal ranks, so this is set wide enough for those too. Major
   and minor rows must switch over together: splitting the trigger by rank
   would mean only minor rows reflow while major ones still truncate at the
   same width, an inconsistent result the tree shouldn't produce. */
@container sidebar (max-width: 340px) {
  .tree-row.ancestor {
    flex-wrap: wrap;
    row-gap: 2px;
    white-space: normal;
  }
  .tree-row.ancestor .tree-rank { order: 2; }
  .tree-row.ancestor .tree-sp-count { order: 3; margin-left: auto; }
  .tree-row.ancestor .tree-sci {
    order: 4;
    flex: 1 1 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* ── Subtaxa children inlined under the current taxon ───────────────────── */
/* Each row is wrapped in a .tree-node (see taxon.php) spanning the row PLUS
   its own nested .tree-children subtree, if any. The vertical trunk line is
   drawn per-node (.tree-node::before, full node height) rather than as one
   border on the container: stacked .tree-node boxes sit flush against each
   other with no margin between them, so the segments read as one unbroken
   line for every node except the last — gap-free by construction, no
   overflow/clipping tricks needed.
   The LAST node in a container has its full-height trunk suppressed and
   replaced by a short half-height stub on the ROW itself
   (top:0; height:50%), which resolves against the row's OWN box, not the
   node's. That pins the stop point exactly at the row's elbow regardless of
   how tall the row's own nested subtree is below it — producing the L-shape
   without extending through that subtree.
   Every trunk segment is nudged 2px above its own .tree-node's top edge
   (top:-2px) — a preceding sibling that itself has a nested .tree-children
   subtree collapses that subtree's own margin-bottom:2px out through its
   .tree-node box, so consecutive trunk segments would otherwise sit 2px
   apart at that junction. Nudging *every* segment up by the same 2px closes
   those gaps, but at junctions that had no gap to begin with it now
   overlaps the segment above by 2px. --tree-line is therefore a SOLID
   (non-alpha) colour rather than var(--border-strong) (alpha 0.2):
   painting an opaque colour twice looks identical to painting it once, so
   the overlap is invisible, whereas a translucent colour would visibly
   double-darken at those junctions. */
.tree-children {
  position: relative;
  margin-left: 10px;
  padding: 0 8px 3px 0;
  border-radius: 0 4px 4px 0;
  margin-bottom: 2px;
  background: rgba(15,35,64,0.03);
}
.tree-node { position: relative; }
.tree-node::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  bottom: 0;
  width: 2px;
  background: var(--tree-line);
}
.tree-node:last-child::before { content: none; }
.tree-row.tree-child {
  position: relative;
  display: block;
  margin-left: 10px;
  font-size: var(--fs-sm);
  color: var(--stone-dark);
  padding: 3px 5px;
}
.tree-row.tree-child:hover { background: rgba(15,35,64,0.06); color: var(--navy); }
/* Short horizontal stub — the join into the vertical line at this row's
   elbow point. */
.tree-row.tree-child::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 10px;
  height: 0;
  border-top: 1.5px solid var(--tree-line);
  pointer-events: none;
}
/* Half-height trunk stub for the last node's row only — top half of the
   vertical line, stopping at this row's own elbow. height:50% is relative
   to the row's own box (position:relative is on the row here), so it never
   runs into this row's own nested subtree below. Same -2px/+2px seam-closing
   overlap and solid --tree-line colour as .tree-node::before above. */
.tree-node:last-child > .tree-row.tree-child::after {
  content: '';
  position: absolute;
  left: -10px;
  top: -2px;
  height: calc(50% + 2px);
  width: 0;
  border-left: 2px solid var(--tree-line);
  pointer-events: none;
}

/* ── Main content area ───────────────────────────────────────────────────── */
.main { padding: 0; min-width: 0; }
.content { padding: 30px 38px 60px; }

/* Taxonomic breadcrumb — ancestors at major ranks only, single line (scrolls
   horizontally rather than wrapping if it doesn't fit) */
.taxon-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  gap: 6px;
  margin-bottom: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--cream);
}
.taxon-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  flex-shrink: 0;
}
.taxon-breadcrumb-item:hover .taxon-breadcrumb-name {
  color: var(--navy);
}
.taxon-breadcrumb-name em,
.taxon-breadcrumb-name i { font-style: italic; }

/* Badge — solid, darker than the page's cream body background it sits on
   (the sidebar's lighter cream-dark-on-white treatment doesn't read here) */
.taxon-breadcrumb-count {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--stone);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
}
/* a-scoped (not :not(:last-child) on .taxon-breadcrumb-item generally) so
   the taxon-tabs page's trailing .taxon-breadcrumb-current — a <span>, not
   an <a>, present in the DOM but display:none unless the breadcrumb is
   pinned (bos-taxon-tabs.css) — never counts as "not last" for the actual
   last ancestor link just because it comes after it in the DOM. */
a.taxon-breadcrumb-item:not(:last-of-type)::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--stone);
  border-right: 1.5px solid var(--stone);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.section { margin-bottom: 44px; scroll-margin-top: 82px; padding-top: 0; padding-bottom: 0; }
.section-title {
  font-size: var(--fs-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--stone-dark);
  margin-bottom: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.subtaxa-title-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--stone-dark);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 1px 7px;
  margin-left: 8px;
  vertical-align: middle;
  line-height: 1.6;
}
.section-title-note {
  font-size: var(--fs-sm);
  font-weight: 300;
  color: var(--stone);
  text-transform: none;
  letter-spacing: 0;
}

/* ── Gallery: justified layout (Flickr-style) ───────────────────────────── */
.photo-gallery { margin: 0; padding: 0; position: relative; }
.photo-gallery.no-photo { display: none; }

/* Outer: representative image left, justified rows right */
.gallery-outer {
  display: flex;
  gap: 3px;
  background: var(--cream-dark);
  border-radius: 3px;
  overflow: hidden;
}

/* Representative image — width and height set by JS */
.gallery-representative {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--cream-dark);
}
.gallery-representative img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(0.88);
}
.gallery-representative:hover img { transform: scale(1.04); filter: brightness(1.0); }

/* Justified rows container */
.gallery-justified {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* .gallery-row and .gallery-item are injected by JS */
.gallery-row { display: flex; gap: 3px; }
.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  flex-shrink: 0;
  background: var(--cream-dark);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(0.88);
}
.gallery-item:hover img { transform: scale(1.04); filter: brightness(1.0); }

/* Caption overlay — visible on hover */
.gallery-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  padding: 24px 9px 6px;
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.88);
  font-weight: 300;
  line-height: 1.3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.gallery-caption em { font-style: italic; }
.gallery-item:hover .gallery-caption,
.gallery-representative:hover .gallery-caption { opacity: 1; }

.gallery-credit {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  pointer-events: none;
}

/* "View all N photos" link below the gallery */
.gallery-footer {
  display: flex;
  justify-content: flex-end;
  padding: 6px 2px 0;
}
.gallery-view-all {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.gallery-view-all:hover { color: var(--navy); }
.gallery-view-all::after { content: " →"; }

/* ── Introduction ─────────────────────────────────────────────────────────── */
.intro-text { font-size: var(--fs-base); line-height: 1.8; color: var(--text-secondary); font-weight: 300; }
.intro-text p + p { margin-top: 0.9em; }
.intro-text em { font-style: italic; }

/* ── Field grid (characteristics, taxonomy) ──────────────────────────────── */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.field-item { background: #fff; padding: 13px 16px; }
.field-item--dist { background: #fff; padding: 13px 16px; }
.field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone-dark); margin-bottom: 5px; }
.field-value { font-size: var(--fs-base); color: var(--text-primary); font-weight: 300; }
.field-value em { font-style: italic; }

/* ── Distribution inline display ─────────────────────────────────────────── */
.field-item--dist .field-value { display: block; }

.dist-line {
  font-size: var(--fs-base);
  color: var(--text-primary);
  font-weight: 300;
  line-height: 1.7;
}

.dist-country {
}

.dist-states {
  color: var(--stone-dark, #7a6f62);
  font-weight: 300;
}

.dist-sep {
  color: var(--stone-dark, #7a6f62);
}

/* Shared badge base */
.dist-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 3px;
  padding: 1px 6px;
  line-height: 1.6;
  white-space: nowrap;
  cursor: default;
  flex-shrink: 0;
}

/* Residency badge: muted, informational. --cream-dark (a step off the page
   background) reads as barely-there for a badge fill — --stone has enough
   contrast against the page to actually register as a badge. --text-primary
   flips near-black/near-white per theme (see #bttPage's token overrides on
   the tabs page), so this one rule needs no separate dark-theme version. */
.dist-badge--residency {
  background: var(--stone);
  color: var(--text-primary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Language tag on "Other common names" entries — same muted treatment as
   the residency badge above (a label, not a value needing its own color). */
.dist-badge--lang {
  background: var(--stone);
  color: var(--text-primary);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.6em;
  margin-left: 5px;
}
/* Keeps a name and its language badge together on one line — only the
   ", " between entries is a valid wrap point, not the space before the
   badge itself. */
.vernacular-entry {
  white-space: nowrap;
}

/* ── Synonyms — one per line (not comma-wrapped like .vernacular-entry) ──── */
.synonym-list { list-style: none; padding: 0; margin: 0; }
.synonym-entry { padding: 6px 0; border-bottom: 1px solid var(--border); }
.synonym-entry:last-child { border-bottom: none; }
/* Italic correction: the italic name's last letter leans into the space
   before the (upright) author, leaving almost no visible gap. */
.synonym-entry > i { padding-right: 0.15em; }

/* Conservation status badge: coloured by IUCN category */
.dist-badge--cons { text-transform: uppercase; }

.dist-badge--cons-ex  { background: #2d2d2d; color: #fff; }       /* EX / EW */
.dist-badge--cons-cr  { background: #d7191c; color: #fff; }       /* CR */
.dist-badge--cons-en  { background: #e06c2a; color: #fff; }       /* EN */
.dist-badge--cons-vu  { background: #f5a623; color: #000; }       /* VU — bright amber, white text failed contrast */
.dist-badge--cons-nt  { background: #8db93a; color: #000; }       /* NT — light yellow-green, same issue */
.dist-badge--cons-lc  { background: #4caf50; color: #fff; }       /* LC */
.dist-badge--cons-dd  { background: #9e9e9e; color: #000; }       /* DD — mid grey, white text failed contrast */
.dist-badge--cons-ne  { background: #bdbdbd; color: #000; }       /* NE / NA / unknown — was #555 (neither white nor black) */

/* ── Prose (etymology, general text) ─────────────────────────────────────── */
.prose { font-size: var(--fs-base); line-height: 1.8; color: var(--text-secondary); font-weight: 300; }
.prose em { font-style: italic; }
.prose strong { font-weight: 500; }

/* ── Glossary terms + auto-linked taxa (introduction, habitat, etymology, biology) ── */
.parse-glossary .text-glossary-term,
.parse-taxa-links .text-glossary-term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--gold);
  text-underline-offset: 2px;
  cursor: help;
}
.parse-glossary .text-glossary-term:hover,
.parse-taxa-links .text-glossary-term:hover {
  background-color: var(--cream-dark);
}
.parse-taxa-links a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.parse-taxa-links a:hover {
  border-bottom-color: var(--gold);
}

/* ── Type depositories ───────────────────────────────────────────────────── */
.depo-list { list-style: none; padding: 0; }
.depo-item {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.depo-item:last-child { border-bottom: none; }
.depo-type { font-size: var(--fs-sm); font-style: italic; color: var(--text-muted); min-width: 110px; flex-shrink: 0; padding-top: 2px; }
.depo-detail { font-size: var(--fs-base); color: var(--text-secondary); font-weight: 300; line-height: 1.6; }
.depo-detail strong { font-weight: 500; color: var(--text-primary); }
/* Institution names linked to their website — same look as .parse-taxa-links */
.depo-detail a,
.sp-depository-name a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.depo-detail a:hover,
.sp-depository-name a:hover { border-bottom-color: var(--gold); }

/* ── Resources ────────────────────────────────────────────────────────────── */
.resource-list { list-style: none; padding: 0; margin: 0; }
.resource-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
.resource-item:last-child { border-bottom: none; }
.resource-title { font-size: var(--fs-base); color: var(--link, #2a5caa); text-decoration: none; font-weight: 400; }
.resource-desc { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 300; margin-top: 2px; }

/* ── Generic "show more" collapse — reused by Interactions, Type depositories,
   Resources (Traits and Taxonomic references have their own bespoke variants) ── */
.section-collapsible { position: relative; transition: max-height 0.3s ease; }
.section-collapsible.section-collapsed {
  max-height: var(--collapse-max-h, 200px);
  overflow: hidden;
}
.section-collapsible.section-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--cream, #f7f5f0));
  pointer-events: none;
}
.section-collapse-toggle {
  display: block;
  margin-top: 6px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy, #1c2b42);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.section-collapse-toggle:hover { color: var(--link, #2a5caa); }

/* ── Map ─────────────────────────────────────────────────────────────────── */
#specimen-map {
  position: relative;           /* required — Leaflet tiles are position:absolute children */
  overflow: hidden;             /* tiles must not escape the container */
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin-bottom: 24px;
  z-index: 1;
}
/* Leaflet's own container rule — belt-and-suspenders in case leaflet.css loads late */
#specimen-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0; left: 0;
}

/* Pin popup: one clickable row per specimen at that marker (usually one) —
   clicking scrolls to and flashes the matching card in Specimens below. */
.map-popup-specimen {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 5px 0;
}
.map-popup-specimen + .map-popup-specimen {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.map-popup-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.map-popup-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-dark);
  color: var(--stone);
}
.map-popup-text { min-width: 0; }
.map-popup-locality { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.map-popup-catalog {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--stone-dark);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.map-popup-specimen:hover .map-popup-locality { color: var(--navy); }

/* ── Specimen filters ────────────────────────────────────────────────────── */
.specimen-filters {
  display: flex;
  flex-wrap: wrap;               /* wrap to as many lines as needed, at any viewport width */
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 3px;
  position: sticky;
  top: 62px;                    /* directly below .taxon-breadcrumb, which sticks at top:0 at that height */
  z-index: 25;                  /* under the breadcrumb (30), above ordinary page content */
}

.filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone-dark); flex-shrink: 0; }
.filter-year-range {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.filter-year-range .trait-range-track { margin: 4px 6px 3px; }
.filter-year-range .trait-range-thumb { width: 10px; height: 10px; }
.filter-year-label,
.filter-year-value {
  font-size: 9px;
  line-height: 1;
  color: var(--stone-dark);
  text-align: center;
}
.filter-year-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.filter-year-value { font-variant-numeric: tabular-nums; }
.filter-select {
  font-size: var(--fs-sm);
  font-family: inherit;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 5px 10px;
  background: var(--cream);
  color: var(--text-primary);
  cursor: pointer;
  /* style.css has a global `select { width: 100% }` — without this override,
     each select fills its own line as soon as the row wraps. */
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}
.filter-select:focus { outline: none; border-color: var(--gold); }

/* Multi-select filter dropdown — a .filter-select-styled toggle button that
   reveals a checkbox panel, replacing a native <select> so more than one
   option (e.g. two countries) can be picked at once. */
.filter-ms { position: relative; flex: 0 0 auto; }
.filter-ms-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.filter-ms-toggle.active { border-color: var(--gold); color: var(--navy); }
.filter-ms-toggle [data-ms-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A CSS-drawn triangle instead of a text glyph — at small font sizes the
   unicode arrow character (▾) renders as a barely-visible dot on some
   platforms/fonts, so size/shape here isn't left to font rendering. */
.filter-ms-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--stone-dark);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.filter-ms-toggle.open .filter-ms-caret { transform: rotate(180deg); }
.filter-ms-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  padding: 6px 0;
  z-index: 30;
}
.filter-ms-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.filter-ms-option:hover { background: var(--cream-dark); }
/* style.css sets a global `input { padding: 12px 25px; width: 100% }` meant for
   text inputs — without resetting it here, that inflates each checkbox into a
   large padded box, reading as a big gap between the checkbox and its label. */
.filter-ms-option input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  max-width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
}
/* Eligible-specimen count beside each filter value — same look as .tree-sp-count. */
.filter-ms-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--stone-dark);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
  flex-shrink: 0;
}
.filter-pill-toggle .filter-ms-count { margin-left: 6px; }
.filter-divider { width: 1px; height: 20px; background: var(--border-strong); margin: 0 4px; }
.sort-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone-dark); flex-shrink: 0; }
.filter-reset {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  font-family: inherit;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.filter-reset:hover { background: var(--cream-dark); color: var(--navy); }
.filter-pill-toggle {
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-pill-toggle:hover { background: var(--cream-dark); }
.filter-pill-toggle.active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Standalone boolean filter styled as a real checkbox (e.g. "With photos") —
   distinct from .filter-pill-toggle, which reads as a button, not a value. */
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}
.filter-checkbox:hover { background: var(--cream-dark); }
.filter-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  max-width: 14px;
  height: 14px;
  padding: 0;
  margin: 0;
}

/* Sort + Reset pinned to the right edge of the filter bar, as a unit so they
   stay together (rather than drifting apart) when the bar wraps. */
.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.specimen-count-note { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 12px; }

/* ── Specimen cards ──────────────────────────────────────────────────────── */
.specimen-list { display: flex; flex-direction: column; gap: 14px; }
.specimen-card { border: 1px solid var(--border); border-radius: 3px; background: #fff; overflow: hidden; }
.specimen-card.hidden { display: none; }
/* Briefly highlights a card after jumping to it from a map pin popup */
.specimen-flash { animation: specimenFlash 2.6s ease; }
@keyframes specimenFlash {
  0%, 100% { background: #fff; }
  10%, 70% { background: #FDF0D5; }
}
.specimen-card-inner { display: grid; grid-template-columns: 240px 1fr; align-items: stretch; }

/* Photo column */
.specimen-photos {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--cream-dark);
  align-self: stretch;
}
.specimen-photo-main {
  width: 240px;
  height: 240px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.2s;
}
.specimen-photo-main:hover { opacity: 0.9; }
.specimen-photo-empty {
  width: 240px;
  height: 240px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  color: var(--stone);
  font-size: var(--fs-sm);
  background: var(--cream-dark);
  border-right: 1px solid var(--border);
}
.specimen-photo-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border-top: 1px solid var(--border);
  background: var(--cream);
}
.specimen-thumb {
  width: 54px;
  height: 54px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.specimen-thumb:hover { opacity: 1; }
.specimen-thumb.active { opacity: 1; outline: 2px solid var(--gold); outline-offset: -1px; }

/* Data column */
.specimen-data { padding: 14px 18px; min-width: 0; }
.specimen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.specimen-header-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.specimen-catalog { font-size: var(--fs-md); color: var(--navy); font-weight: 500; font-variant-numeric: tabular-nums; }
.specimen-catalog-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: 4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--stone);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}
.specimen-catalog-info:hover,
.specimen-catalog-info:focus-visible { background: var(--navy); outline: none; }
/* No per-element CSS tooltip here — .specimen-catalog-info's data-tooltip
   attribute is already picked up by the site-wide bubble (bos-tooltip.js/
   .css, loaded on every page via header.php/header-tabs.php). A CSS-only
   ::after tooltip used to duplicate it, rendering two overlapping tooltips
   on hover — removed rather than kept alongside; on this page var(--navy)
   resolves to a bright accent blue (#bttPage's dark-theme redefinition)
   which read as the wrong/lighter one of the pair anyway, whereas the JS
   bubble's colour is hardcoded navy so it looks the same everywhere. */
.specimen-collection-badge {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--stone);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  flex-shrink: 1;
}
/* Linked when the depository institution has a URL */
a.specimen-collection-badge,
a.specimen-collection-badge:hover { color: #fff; text-decoration: none; }
a.specimen-collection-badge:hover { text-decoration: underline; }

/* Basis badges */
.specimen-basis {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 2px;
  flex-shrink: 0;
}
.basis-specimen    { background: var(--navy); color: #fff; }
.basis-observation { background: var(--stone); color: var(--text-primary); border: 1px solid var(--border-strong); }
.basis-photograph  { background: #EEF4FF; color: #2A4A8A; border: 1px solid #BDD0F8; }

/* Type status badges */
.specimen-type-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.type-holotype    { background: var(--navy); color: #fff; }
.type-paratype    { background: var(--navy-mid); color: #fff; }
.type-nontype     { background: var(--stone); color: var(--text-primary); border: 1px solid var(--border); }

/* Specimen header: shown when there's no institutional catalog number and
   the collector's own code (specimens.sampleIdentifier) is displayed
   instead. Fixed colours (not theme tokens) so it reads the same on the
   dark #bttPage theme: #1f2a3d on #dde3ec ≈ 11.2:1. */
.collector-code-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1f2a3d;
  background: #dde3ec;
  border-radius: 3px;
  cursor: help;
  white-space: nowrap;
  vertical-align: middle;
}

/* Preliminary identification flag — amber/caution, distinct from the neutral
   gray-brown .withheld-badge (bos-tooltip.css): this isn't withheld data,
   it's an ID that hasn't been confirmed as final yet. */
.preliminary-id-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5a3d00;
  background: #f5c451;
  border-radius: 3px;
  cursor: help;
  white-space: nowrap;
}

/* Soft-hide notice for a taxon with no distribution record in this site's
   scope (e.g. a worldwide Araneae species on BOS with no Singapore
   record). Page still renders in full — this is informational, not an
   error state — so it uses the same neutral --stone/--border/--text-primary
   combo as .type-nontype above, not an alert color. */
.site-scope-notice {
  display: inline-block;
  margin: 4px 0 12px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--stone);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Specimen data fields */
.specimen-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background: var(--border);
}
.sp-field { background: var(--cream); padding: 8px 12px; }
.sp-field-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone-dark); margin-bottom: 3px; }
.sp-field-value { font-size: var(--fs-base); color: var(--text-secondary); font-weight: 300; }
.sp-field-value.coords { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.sp-depository-row { margin-bottom: 3px; }
.sp-catalog-num { font-family: var(--font-mono, monospace); font-size: 0.85em; margin-left: 4px; color: var(--text-secondary); }
.sp-depository-date { font-size: 0.8em; margin-left: 4px; color: var(--stone-dark); }

/* ── Taxonomic tree extras ────────────────────────────────────────────────── */
.tree-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--stone-dark);
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.tree-toggle-icon svg { width: 12px; height: 12px; }
.tree-toggle-icon.active     { opacity: 1; }
.tree-toggle-icon:hover      { opacity: 0.75; }
.tree-toggle-icon.active:hover { opacity: 1; }

.tree-group-sublabel {
  font-size: var(--fs-sm);
  font-weight: 400;
  font-style: italic;
  color: var(--stone);
  padding: 6px 6px 3px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1px;
}
a.tree-group-sublabel {
  display: block;
  text-decoration: none;
  transition: color 0.15s;
}
a.tree-group-sublabel:hover { color: var(--navy); }

/* Species listed under a species-group header — connects sublabel to its species */
.tree-group-children {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

/* Species-group and below: smaller font, relies on title attr for full name tooltip */
.tree-row.tree-species,
.tree-row.tree-species .tree-sci { font-size: var(--fs-sm); }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — tablet and mobile
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tablet: sidebar collapses, content full-width ─────────────── ≤ 900px */
@media (max-width: 900px) {

  /* Stack sidebar above main instead of grid columns */
  .page {
    grid-template-columns: 1fr;
  }

  /* Sidebar: full-width strip, fixed height, horizontal scroll for tree */
  .sidebar {
    position: static;           /* no longer sticky — sits above content */
    height: auto;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* Sidebar resize handle hidden on touch */
  .sidebar-resize { display: none; }

  /* Content padding tighter */
  .content { padding: 20px 20px 40px; }

  /* Gallery: allow representative image to be smaller */
  .gallery-footer { padding: 8px 4px 0; }

  /* Specimen card: stack photo above data on tablet */
  .specimen-card-inner {
    grid-template-columns: 1fr;
  }
  .specimen-photos {
    width: 100%;
    flex-direction: row;        /* main photo + thumbs side by side */
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .specimen-photo-main {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
  }
  .specimen-photo-empty {
    width: 100%;
    height: 120px;
  }
  .specimen-photo-thumbs {
    flex-direction: column;
    border-top: none;
    border-left: 1px solid var(--border);
    padding: 4px;
    gap: 3px;
    overflow-y: auto;
    max-height: 160px;
  }
  .specimen-thumb {
    width: 46px;
    height: 46px;
  }

  /* Specimen fields: single column */
  .specimen-fields {
    grid-template-columns: 1fr;
  }
}

/* ── Mobile: narrower adjustments ──────────────────────────────── ≤ 600px */
@media (max-width: 600px) {

  .content { padding: 16px 14px 32px; }

  /* Gallery: single column — representative image full width, no justified rows */
  .gallery-outer {
    flex-direction: column;
  }
  .gallery-justified { display: none; }  /* hide grid rows; rep image is sufficient */
  #galleryRep {
    width: 100% !important;
    height: 260px !important;
  }

  /* Specimen card: photo full width */
  .specimen-photos {
    flex-direction: column;
  }
  .specimen-photo-main {
    width: 100%;
    height: 220px;
  }
  .specimen-photo-thumbs {
    flex-direction: row;
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .specimen-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
  }

  /* Section title: allow note to wrap */
  .section-title {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Filter selects: full width */
  .specimen-filters {
    gap: 6px;
  }
  .filter-select {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }
  .filter-ms {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }
  .filter-ms-panel { max-width: none; }
  .filter-year-range {
    width: 100%;
    max-width: none;
    order: -1;                    /* keep the range up top, above the dropdowns */
  }
  /* .filter-label has no order of its own, so it defaulted to 0 — behind
     .filter-year-range's -1, i.e. the year range rendered above the
     "Filter" title itself instead of just above the dropdowns below it. */
  .filter-label { order: -2; }
  .filter-label,
  .sort-label { width: 100%; }
  .filter-divider { display: none; }
  .filter-reset { width: 100%; text-align: center; margin-top: 4px; }
  .filter-checkbox {
    flex: 1 1 calc(50% - 6px);
    min-width: 120px;
  }
  /* The right-alignment trick only makes sense on the wide desktop bar —
     on mobile everything already stacks full-width in source order. */
  .filter-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
  }

  /* Map height reduced on small screens */
  #specimen-map { height: 280px; }

  /* Section nav: horizontal scrolling strip */
  .section-nav {
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .section-nav a {
    display: inline-block;
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 4px 10px;
    margin-left: 0;
    white-space: nowrap;
  }
  .section-nav a.active,
  .section-nav a:hover {
    border-left-color: transparent;
    border-bottom-color: var(--gold);
  }

  /* Taxon identity: tighter */
  .taxon-identity { padding: 14px 14px 12px; }
  .taxon-sci-name { font-size: var(--fs-md); }
  .taxon-rank-badge { margin-bottom: 6px; }

  /* Tree: full width, no indent constraints */
  .tax-tree { padding: 10px 14px; }


  /* Field grid: always 1 column */
  .field-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SUBTAXA (children taxa) section
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section title controls ──────────────────────────────────────────────── */
.subtaxa-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* Rank toggle (Minor / Major) */
.subtaxa-rank-toggle { display: flex; gap: 2px; }
.stoggle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: inherit;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--stone-dark);
  opacity: 0.38;
  transition: opacity 0.15s;
}
.stoggle.active  { opacity: 1; }
.stoggle:hover   { opacity: 0.7; }
.stoggle.active:hover { opacity: 1; }

/* Sort toggle (Most species / A–Z) — only shown for sections whose leaves
   are a higher rank than species (see subtaxa-sort-toggle in the view) */
.subtaxa-sort-toggle {
  display: flex;
  gap: 2px;
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid var(--border-strong);
}

/* View toggle (Grid / List icons) */
.subtaxa-view-toggle { display: flex; gap: 2px; }
.subtaxa-group-toggle {
  display: flex;
  gap: 2px;
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border-strong);
}
.vtoggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 24px;
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  color: var(--stone-dark);
  opacity: 0.38;
  transition: opacity 0.15s;
}
.vtoggle.active  { opacity: 1; }
.vtoggle:hover   { opacity: 0.7; }
.vtoggle.active:hover { opacity: 1; }

/* ── Tag filters ─────────────────────────────────────────────────────────── */
.subtaxa-filters {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 14px 10px;
  margin-bottom: 14px;
}
/* Collapsed: only the options bar remains; match the top padding (8px) so
   the bar has equal spacing above/below instead of the reset button sitting
   flush against the bottom border */
.subtaxa-filters.is-collapsed {
  padding-bottom: 8px;
}
.subtaxa-filter-options {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
/* In collapsed state, remove the separator line */
.subtaxa-filters.is-collapsed .subtaxa-filter-options {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* ── "Filters:" label — click collapses whichever tab is open ─────────────── */
.subtaxa-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.subtaxa-filters-label:hover { color: var(--navy); }
.filter-icon { color: var(--stone-dark); flex-shrink: 0; }

/* ── Filter tabs (Photo / Status / Trait) — mutually exclusive; clicking
   the active tab again collapses the whole bar ──────────────────────────── */
.subtaxa-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.subtaxa-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-family: inherit;
  font-weight: 600;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.subtaxa-filter-tab:hover { color: var(--navy); }
.subtaxa-filter-tab.active {
  background: var(--navy, #1c2b42);
  color: #fff;
  border-color: var(--navy, #1c2b42);
}

/* Per-tab active-filter count badge */
.subtaxa-filter-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 20px;
  background: var(--navy, #1c2b42);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.subtaxa-filter-tab.active .subtaxa-filter-section-count {
  background: #fff;
  color: var(--navy, #1c2b42);
}
.subtaxa-filter-section-count[hidden] { display: none; }

/* Active state on trait filter and status filter chips */
.trait-filter-chip.active,
.status-filter-chip.active {
  background: var(--navy, #1c2b42);
  color: #fff;
  border-color: var(--navy, #1c2b42);
}

/* ── Collapsible body ─────────────────────────────────────────────────────── */
.subtaxa-filters-body {
  overflow: hidden;
}
.subtaxa-filters-body.collapsed {
  display: none;
}
.subtaxa-hide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.subtaxa-hide-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--navy);
}

/* ── Filter panels (Photo / Status / Trait) — only the panel matching the
   active tab is shown at a time ──────────────────────────────────────────── */
.subtaxa-filter-panel-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.subtaxa-section-reset-btn {
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.subtaxa-section-reset-btn:hover { color: var(--navy); }

/* Inner: chip groups side-by-side, wrapping */
.subtaxa-filters-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  row-gap: 0;
}
.subtaxa-filter-group {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 16px 4px 0;
  border-right: 1px solid var(--border);
  margin-right: 14px;
  margin-bottom: 4px;
  min-width: 0;          /* allow shrinking below content size */
}
.subtaxa-filter-group:last-of-type {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}
.subtaxa-filter-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stone-dark);
  white-space: nowrap;
  padding-top: 5px;
  min-width: 36px;
  flex-shrink: 0;
}
.subtaxa-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Chip: deselected (default) */
.tag-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-family: inherit;
  color: var(--text-muted);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 4px 10px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1.3;
}
.tag-filter-chip:hover:not(.active) {
  background: var(--cream-dark);
  border-color: var(--stone);
  color: var(--text-secondary);
}

/* Chip: selected */
.tag-filter-chip.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.tag-filter-chip.active:hover {
  background: var(--navy-dark, #0f1f3d);
  border-color: var(--navy-dark, #0f1f3d);
}
.tag-filter-chip.active .tag-count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Chip: empty (no matching taxa) */
.tag-filter-chip.tag-filter-empty {
  opacity: 0.38;
  pointer-events: none;
}

/* Count badge inside chip */
.tag-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--stone-dark);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
  transition: background 0.12s, color 0.12s;
}

/* Result count note */
.subtaxa-count {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: 10px;
  min-height: 1.4em;
}

/* Invisible trigger for loading the next chunk of a large flat species/
   subtaxa list (see startChunkedLoad, bos-subtaxa.js) — not meant to be
   seen, just to intersect the viewport a bit before the user hits it. */
.stax-load-sentinel {
  height: 1px;
}

/* ── Grid view ───────────────────────────────────────────────────────────── */
.subtaxa-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.stax-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
  /* The species section on a large family/genus can render thousands of
     these (built client-side from subtaxaGroupsJson — see bos-subtaxa.js).
     content-visibility skips layout/paint for cards outside the viewport
     until they scroll near it; contain-intrinsic-size gives the browser a
     placeholder size (~card width × 4:3 photo + info row) so scrollbar/
     layout doesn't jump once each card is actually measured. Cards stay in
     the DOM either way — this only defers rendering cost, so it doesn't
     hide anything from crawlers. */
  content-visibility: auto;
  contain-intrinsic-size: 220px 260px;
}
.stax-card:hover {
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.stax-photo {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream-dark);
  flex-shrink: 0;
}
.stax-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.stax-card:hover .stax-photo img { transform: scale(1.05); }
.stax-no-photo {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
}
.stax-info {
  padding: 7px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stax-name-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.stax-name {
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--navy);
  line-height: 1.3;
  font-weight: 400;
  flex: 1 1 auto;
  min-width: 0;
}
.stax-count {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--stone-dark);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Relationship card reference badge — count of supporting literature/links,
   with the full list shown on hover/focus. Sits as a SIBLING of .stax-card
   (not inside its <a>), so the popover's own reference links are real,
   independently-clickable <a> tags rather than invalid nested anchors. */
.stax-card-wrap { position: relative; }
.stax-ref-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  cursor: default;
}
.stax-ref-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.stax-ref-popover {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 200px;
  max-width: 280px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  padding: 8px 10px;
}
.stax-ref-badge:hover .stax-ref-popover,
.stax-ref-badge:focus-within .stax-ref-popover,
.stax-ref-badge:focus .stax-ref-popover {
  display: block;
}
.stax-ref-popover-title {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--stone-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}
.stax-ref-item {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--navy);
  text-decoration: none;
  padding: 3px 0;
  border-top: 1px solid var(--border);
}
.stax-ref-item:first-of-type { border-top: none; }
.stax-ref-item:hover { color: var(--gold); }
.stax-ref-item--plain { color: var(--text-secondary); cursor: default; }
.stax-ref-item--plain:hover { color: var(--text-secondary); text-decoration: none; }
.stax-common-name {
  font-size: 11px;
  color: var(--stone-dark);
  font-weight: 300;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── List view ───────────────────────────────────────────────────────────── */
.subtaxa-list { width: 100%; }
.stax-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.stax-table thead tr {
  border-bottom: 2px solid var(--border-strong);
}
.stax-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--stone-dark);
  padding: 6px 10px;
}
.stax-table th.stax-sortable {
  cursor: pointer;
  user-select: none;
}
.stax-table th.stax-sortable:hover { color: var(--navy); }
.stax-sort-arrow { font-size: 9px; }
.stax-sort-arrow--idle { color: var(--stone); opacity: 0.55; }
.stax-sort-arrow--active { color: var(--gold); opacity: 1; }
.stax-table th.stax-sortable:hover .stax-sort-arrow--idle { opacity: 0.9; }
.stax-row {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.stax-row:hover { background: var(--cream); }
.stax-row td { padding: 7px 10px; vertical-align: middle; }
.stax-thumb-cell { width: 52px; padding: 4px 8px; }
.stax-thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
}
.stax-thumb-empty {
  width: 44px; height: 44px;
  border-radius: 2px;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
}
.stax-name-cell { max-width: 320px; }
.stax-name-cell .stax-name { display: block; color: var(--navy); font-weight: 400; }
.stax-author {
  display: block;
  font-size: 11px;
  color: var(--stone-dark);
  margin-top: 1px;
}
.stax-common { color: var(--text-muted); }
.stax-col-sp  { text-align: right; color: var(--stone-dark); width: 60px; white-space: nowrap; }
.stax-col-cmp { width: 32px; padding: 6px 4px; }
/* List-view comparator button: static position, always visible */
.cmp-add-btn--list {
	position: static;
	opacity: 1;
	width: 24px;
	height: 24px;
	background: var(--cream-dark, #ede9e2);
	border: 1px solid var(--border-strong, #c8c0b4);
	border-radius: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--navy, #1c2b42);
	cursor: pointer;
	flex-shrink: 0;
}
.cmp-add-btn--list.cmp-add-btn--active {
	background: var(--navy, #1c2b42);
	border-color: var(--navy, #1c2b42);
	color: #fff;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* ── Sticky combined filter bar ────────────────────────────────────────────── */
/* Sticks below the global nav; capped so it never swallows most of the
   viewport. When the panel is tall, the body scrolls internally.           */
.subtaxa-filters {
  position: sticky;
  top: 62px;
  z-index: 20;
  max-height: 40vh;
  overflow-y: auto;
  overflow-x: hidden;   /* never overflow screen width */
  scrollbar-width: thin;
  scrollbar-color: var(--stone) transparent;
  box-sizing: border-box;
  width: 100%;
}
/* The options bar (collapse btn + hide toggle + reset) stays pinned at the
   top of the scrollable panel — chip body scrolls beneath it             */
.subtaxa-filters .subtaxa-filter-options {
  position: sticky;
  top: 0;
  background: var(--cream);
  z-index: 1;
}

/* 900–1099 px: narrower sidebar, 4-col grid */
@media (max-width: 1099px) {
  .page { grid-template-columns: 220px 10px 1fr; }
  .subtaxa-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}

/* ≤900px: sidebar collapses to a top strip; content goes full-width */
@media (max-width: 900px) {
  .page {
    display: flex;
    flex-direction: column;
  }

  /* Sidebar: horizontal strip at the top, not sticky, auto height */
  .sidebar {
    position: static;
    height: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }
  .sidebar-resize { display: none; }

  /* Compress sidebar internal blocks to horizontal arrangement */
  .taxon-identity {
    flex: 0 0 auto;
    max-width: 320px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .section-nav {
    flex: 1 1 auto;
    min-width: 160px;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .section-nav a { padding: 3px 0 3px 8px; }
  .tax-tree { flex: 1 1 auto; min-width: 180px; }

  /* Filter: no longer sticky (sidebar is now static above, offsetting top) */
  .subtaxa-filters {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
  .subtaxa-filters .subtaxa-filter-options {
    position: static;
  }

  .content { padding: 20px 20px 40px; }
  .subtaxa-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .subtaxa-controls { gap: 6px; }
}

/* ≤600px: 2-col grid, hide species count column in list view */
@media (max-width: 600px) {
  .page { font-size: 14px; }

  /* Sidebar stacked blocks go fully vertical again on small screens */
  .sidebar { flex-direction: column; }
  .taxon-identity {
    max-width: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .section-nav {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tax-tree { min-width: 0; }

  .content { padding: 14px 14px 30px; }
  .subtaxa-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stax-col-sp { display: none; }
  .subtaxa-controls { flex-wrap: wrap; }

  /* Chip groups scroll horizontally instead of wrapping on very small screens */
  .subtaxa-filter-group {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
    flex-direction: column;
    gap: 4px;
  }
  .subtaxa-filters-inner {
    flex-direction: column;
    gap: 6px;
  }
}

/* ── Subtaxa group headers (subfamily / species-group dividers) ──────────── */
.stax-group-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--navy);
  padding: 20px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.stax-group-hdr-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
  cursor: default;
}
/* Collapse toggle button */
.stax-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--cream-dark);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s;
}
.stax-collapse-btn:hover { background: var(--stone-light, #ddd); }
.stax-chevron {
  display: block;
  transition: transform 0.18s ease;
  color: var(--stone-dark);
}
/* Nested depth levels: progressively smaller, indented */
.stax-depth-1 .stax-group-header,
.stax-group-body.stax-nested > .stax-depth-1 {
  font-size: var(--fs-sm);
  padding: 14px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-left: 0;
}
.stax-group-body.stax-nested {
  padding-left: 16px;
  border-left: 2px solid var(--border);
  margin-left: 4px;
  margin-bottom: 10px;
}
.stax-group-body.stax-nested .stax-group-body.stax-nested {
  padding-left: 12px;
  margin-left: 4px;
}
.stax-group-rank {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--stone-dark);
  flex-shrink: 0;
}
.stax-group-link,
.stax-group-name {
  color: var(--navy);
}
.stax-group-link {
  text-decoration: none;
}
.stax-group-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--stone-dark);
  background: var(--cream-dark);
  border-radius: 3px;
  padding: 1px 6px;
  line-height: 1.5;
}

/* List view: group header row. Vertical padding lives here (not on a nested
   .stax-group-header — list mode has no such wrapper, see renderNodeList in
   bos-subtaxa.js) so consecutive intermediate-taxon rows aren't flush against
   each other; the inline padding-left (per-row indent) overrides only that side. */
.stax-list-group-header td {
  padding: 10px 10px 6px 0;
  border-bottom: none;
}
/* List mode's header row has no flex/gap wrapper around the chevron + text
   (unlike grid mode's .stax-group-header), so the button needs its own gap. */
.stax-list-group-header .stax-collapse-btn {
  margin-right: 6px;
}

/* ── Feedback trigger ────────────────────────────────────────────────────── */
.taxon-feedback-row {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #e2ddd6);
  text-align: right;
}
.taxon-feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-family: inherit;
  font-weight: 500;
  color: var(--stone-dark, #7a6f62);
  background: none;
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 4px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.taxon-feedback-btn:hover {
  color: var(--navy, #1c2b42);
  border-color: var(--navy, #1c2b42);
}

/* ── Feedback modal ──────────────────────────────────────────────────────── */
.fb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1050;
}
.fb-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1051;
  width: min(560px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}
.fb-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, #e2ddd6);
}
.fb-modal-title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--navy, #1c2b42);
}
.fb-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--stone-dark, #7a6f62);
  cursor: pointer;
  padding: 0 4px;
  border-radius: 3px;
}
.fb-modal-close:hover { background: var(--cream-dark, #ede9e2); color: var(--navy, #1c2b42); }
.fb-modal-desc {
  margin: 12px 20px 0;
  font-size: var(--fs-sm);
  color: var(--stone-dark, #7a6f62);
  line-height: 1.5;
}
.fb-modal-desc p { margin: 0 0 8px; }
.fb-modal-desc p:last-child { margin-bottom: 0; }
.fb-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 12px 20px 0;
}
.fb-field-grid .fb-field { margin: 0; }
@media (max-width: 560px) {
  .fb-field-grid { grid-template-columns: 1fr; }
}
.fb-field {
  margin: 12px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fb-required { color: var(--gold, #C4933F); font-weight: 600; }
.fb-optional {
  font-size: var(--fs-xs);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--stone, #a89e91);
}
.fb-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--stone-dark, #7a6f62);
}
.fb-input {
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--navy, #1c2b42);
  background: var(--cream, #f7f5f0);
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.12s;
}
.fb-input:focus {
  outline: none;
  border-color: var(--navy, #1c2b42);
  background: #fff;
}
.fb-textarea { resize: vertical; min-height: 100px; }
.fb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
}
.fb-btn-submit {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  background: var(--navy, #1c2b42);
  border: none;
  border-radius: 4px;
  padding: 9px 20px;
  cursor: pointer;
  transition: background 0.12s;
}
.fb-btn-submit:hover    { background: #263d5e; }
.fb-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.fb-status { font-size: var(--fs-xs); flex: 1; }
.fb-status--ok    { color: #2e7d32; }
.fb-status--error { color: #b71c1c; }

/* ── Traits section ──────────────────────────────────────────────────────── */

/* Collapsible wrapper */
.trait-section-wrap {
  position: relative;
  transition: max-height 0.3s ease;
}
.trait-section-wrap.trait-collapsed {
  max-height: var(--trait-max-h, 200px); /* set by JS once row height is known */
  overflow: hidden;
}
/* Fade-out gradient at the bottom when collapsed */
.trait-section-wrap.trait-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--cream, #f7f5f0));
  pointer-events: none;
}

/* Expand toggle button */
.trait-expand-btn {
  display: block;
  margin-top: 6px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy, #1c2b42);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trait-expand-btn:hover { color: var(--link, #2a5caa); }

/* ── Taxonomic References (left panel) ───────────────────────────────── */
.lit-panel-item {
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.lit-panel-item:last-child { margin-bottom: 0; }
.lit-panel-headline {
  color: var(--text, #2b2b2b);
  margin-bottom: 1px;
}
.lit-panel-headline em { font-style: italic; font-weight: 500; }
.lit-panel-ref { color: var(--text-muted, #777); }
.lit-panel-body { color: var(--text-muted, #777); }
.lit-panel-body a { color: var(--link, #2a5caa); text-decoration: none; }

/* ── Taxonomic References ─────────────────────────────────────────── */
.taxon-lit-wrap {
  position: relative;
  transition: max-height 0.3s ease;
}
.taxon-lit-wrap.taxon-lit-collapsed {
  max-height: var(--lit-max-h, 200px);
  overflow: hidden;
}
.taxon-lit-wrap.taxon-lit-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--cream, #f7f5f0));
  pointer-events: none;
}
.taxon-lit-list {
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}
.taxon-lit-item {
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: 10px;
  color: var(--text, #2b2b2b);
}
.taxon-lit-item:last-child { margin-bottom: 0; }
/* Headline: taxonName + reference */
.taxon-lit-headline {
  margin-bottom: 2px;
}
.taxon-lit-taxonname {
  /* italics come from <i> in bos_literatureTaxonNameHtml() — only the part
     before "sp." for an open-nomenclature name */
  font-weight: 500;
  color: var(--text, #2b2b2b);
}
.taxon-lit-ref {
  font-size: var(--fs-xs);
  color: var(--text-muted, #777);
}
/* Body: linked citation + pages */
.taxon-lit-body {
  font-size: var(--fs-xs);
  color: var(--text-muted, #777);
}
.taxon-lit-citation {
  color: inherit;
}
a.taxon-lit-citation {
  color: var(--link, #2a5caa);
  text-decoration: none;
}
.taxon-lit-toggle {
  display: block;
  margin-top: 6px;
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy, #1c2b42);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.taxon-lit-toggle:hover { color: var(--link, #2a5caa); }

.trait-category {
  margin-bottom: 20px;
}
.trait-category:last-child { margin-bottom: 0; }

.trait-category-label {
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--stone-dark, #7a6f62);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border, #e2ddd6);
}

.trait-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.trait-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--cream-dark, #ede9e2);
  font-size: var(--fs-sm);
}
.trait-row:last-child { border-bottom: none; }

.trait-name {
  flex: 0 0 180px;
  font-weight: 500;
  color: var(--navy, #1c2b42);
  display: flex;
  align-items: center;
  gap: 5px;
}

.trait-info-icon {
  position: relative;
}

.trait-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--stone, #b0a99c);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}

.trait-value {
  flex: 1;
  color: var(--body, #2d2926);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.trait-val-text {
  font-variant-numeric: tabular-nums;
}

.trait-val-link {
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  text-decoration-color: var(--stone, #b0a99c);
}
.trait-val-link:hover {
  color: var(--link, #2a5caa);
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

.trait-note {
  font-size: var(--fs-xs);
  color: var(--stone-dark, #7a6f62);
  font-style: italic;
}

.trait-val-meta {
  font-size: var(--fs-xs);
  color: var(--stone-dark, #7a6f62);
}

.trait-citation {
  font-size: var(--fs-xs);
  color: var(--stone-dark, #7a6f62);
  text-decoration: none;
  border-bottom: 1px dotted var(--stone, #b0a99c);
}
.trait-citation:hover { color: var(--navy, #1c2b42); }

.trait-sep {
  color: var(--stone-dark, #7a6f62);
  margin-right: 2px;
  user-select: none;
}

@media (max-width: 600px) {
  .trait-name { flex: 0 0 130px; }
}

/* ── Trait filter subsection ─────────────────────────────────────────────── */
.subtaxa-filter-unit {
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--stone-dark, #7a6f62);
  margin-left: 3px;
  text-transform: none;
  letter-spacing: 0;
}

/* Trait filter groups stack vertically — label above, control below */
.subtaxa-filter-panel--traits .subtaxa-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Range slider ────────────────────────────────────────────────────────── */
.trait-range-wrap {
  width: 100%;
  max-width: 120px;
}

.trait-range-track {
  position: relative;
  height: 4px;
  background: var(--border, #e2ddd6);
  border-radius: 2px;
  margin: 10px 8px;
  cursor: pointer;
}

.trait-range-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: var(--navy, #1c2b42);
  border-radius: 2px;
  pointer-events: none;
}

.trait-range-thumb {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--navy, #1c2b42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  z-index: 2;
  touch-action: none;
}
.trait-range-thumb:active { cursor: grabbing; }
.trait-range-thumb:focus-visible {
  outline: 2px solid var(--navy, #1c2b42);
  outline-offset: 2px;
}

.trait-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.trait-range-input {
  width: 68px;
  font-family: inherit;
  font-size: var(--fs-xs);
  color: var(--navy, #1c2b42);
  background: var(--cream, #f7f5f0);
  border: 1px solid var(--border, #e2ddd6);
  border-radius: 3px;
  padding: 3px 6px;
  text-align: center;
  -moz-appearance: textfield;
}
.trait-range-input::-webkit-outer-spin-button,
.trait-range-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.trait-range-input:focus {
  outline: none;
  border-color: var(--navy, #1c2b42);
  background: #fff;
}

.trait-range-sep {
  color: var(--stone-dark, #7a6f62);
  font-size: var(--fs-xs);
}

/* Empty state message */
.subtaxa-empty {
  padding: 24px;
  text-align: center;
  color: var(--stone-dark, #7a6f62);
  font-size: var(--fs-sm);
}

/* ── Add-all-species button ──────────────────────────────────────────── */
.cmp-add-all-btn {
  display: inline-block;
  margin-top: 6px;
  font-size: var(--fs-sm, 13px);
  padding: 6px 12px;
  border: 1px solid var(--gold, #C4933F);
  border-radius: 4px;
  background: transparent;
  color: var(--gold, #C4933F);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cmp-add-all-btn:hover {
  background: color-mix(in srgb, var(--gold, #C4933F) 15%, transparent);
}

/* ── Add-all modal prompt ────────────────────────────────────────────── */
.cmp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cmp-modal {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  max-width: 420px;
  width: 100%;
  padding: 28px 28px 20px;
}
.cmp-modal-body {
  margin-bottom: 20px;
}
.cmp-modal-msg {
  font-size: 15px;
  color: var(--text-primary, #1a1a18);
  margin: 0 0 8px;
  line-height: 1.4;
}
.cmp-modal-sub {
  font-size: 14px;
  color: var(--text-secondary, #4a4a42);
  margin: 0;
  line-height: 1.5;
}
.cmp-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cmp-modal-btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--border, #e0ddd8);
  background: #fff;
  color: var(--text-primary, #1a1a18);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.cmp-modal-btn:hover { background: var(--cream, #f7f5f0); }
.cmp-modal-btn--primary {
  background: var(--navy, #0F2340);
  color: #fff;
  border-color: var(--navy, #0F2340);
}
.cmp-modal-btn--primary:hover { background: #1a3455; }
.cmp-modal-btn--secondary {
  color: var(--text-secondary, #4a4a42);
}

/* ── "Back to Species" sticky button — shown once the Species section
   header scrolls off-screen ── */
.species-section-back-to-top {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--navy, #0F2340);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 10px 20px 10px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(15,35,64,0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.15s ease;
}
.species-section-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.species-section-back-to-top:hover { background: var(--gold, #C4933F); }
.species-section-back-to-top svg { flex-shrink: 0; }
@media (max-width: 600px) {
  .species-section-back-to-top span { display: none; }
  .species-section-back-to-top { padding: 12px; border-radius: 50%; }
}