/* layout.css — page shell, page-unique layout. Components live in components.css; tokens in tokens.css; element defaults in base.css. */

.main-content,
.main-content--flush {
  flex: 1;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.main-content {
  padding-block: var(--space-7);
}

.main-content--flush {
  padding-block: 0;
}

/* Release tracker */
.species-card-photo { position: relative; }
.release-badge {
  position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 1;
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.3;
  color: var(--color-text-on-dark); background: rgba(20, 20, 16, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.release-badge--full { background: var(--color-forest); }

.zp-release-hint { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* type scale follows the species page: sm body, forest serif titles (.sp-section-title / .zp-card-title) */
.rsv-page { font-size: var(--text-sm); }
.rsv-intro { margin: 0 0 var(--space-5); color: var(--color-text-muted); }
.rsv-continent { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-lg); color: var(--color-forest); }
/* filters sit in a card with inline labels, like the Zoopedia toolbar ("Sort by") */
.rsv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.rsv-field--grow { flex: 1; min-width: 220px; }
.rsv-field--grow .form-input { width: 100%; }
.rsv-continent-block[hidden], .rsv-card[hidden], .rsv-row[hidden], .rsv-eco-block[hidden], .rsv-species[hidden] { display: none; }
/* two views per card: all animals, or grouped by the ecosystem they need */
.rsv-view-eco { display: none; }
.rsv-by-eco .rsv-view-eco { display: block; }
.rsv-by-eco .rsv-view-animals { display: none; }
/* the ecosystems a reserve has, as pills under its name; click one to filter */
.rsv-toolbar .form-select { width: auto; min-width: 170px; }
.rsv-views { margin: 0; }
/* what an ecosystem needs: a card that opens when you hover or focus its pill */
.rsv-eco-tip { position: relative; display: inline-block; }
.rsv-eco-pop { display: none; top: 100%; left: 0; width: 340px; max-width: 80vw; margin-top: var(--space-2); font-size: var(--text-sm); }
.rsv-eco-tip:hover .rsv-eco-pop, .rsv-eco-tip:focus-within .rsv-eco-pop { display: block; }
.rsv-eco-pop-title { margin: 0; font-size: var(--text-md); color: var(--color-forest); }
.rsv-eco-pop .rsv-eco-label:first-of-type { margin-top: var(--space-2); }.rsv-eco-label { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; }
.rsv-eco-note { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
.rsv-eco-objects li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; border-top: var(--border-width) solid var(--color-border); }
.rsv-eco-objects li:first-child { border-top: 0; }
.rsv-eco-amount { color: var(--color-text-muted); white-space: nowrap; }
/* all animals together: each reserve card spans the page and the animals run three across */
.rsv-page:not(.rsv-by-eco) .rsv-grid { grid-template-columns: 1fr; }
.rsv-page:not(.rsv-by-eco) .rsv-view-animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: var(--space-6); }
.rsv-page .rsv-progress { max-width: 520px; }
.rsv-eco-block + .rsv-eco-block { margin-top: var(--space-4); }
.rsv-eco-title { margin: 0 0 var(--space-1); font-size: var(--text-md); color: var(--color-forest); }
/* grouped by ecosystem: each reserve is a heading with its ecosystems as cards, three across (no continent heading) */
.rsv-by-eco .rsv-grid { grid-template-columns: 1fr; gap: var(--space-6); }
.rsv-by-eco .rsv-view-eco { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.rsv-by-eco .rsv-eco-block .rsv-species { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: var(--space-6); }
.rsv-by-eco .rsv-eco-block { margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border-card); }
.rsv-by-eco .rsv-eco-title { padding-bottom: var(--space-2); }
.rsv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }
.rsv-head { margin-bottom: var(--space-3); }
.rsv-name { margin: 0; font-size: var(--text-md); color: var(--color-forest); }
.rsv-progress { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.rsv-progress .progress { flex: 1; }
.rsv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--border-width) solid var(--color-border); }
.rsv-link { display: flex; align-items: center; gap: var(--space-3); min-width: 0; text-decoration: none; color: inherit; }
.rsv-link:hover span { text-decoration: underline; }
.rsv-thumb { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.rsv-thumb--empty { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-page); border: var(--border-width) solid var(--color-border); font-size: var(--text-sm); }
.rsv-tick { flex: none; }

/* Keeper Hut release tracker */
/* one row per species; overflow stays visible so the reserve tooltips are not clipped */
.rel-list { font-size: var(--text-sm); display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--color-border-card); border-radius: var(--radius-lg); }
.rel-item { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 1.2fr) minmax(270px, 1fr); gap: var(--space-5); align-items: center; padding: var(--space-3) var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.rel-item[hidden] { display: none; }
.rel-item--head { order: -1; border-top: none; padding-block: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); background: var(--surface-page); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rel-species { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rel-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-raised); }
.rel-avatar--empty { display: flex; align-items: center; justify-content: center; font-weight: var(--weight-bold); color: var(--color-forest); }
.rel-species-text { display: flex; flex-direction: column; min-width: 0; }
.rel-species-name { color: var(--color-text); text-decoration: none; line-height: 1.25; }
.rel-species-name:hover { text-decoration: underline; }
/* hover note: a small light card, "Needed for release" plus one pill per ecosystem */
.rel-tip {
  left: 0; bottom: calc(100% + 8px);
  display: flex; flex-direction: column; gap: var(--space-2);
  width: max-content; max-width: 340px;
  font-weight: var(--weight-normal); text-align: left;
  opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .12s, transform .12s;
}
.rel-tip-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.rel-breeding .rsv-tick { white-space: nowrap; }
@media (max-width: 900px) {
  .rel-item { grid-template-columns: 1fr; gap: var(--space-2); }
  .rel-item--head { display: none; }
  .rel-breeding { flex-wrap: wrap; }
  .rel-zoo { flex-basis: 100%; }
}

.sp-disclaimer {
  margin: calc(-1 * var(--space-4)) 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.text-gold {
  color: var(--color-gold);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-center {
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--nav-height);
  background: var(--color-forest);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-5);
}

.nav-logo {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark);
  white-space: nowrap;
}

.nav-logo sup {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-gold);
  vertical-align: super;
  letter-spacing: .04em;
}

.nav-mobile-menu {
  display: contents;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, .75);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.nav-item:hover,
.nav-item.is-active {
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, .08);
}

.nav-chevron {
  font-size: var(--text-sm);
  opacity: .6;
  transition: transform var(--transition-fast);
}

.nav-dropdown.is-open .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  display: none;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 180px;
}

.nav-dropdown-menu--right {
  left: auto;
  right: 0;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.is-active {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.nav-dropdown-menu-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-menu-btn:hover,
.nav-dropdown-menu-btn.is-active {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.nav-dropdown-menu hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
  margin: var(--space-1) 0;
}

/* ════════════════════════════════════════════════════════════
   PAGE HEADER BAND
   ════════════════════════════════════════════════════════════ */
.page-header {
  background: var(--color-forest);
  padding: var(--space-4) 0;
}

.page-header h1 {
  font-size: var(--text-lg);
  color: var(--color-text-on-dark);
  margin-top: var(--space-1);
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.footer {
  background: var(--color-forest);
  padding-block: var(--space-5);
  margin-top: var(--space-9);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}

.footer-logo {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark);
}

.footer-logo sup {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-gold);
  vertical-align: super;
  letter-spacing: .04em;
}

.footer-copy {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, .75);
  text-align: center;
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, .75);
}

.footer-legal a {
  color: var(--color-gold);
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-gold-light);
}

/* ════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════ */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════
   TOGGLE
   ════════════════════════════════════════════════════════════ */

/* Container for the button so it sits above the layout cleanly */
.filter-toggle-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.filter-results-summary {
  display: flex;
  align-items: center;
}

@media (max-width: 720px) {
  .filter-toggle-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .filter-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    order: 1;
  }

  .filter-actions .pill {
    width: auto;
    flex: 1;
    justify-content: center;
  }

  .filter-results-summary {
    justify-content: center;
    order: 2;
    margin-top: var(--space-2);
    width: 100%;
  }
}

/* The magic class that hides the sidebar */
.species-layout.filters-hidden .species-sidebar {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   BADGES
   ════════════════════════════════════════════════════════════ */
.report-message-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.report-message-toggle:hover {
  color: var(--color-text);
}

.report-message-chevron {
  display: inline-block;
  transition: transform .15s;
}

.report-message-toggle[aria-expanded="true"] .report-message-chevron {
  transform: rotate(90deg);
}

.report-message-body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border);
}

.report-message-body p+p {
  margin-top: var(--space-2);
}

.report-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.report-note-input {
  flex: 1;
  max-width: 320px;
}

.report-days-input {
  width: 72px;
}

/* ════════════════════════════════════════════════════════════
   BREADCRUMB
   ════════════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gold-light);
  margin-bottom: var(--space-2);
}

.breadcrumb a {
  color: var(--color-gold-light);
}

.breadcrumb a:hover {
  opacity: .8;
}

.breadcrumb-sep {
  opacity: .5;
}

.breadcrumb span:not(.breadcrumb-sep) {
  color: var(--color-gold);
}

/* ════════════════════════════════════════════════════════════
   STAT BARS
   ════════════════════════════════════════════════════════════ */
.stat-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ════════════════════════════════════════════════════════════
   AUTH MODAL
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(10, 14, 8, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.modal-overlay--confirm { z-index: var(--z-modal); }

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

body.modal-active {
  overflow: hidden;
}

.modal-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 460px;
  padding: var(--space-7);
  position: relative;
  transform: translateY(12px);
  transition: transform var(--transition-base);
}

.modal-overlay.is-open .modal-card {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.modal-close:hover {
  color: var(--color-text);
  background: var(--color-border);
}

/* ════════════════════════════════════════════════════════════
   AUTH PAGES
   ════════════════════════════════════════════════════════════ */
.auth-wrap {
  display: flex;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 440px;
}

.auth-card h1 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.auth-footer-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-5);
}

.auth-footer-note a {
  color: var(--color-forest);
}

.auth-footer-note a:hover {
  color: var(--color-forest-mid);
}

/* ════════════════════════════════════════════════════════════
   SPECIES CARDS & ANIMALS PAGE
   ════════════════════════════════════════════════════════════ */
.species-section {
  background: var(--surface-page);
  padding-block: var(--space-7);
  min-height: 60vh;
}

.species-layout {
  display: flex;
  gap: var(--space-7);
  align-items: flex-start;
}

/* Sidebar */
.species-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: var(--space-5);
}

.filter-group {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.filter-group:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-n { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-light); }

.filter-range-input {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

/* Accordion filter groups */
.filter-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  margin-bottom: 0;
}

.filter-chevron {
  font-size: var(--text-md);
  transition: transform .2s;
  display: inline-block;
}

.filter-accordion.is-open .filter-chevron {
  transform: rotate(180deg);
}

.filter-accordion-body {
  display: none;
  padding-top: var(--space-3);
}

.filter-accordion.is-open .filter-accordion-body {
  display: block;
}

/* Grid */
.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-5);
  transition: opacity .15s;
}

.species-grid.is-loading {
  opacity: .4;
  pointer-events: none;
}

.species-empty {
  grid-column: 1/-1;
  color: var(--color-text-muted);
  padding: var(--space-7) 0;
  text-align: center;
}

/* Species card */
.species-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .15s, box-shadow .15s;
  background: var(--surface-raised);
}

.species-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

.species-card-header {
  background: var(--color-forest);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.species-card-latin {
  font-size: var(--text-sm);
  color: var(--color-gold);
  font-style: italic;
  margin: 0 0 var(--space-1);
  line-height: 1.3;
}

.species-card-name {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-on-dark);
  margin: 0;
  line-height: 1.25;
}

.iucn-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-dark);
  letter-spacing: .02em;
}

.iucn-badge-empty {
  background: transparent;
  border: 2px dashed var(--color-gold-light);
  color: var(--color-gold-light);
}

.role-badge-admin {
  background: var(--medal-gold);
  color: var(--medal-gold-text);
}

.role-badge-moderator {
  background: var(--medal-silver);
}

.role-badge-keeper {
  background: var(--medal-bronze);
}

.species-card-photo {
  height: 220px;
  overflow: hidden;
}

.species-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.species-card-placeholder {
  width: 100%;
  height: 100%;
  min-height: 160px;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
}

.species-card-placeholder span {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  color: var(--color-forest);
  opacity: .2;
  font-family: var(--font-heading);
}

/* ════════════════════════════════════════════════════════════
   SPECIES DETAIL PAGE
   ════════════════════════════════════════════════════════════ */
.sp-page {
  background: var(--surface-page);
  padding-block: var(--space-7);
}

/* Top: photo + meta */
.sp-top {
  display: flex;
  gap: var(--space-6);
  align-items: stretch;
  margin-bottom: var(--space-7);
}

.sp-photo-col {
  flex-shrink: 0;
  width: 340px;
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (max-width: 700px) {
  .sp-top {
    flex-direction: column;
  }

  .sp-photo-col {
    width: 100%;
  }
}

.sp-photo-outer {
  position: relative;
  flex: 1;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .15));
}

.sp-photo-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 3px solid var(--color-border);
}

.sp-photo-medal-bronze .sp-photo-wrap {
  border-color: var(--medal-bronze);
}

.sp-photo-medal-silver .sp-photo-wrap {
  border-color: var(--medal-silver);
}

.sp-photo-medal-gold .sp-photo-wrap {
  border-color: var(--medal-gold);
}

.sp-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.animal-detail-medal {
  position: absolute;
  top: -10px;
  left: -18px;
  width: 56px;
  height: 56px;
  object-fit: contain;
  z-index: 2;
}

.animal-photo-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.animal-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  margin-bottom: var(--space-4);
}

.animal-page-actions__lead { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-right: auto; }

/* Animal page: medal in the hero corner (where the species page has the IUCN badge), two-column info, gene rows */
.animal-hero--bronze { border: 3px solid var(--medal-bronze); }
.animal-hero--silver { border: 3px solid var(--medal-silver); }
.animal-hero--gold { border: 3px solid var(--medal-gold); }
.animal-hero-medal { position: absolute; z-index: 1; top: var(--space-4); right: var(--space-4); width: 72px; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.animal-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: var(--space-6); }
.animal-gene-row { display: grid; grid-template-columns: 100px minmax(80px, 1fr) 56px 260px; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--color-border); }
.animal-gene-row:last-child { border-bottom: 0; }
.animal-gene-text { text-align: right; color: var(--color-text-muted); letter-spacing: .08em; white-space: nowrap; }
@media (max-width: 800px) {
  .animal-gene-row { grid-template-columns: 100px 1fr 56px; }
  .animal-gene-row .animal-gene-text { grid-column: 1 / -1; text-align: left; }
}

.sp-photo-placeholder {
  width: 100%;
  height: 260px;
  background: var(--color-forest);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-photo-placeholder span {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  opacity: .2;
  font-family: var(--font-heading);
}

.sp-iucn-overlay {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
}

.sp-latin-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: var(--space-2);
}

.sp-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.sp-quickstats {
  margin-top: var(--space-4);
}

/* Stat rows */
.sp-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.sp-stat-row:last-child {
  border-bottom: none;
}

.sp-stat-row--bar {
  align-items: center;
}

.sp-stat-row--bar .sp-stat-bar-mid {
  margin: 0 var(--space-3);
}

.sp-stat-label--fixed {
  width: 72px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.sp-stat-bar-mid {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
  justify-content: center;
}

.sp-stat-bar-mid .progress {
  width: 100%;
  flex: none;
}

.sp-stat-row--bar>.sp-stat-value {
  width: 32px;
  flex-shrink: 0;
  text-align: right;
}

.sp-stat-label {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.sp-stat-value {
  font-weight: var(--weight-normal);
  text-align: right;
}

.sp-mf {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--space-3);
}

/* Sections */
.sp-section {
  margin-bottom: var(--space-7);
}

.sp-section-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
  color: var(--color-forest);
}

.sp-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

.sp-two-col>div {
  display: flex;
  flex-direction: column;
}

.sp-two-col .card {
  flex: 1;
}

/* Prose (about text) */
.sp-prose h3 {
  font-size: var(--text-lg);
  color: var(--color-dark);
  margin: var(--space-6) 0 var(--space-3);
}

.sp-prose h3:first-child {
  margin-top: 0;
}

.sp-prose p {
  line-height: 1.7;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

/* Colors & patterns */
.sp-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.sp-color-card {
  text-decoration: none;
  display: flow-root;
}

a.sp-color-card {
  transition: box-shadow .15s, transform .15s;
}

a.sp-color-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  transform: translateY(-1px);
}

.sp-color-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  float: right;
  margin-left: var(--space-3);
}

.sp-color-name {
  font-weight: var(--weight-normal);
  margin-bottom: var(--space-1);
  color: var(--color-forest);
}

.sp-color-sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sp-color-thumb--placeholder {
  background: var(--color-bg-subtle);
}

.sp-no-patterns {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  margin: 0;
}

/* My Animals cards */
.animal-card {
  padding: 0;
  gap: 0;
  will-change: transform;
}

.animal-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  font-size: var(--text-sm);
}

.animal-card-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.animal-card-thumb-wrap .sp-color-thumb {
  width: 52px;
  height: 52px;
  float: none;
  margin-left: 0;
}

.animal-card-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 3px solid transparent;
}

.animal-card-thumb-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  border: 3px solid transparent;
}

.animal-card-medal-bronze .animal-card-thumb,
.animal-card-medal-bronze .animal-card-thumb-placeholder {
  border-color: var(--medal-bronze);
}

.animal-card-medal-silver .animal-card-thumb,
.animal-card-medal-silver .animal-card-thumb-placeholder {
  border-color: var(--medal-silver);
}

.animal-card-medal-gold .animal-card-thumb,
.animal-card-medal-gold .animal-card-thumb-placeholder {
  border-color: var(--medal-gold);
}

.animal-card-medal-img {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 24px;
  height: 24px;
}

.species-card-name .gender-icon {
  width: 14px;
  height: 14px;
}

.animal-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.animal-card-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.animal-stat-row .progress { flex: 1; }

.animal-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  width: 88px;
  flex-shrink: 0;
}

.animal-data-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.animal-card-row {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  align-items: baseline;
}

.animal-card-row span:last-child {
  color: var(--color-text);
  min-width: 0;
}

.animal-stat-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  width: 56px;
  text-align: right;
  flex-shrink: 0;
}

/* Gene row under Fertility / Immunity: up to 6 two-letter genes */
.gene-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); margin: 0 0 var(--space-2); }
/* Gene entry: six .form-input fields in a row */
.gene-input { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-1); }
.gene-input__block { min-width: 0; text-align: center; text-transform: uppercase; font-weight: var(--weight-bold); }
/* Whole market card is clickable: the View animal link stretches over it; other links/buttons sit above it */
.marketplace-card.animal-card { position: relative; }
.animal-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.marketplace-card.animal-card .mp-keeper-link, .marketplace-card.animal-card button { position: relative; z-index: 2; }
.animal-card-genes { margin: 0 0 var(--space-2); text-align: right; font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: .05em; }
.gene-tile { padding: var(--space-1) 0; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text-muted); background: var(--surface-sunken); border-radius: var(--radius-sm); }

.animal-card-medal-img {
  position: absolute;
  top: -4px;
  left: -4px;
  width: auto;
  height: 28px;
}

.animal-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-card);
  margin-top: auto;
}

/* Compatible species */
.sp-compat-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sp-compat-item {
  text-decoration: none;
  font-size: var(--text-sm);
}

/* Upload dropzone */
.gu-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-4);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  color: var(--color-text-muted);
}

.gu-dropzone:hover,
.gu-dropzone-active {
  border-color: var(--color-gold);
  background: rgba(184, 160, 112, .06);
  color: var(--color-text);
}

.gu-dropzone-icon {
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text-light);
}

.gu-dropzone-active .gu-dropzone-icon {
  color: var(--color-gold);
}

.gu-dropzone-text {
  font-size: var(--text-sm);
}

.gu-preview-wrap {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  width: 100%;
  margin-top: var(--space-3);
}

.gu-preview-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
}

.gu-preview-more {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-page);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
}

/* Gallery */
.sp-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: var(--space-5);
}

.sp-gallery-thumb {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
}

.sp-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s;
}

.sp-gallery-thumb:hover img {
  transform: scale(1.04);
}

.sp-gallery-pending {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: rgba(0, 0, 0, .55);
  color: var(--color-white);
  font-size: var(--text-sm);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

.sp-section>.sp-section-title,
.sp-section>div>.sp-section-title {
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-forest);
  margin-bottom: var(--space-4);
}

/* Lightbox */
.sp-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-lightbox[hidden] {
  display: none;
}

.sp-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, .75);
  backdrop-filter: blur(6px);
}

.sp-lightbox-box {
  position: relative;
  z-index: 1;
  max-width: 860px;
  width: 90vw;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .sp-lightbox-box {
    width: 95vw;
    padding: var(--space-3) var(--space-2);
  }
}

/* Picture viewer (species gallery, colours): wraps the picture, which is as large as the window allows (tall pictures stay inside the window height, nothing is scaled up) */
.sp-lightbox-box--photo { width: fit-content; min-width: min(420px, 94vw); max-width: 94vw; padding: var(--space-4); }
.sp-lightbox-box--photo .sp-lightbox-img-wrap { width: auto; }
.sp-lightbox-box--photo .sp-lightbox-img-wrap img {
  flex: none; width: auto; height: auto;
  max-width: min(1450px, calc(94vw - 2 * var(--space-4)));
  max-height: calc(100vh - 190px);
}
.sp-lightbox-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  background: none;
  border: none;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}

.sp-lightbox-close:hover {
  color: var(--color-text);
}

.sp-lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.sp-lightbox-img-wrap img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  flex: 1;
}

.sp-lightbox-nav {
  position: absolute;
  background: rgba(0, 0, 0, .35);
  border: none;
  color: var(--color-white);
  font-size: var(--text-lg);
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.sp-lightbox-nav:hover {
  background: rgba(0, 0, 0, .6);
}

.sp-lightbox-prev {
  left: var(--space-2);
}

.sp-lightbox-next {
  right: var(--space-2);
}

.sp-lightbox-nav[hidden] {
  display: none;
}

.sp-lightbox-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
}

.sp-lightbox-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}

/* ════════════════════════════════════════════════════════════
   COLORS PAGE
   ════════════════════════════════════════════════════════════ */

.color-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.color-block {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.color-block-header {
  background: var(--color-forest);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.color-block-title {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-on-dark);
  margin: 0;
  letter-spacing: .01em;
}

.color-section-title { font-size: var(--text-lg); color: var(--color-forest); margin: var(--space-5) 0 calc(var(--space-2) * -1); line-height: var(--leading-tight); }
.color-section-note { display: block; font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-muted); margin-top: var(--space-1); }
.color-page-head { margin-bottom: var(--space-5); }
.color-page-crumb { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.color-page-crumb a { color: inherit; text-decoration: none; }
.color-page-crumb a:hover { text-decoration: underline; }
.color-page-title { font-size: var(--text-lg); color: var(--color-forest); margin: 0; line-height: var(--leading-tight); }
.color-page-sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* A variant is the same block as a color; only the tag on the right says what it is */
.color-block-header { justify-content: space-between; }
.color-star {
  color: var(--color-gold-light);
  font-size: var(--text-sm);
}

.color-block-body {
  background: var(--surface-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.color-gender-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
}

.color-img-strip {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

.color-img {
  flex: none;
  height: 135px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  min-width: 0;
  border-radius: var(--radius-md);
  transition: transform .15s;
}

.color-img:hover {
  transform: scale(1.03);
}

.color-patterns-toggle {
  width: 100%;
  background: var(--surface-page);
  border: none;
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-forest);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: background .15s;
}

.color-patterns-toggle:hover {
  background: var(--surface-sunken);
}

.color-patterns-count {
  min-width: 1.6em;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  font-size: var(--text-sm);
  text-align: center;
}

.color-patterns-chevron {
  margin-left: auto;
  font-size: var(--text-sm);
  transition: transform .2s;
}

.color-patterns-toggle.is-open .color-patterns-chevron {
  transform: rotate(90deg);
}

.color-patterns {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Variants inside a color's toggle: flat full-width sections, not cards */
.color-variant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  border-top: 1px solid var(--color-border);
}
.color-variant-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-forest); }
.color-patterns[hidden] {
  display: none;
}

.color-sidebar-species {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background .15s;
}

.color-sidebar-species:hover {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.color-sidebar-species.is-active {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  font-weight: var(--weight-normal);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.color-sidebar-tree {
  padding: var(--space-1) 0 var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--surface-page);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin-bottom: var(--space-1);
}

.color-sidebar-color {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.species-sidebar--colors { width: 250px; }
.color-sidebar-name { min-width: 0; overflow-wrap: anywhere; }
.color-sidebar-mark { flex: none; width: 1em; text-align: center; }

.color-sidebar-color:hover,
.color-sidebar-color.is-active {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.color-sidebar-pattern {
  display: block;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.color-sidebar-pattern:hover,
.color-sidebar-pattern.is-active {
  color: var(--color-text-on-dark);
  background: var(--color-forest);
}

.color-sidebar-label {
  padding: var(--space-2) var(--space-2) var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

/* ════════════════════════════════════════════════════════════
   ADMIN
   ════════════════════════════════════════════════════════════ */
.species-thumb-preview {
  display: block;
  max-width: 240px;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-3);
}

.admin-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}

.admin-gallery-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-gallery-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.admin-gallery-meta {
  flex: 1;
}

.admin-gallery-species {
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0 0 2px;
}

.admin-gallery-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.admin-gallery-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════
   LEGAL PAGES
   ════════════════════════════════════════════════════════════ */
.legal-wrap {
  max-width: 740px;
}

.legal-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.legal-body h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  color: var(--color-forest);
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p {
  margin-bottom: var(--space-4);
  line-height: 1.75;
}

.legal-body ul {
  margin: 0 0 var(--space-4) var(--space-5);
  line-height: 1.75;
}

.legal-body ul li {
  margin-bottom: var(--space-2);
}

.legal-body a {
  color: var(--color-forest);
  text-decoration: underline;
}

.legal-body a:hover {
  color: var(--color-gold);
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE
   ════════════════════════════════════════════════════════════ */
.hero {
  background: var(--color-forest);
  padding-block: var(--space-5) var(--space-8);
  overflow: hidden;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-content {
  max-width: 680px;
  margin-top: calc(var(--space-4) * -1);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.hero-eyebrow-line {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--color-gold);
  opacity: .6;
}

.hero-title {
  font-size: clamp(34px, 5.2vw, var(--text-hero));
  line-height: var(--leading-tight);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
}

.hero-title em {
  font-style: italic;
  color: var(--color-gold);
}

.hero-desc {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, .65);
  line-height: var(--leading-loose);
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: 0;
}

.hero-desc sup {
  font-size: .6em;
  color: var(--color-gold);
}

.hero-art {
  width: 100%;
  max-width: 1120px;
}

/* Wide banner (≈3.2 : 1) — sized by width so it always fills the hero */
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2200 / 695;
  object-fit: contain;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, .35));
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art     { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-content { animation: hero-rise .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.features {
  padding-block: var(--space-9);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-7);
}

.section-header h2 {
  font-size: var(--text-lg);
  margin-block: var(--space-3);
}

.section-sub {
  font-size: var(--text-md);
  max-width: 500px;
  margin-inline: auto;
  line-height: var(--leading-loose);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-dark);
  border-radius: var(--radius-md);
  color: var(--color-gold);
  flex-shrink: 0;
}

.feature-card h3 {
  font-size: var(--text-md);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  flex: 1;
}

.feature-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-forest);
  transition: color var(--transition-fast);
  margin-top: auto;
}

.feature-link:hover {
  color: var(--color-forest-mid);
}

.about {
  background: var(--color-forest);
  padding-block: var(--space-9);
}

/* ════════════════════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════════════════════ */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.mt-3 {
  margin-top: var(--space-3);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-5 {
  margin-top: var(--space-5);
}

.mb-3 {
  margin-bottom: var(--space-3);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-5 {
  margin-bottom: var(--space-5);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.w-full {
  width: 100%;
}

.text-danger {
  color: var(--color-danger);
}

.text-forest {
  color: var(--color-forest);
}

.divider--tight {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin-block: var(--space-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Container width variants */
.container--narrow {
  max-width: 720px;
}

.container--sm {
  max-width: 680px;
}

/* Card variants */
/* Max-width constraints */
.max-w-200 {
  max-width: 200px;
}

.max-w-240 {
  max-width: 240px;
}

/* Form helpers */
.form-bare {
  margin: 0;
}

.form-contents {
  display: contents;
}

.form-hint--indented {
  margin-left: 20px;
}

/* Modal size variants */
.modal-card--sm {
  max-width: 440px;
}

.modal-card--md {
  max-width: 480px;
}

.modal-title {
  font-size: var(--text-lg);
}

/* Status / reported badge */
.status-badge {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: 2px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* Sidebar empty state */
.msg-list-empty {
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ════════════════════════════════════════════════════════════
   MEDAL RADIO PICKER
   ════════════════════════════════════════════════════════════ */
.medal-radio-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.medal-radio-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
}

.medal-radio-option input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.medal-radio-option span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.medal-radio-option.is-active span,
.medal-radio-option:has(input:checked) span {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

.medal-radio-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-page);
  transition: border-color .15s;
}

.medal-radio-option.is-active .medal-radio-btn,
.medal-radio-option:has(input:checked) .medal-radio-btn {
  border-color: var(--color-forest);
}

.medal-radio-option:hover .medal-radio-btn {
  border-color: var(--color-text-muted);
}

.overlay-row {
  position: relative;
}

.overlay-thumb {
  position: absolute;
  right: -8px;
  bottom: 12px;
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: none;
  z-index: 5;
  pointer-events: none;
  /* Let clicks pass through to the select box if needed */
}

.medal-none-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-border);
}

.medal-img {
  height: 28px;
  width: auto;
}

/* ════════════════════════════════════════════════════════════
   STAT SLIDERS (add / edit animal form)
   ════════════════════════════════════════════════════════════ */
.stat-slider-label {
  width: 72px;
  flex-shrink: 0;
  font-size: var(--text-sm);
}

.stat-slider-wrap {
  flex: 1;
}

.stat-slider-wrap input[type=range] {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-pill);
  outline: none;
  cursor: pointer;
}

.stat-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-forest);
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  cursor: pointer;
}

.stat-slider-val {
  width: 36px;
  text-align: right;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   COLOR PREVIEW (add / edit animal form)
   ════════════════════════════════════════════════════════════ */
.color-preview-wrap {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--color-border);
  background: var(--color-border);
  display: none;
  flex-shrink: 0;
}

.color-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.color-preview-anchor {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
}

/* ════════════════════════════════════════════════════════════
   ANIMAL DETAIL PAGE — extras
   ════════════════════════════════════════════════════════════ */

.rare-star {
  color: var(--color-gold);
}

/* ════════════════════════════════════════════════════════════
   MINE PAGE — extras
   ════════════════════════════════════════════════════════════ */

.img-upload-strip {
  display: flex;
  gap: var(--space-2);
}

.img-upload-slot {
  position: relative;
  flex: 1;
  cursor: pointer;
}

.img-upload-slot--thumb {
  flex: 1.3;
}

.img-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.img-upload-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-border);
  background: var(--color-bg-subtle, var(--color-border-card));
  background-size: cover;
  background-position: center;
  transition: border-color 0.15s;
}

.img-upload-slot:hover .img-upload-preview {
  border-color: var(--color-forest);
}

.img-upload-slot.has-file .img-upload-preview {
  border-style: solid;
  border-color: var(--color-forest);
}

.img-upload-slot--thumb .img-upload-preview {
  border-color: var(--color-gold);
}

.img-upload-slot--thumb.has-file .img-upload-preview {
  border-color: var(--color-gold);
}

.img-upload-label {
  display: block;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.form-input--short {
  max-width: 100px;
}

.flex-grow {
  flex: 1;
}

.overlay-select {
  flex: 1;
}

.overlay-thumb.is-visible {
  display: block;
}

.user-list-row {
  border-bottom: 1px solid var(--color-border);
}

.user-list-row:last-child {
  border-bottom: none;
}

.user-list-row.is-open {
  background: transparent;
}

.user-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
}

.user-row:hover {
  background: var(--surface-sunken);
}

.user-row-info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.user-row-name {
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

img.msg-avatar { object-fit: cover; background: var(--surface-card); }

.nav-avatar-wrap { position: relative; display: inline-flex; margin-right: var(--space-1); }

.nav-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.nav-avatar-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--color-gold);
  border: 2px solid var(--color-dark);
}

.nav-badge--new { padding: 0 8px; }

.hut-avatar {
  display: flex;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.msg-avatar--sm {
  width: 30px;
  height: 30px;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.user-detail {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.user-role-select,
.user-sort-select {
  width: auto;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   SPECIES VIEW PAGE — extras
   ════════════════════════════════════════════════════════════ */
.sp-lightbox-box--gallery {
  max-width: 500px;
}

.float-right {
  float: right;
  margin-top: var(--space-1);
}

/* ════════════════════════════════════════════════════════════
   GENDER ICONS
   ════════════════════════════════════════════════════════════ */
.gender-icon {
  display: inline;
  vertical-align: middle;
  margin-right: 3px;
  width: 16px;
  height: 16px;
}

/* ════════════════════════════════════════════════════════════
   GALLERY UPLOAD
   ════════════════════════════════════════════════════════════ */
.container--upload {
  max-width: 520px;
  padding: var(--space-10) var(--space-4);
}

/* ════════════════════════════════════════════════════════════
   COLORS PAGE — extras
   ════════════════════════════════════════════════════════════ */

/* ── Pedigree chart ── */
.pedigree-chart {
  display: flex;
  width: 100%;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: auto;
  border: var(--border-width) solid var(--color-border-card);
}

.pedigree-gen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 150px;
  border-right: 1px solid var(--color-border);
}

.pedigree-gen:last-child {
  border-right: none;
}

.pedigree-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pedigree-group+.pedigree-group {
  border-top: 2px solid var(--color-border);
}

.ped-cell {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  min-height: 60px;
}

.ped-cell:last-child {
  border-bottom: none;
}

.ped-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-decoration: none;
}

.ped-name:is(a):hover {
  text-decoration: underline;
}

.ped-unknown {
  font-style: italic;
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

/* ── Animal hero card ── */

/* ── Lineage ── */

/* ── Sell modal sheet ── */
.sp-lightbox-box--sm {
  max-width: 400px;
  padding: var(--space-6);
}

.modal-sheet-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.card-section-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  color: var(--color-forest);
}

.form-row {
  display: flex;
  gap: var(--space-3);
}

.form-row .form-group {
  flex: 1;
}

/* ════════════════════════════════════════════════════════════
   SETTINGS
   ════════════════════════════════════════════════════════════ */
.settings-section-title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.species-picker {
  position: relative;
}

.species-pick-dropdown {
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
}

.species-pick-option {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.species-pick-option:hover {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.admin-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin-pick-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}

.admin-pick-item:hover {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.audit-entry-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-size: var(--text-sm);
}

.audit-entry-meta {
  flex: 1;
}

.audit-chevron {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: transform .15s;
}

.audit-entry-body {
  display: none;
  margin-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border-card);
  padding-top: var(--space-3);
}

.audit-entry-body.is-open {
  display: block;
}

.audit-field {
  color: var(--color-text-muted);
  width: 160px;
  font-weight: var(--weight-medium);
}

.audit-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.audit-arrow {
  color: var(--color-text-muted);
  width: 24px;
  text-align: center;
}

.audit-new {
  color: var(--color-text);
}

.settings-section-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   MESSAGES
   ════════════════════════════════════════════════════════════ */
.msg-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: calc(100vh - var(--nav-height) - 360px);
  min-height: 500px;
  overflow: hidden;
}

.msg-sidebar {
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.msg-list {
  flex: 1;
  overflow-y: auto;
}

.msg-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-card);
  cursor: pointer;
  transition: background var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.msg-list-item:hover {
  background: var(--surface-page);
}

.msg-list-item.is-active {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.msg-list-item.is-active .msg-item-from,
.msg-list-item.is-active .msg-item-subject,
.msg-list-item.is-active .msg-item-time {
  color: var(--color-text-on-dark);
  opacity: .9;
}

.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

.msg-list-item.is-active .msg-avatar {
  background: rgba(255, 255, 255, .2);
}

.msg-item-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.msg-item-from {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-item-time {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.msg-item-subject {
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.msg-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  margin-top: 6px;
}

.msg-list-item.has-unread {
  background: var(--surface-sunken);
}

.msg-list-item.has-unread:hover {
  background: var(--surface-page);
}

/* Thread panel */
.msg-thread {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg-thread-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.msg-thread-with {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.msg-thread-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.msg-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 68%;
}

.msg-bubble-wrap.mine {
  align-self: flex-end;
  align-items: flex-end;
}

.msg-bubble-wrap.theirs {
  align-self: flex-start;
  align-items: flex-start;
}

.msg-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  word-break: break-word;
}

.msg-bubble-wrap.mine .msg-bubble {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  border-bottom-right-radius: var(--radius-sm);
}

.msg-bubble-wrap.theirs .msg-bubble {
  background: var(--surface-card);
  border: 1px solid var(--color-border-card);
  color: var(--color-text);
  border-bottom-left-radius: var(--radius-sm);
}

.msg-bubble-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  padding: 0 var(--space-1);
}

.msg-bubble--deleted,
.msg-bubble-wrap.mine .msg-bubble--deleted,
.msg-bubble-wrap.theirs .msg-bubble--deleted {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-text-light);
  font-style: italic;
}

.msg-edited { color: var(--color-text-light); }

.msg-actions { margin-left: var(--space-2); }

.msg-act {
  background: none;
  border: none;
  padding: 0;
  margin-left: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-light);
  cursor: pointer;
}

.msg-act:hover { color: var(--color-forest); text-decoration: underline; }

.msg-edit-form { width: min(420px, 100%); margin-top: var(--space-1); }

.msg-edit-buttons { display: flex; gap: var(--space-2); margin-top: var(--space-2); justify-content: flex-end; }

.msg-edit-error { font-size: var(--text-sm); color: var(--color-danger, #b3402a); margin-top: var(--space-1); }

.msg-link {
  color: var(--color-forest);
  text-decoration: underline;
}

.msg-bubble-wrap.mine .msg-link {
  color: var(--color-cream);
}

/* Reply / compose box */
.msg-reply {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5);
  flex-shrink: 0;
}

.msg-reply-form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.msg-reply-textarea {
  flex: 1;
  resize: none;
  min-height: 60px;
  max-height: 160px;
}

.msg-closed-notice {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-3);
  font-style: italic;
}

/* Empty / no thread selected */
.msg-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
}

.msg-empty-icon {
  width: 56px;
  height: 56px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
}

/* Compose modal form */
.msg-compose-to {
  position: relative;
}

.msg-compose-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: 50;
  max-height: 180px;
  overflow-y: auto;
}

.msg-compose-suggestion {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.msg-compose-suggestion:hover {
  background: var(--surface-page);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero {
    padding-block: var(--space-4) var(--space-7);
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  

  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-legal {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: var(--text-lg);
  }

  /* Slight crop on phones so the animals stay readable */
  .hero-art {
    width: 125%;
    max-width: none;
  }

  .hero-content {
    margin-top: calc(var(--space-2) * -1);
  }

  .hero-eyebrow-line {
    display: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  

  
}

/* ── HAMBURGER / MOBILE NAV ─────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  margin-left: auto;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, .85);
  border-radius: 2px;
  transition: transform .2s, opacity .2s;
}

.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 720px) {

  /* Force detail page columns to stack */
  .sp-two-col {
    grid-template-columns: 1fr;
  }

  :root {
    --container-pad: var(--space-4);
  }

  /* Stack the layout and stretch children to fill screen width */
  .species-layout {
    flex-direction: column;
    align-items: stretch;
  }

  /* Make sidebar full width and un-stick it */
  .species-sidebar {
    width: 100%;
    position: relative;
    top: 0;
  }

  /* Force cards into a single column */
  .species-grid {
    grid-template-columns: 1fr;
  }

  .nav-hamburger {
    display: flex;
  }

  .nav-mobile-menu {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: var(--surface-page);
    flex-direction: column;
    padding: var(--space-3) var(--space-4) var(--space-4);
    z-index: var(--z-popover);
    border-top: 2px solid var(--color-forest);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    gap: 0;
  }

  .nav-mobile-menu.is-open {
    display: flex;
  }

  .nav-links {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: none;
    padding: 0;
    gap: 0;
  }

  .nav-right {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: none;
    padding: 0;
    gap: 0;
    margin-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
  }

  .nav-inner {
    position: relative;
    flex-wrap: nowrap;
  }

  .nav-item {
    width: 100%;
    text-align: left;
    color: var(--color-text);
    padding: var(--space-3) var(--space-2);
  }

  .nav-item:hover,
  .nav-item.is-active {
    background: var(--tint-forest);
    color: var(--color-forest);
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0 0 var(--space-2) var(--space-3);
  }

  .nav-dropdown>.nav-item {
    pointer-events: none;
    font-weight: var(--weight-bold);
    background: var(--tint-forest);
    color: var(--color-forest);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
  }

  .nav-dropdown>.nav-item .nav-chevron {
    display: none;
  }

  .nav-dropdown-menu a,
  .nav-dropdown-menu-btn {
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a.is-active,
  .nav-dropdown-menu-btn:hover,
  .nav-dropdown-menu-btn.is-active {
    background: var(--tint-forest);
    color: var(--color-forest);
    font-weight: var(--weight-bold);
  }

  .nav-right .btn {
    width: 100%;
    text-align: center;
    margin-top: var(--space-2);
  }

  /* Messages: stack sidebar above thread on mobile */
  .msg-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: 0;
  }

  .msg-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    max-height: 240px;
  }

  .msg-thread {
    min-height: 60vh;
  }
}

.custom-option {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.custom-option:hover {
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

/* Colors sidebar accordion */
.color-acc {
  background: transparent;
  border: 0;
}
.color-acc-item:not(.is-open) > .color-acc-body { display: none; }
.color-acc .color-acc-body {
  margin-top: 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-3);
  border-top: 0;
}
.color-acc .color-acc-item.is-open:not(:last-child) > .color-acc-body { border-bottom: var(--border-width) solid var(--color-border); }

/* Container for the button so it sits above the layout cleanly */
.filter-toggle-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Community & Marketplace Styles
   ========================================================================== */

/* Keeper Registry Grid & Cards */

/* Marketplace Trade Board */

/* Species picker dropdown */
.mp-sp-picker {
  position: relative;
}
.mp-sp-list {
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
}
.mp-sp-list li button {
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.mp-sp-list li button:hover,
.mp-sp-list li button:focus {
  background: var(--color-border);
  outline: none;
}
.mp-price-input-wrap {
  margin-top: var(--space-3);
  max-width: 200px;
}

#mp-new-animal-row[hidden],
#mp-new-price-wrap[hidden] {
  display: none;
}

/* marketplace cards reuse .species-card — only overrides needed */
.marketplace-card { cursor: default; }
.marketplace-card .species-card-header { justify-content: space-between; }
.mp-card-species-thumb { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center; flex-shrink: 0; border: 2px solid rgba(255,255,255,.25); }
.mp-card-body { padding: var(--space-4); background: var(--surface-card); display: flex; flex-direction: column; gap: var(--space-2); }
.mp-card-desc { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-loose); }
.mp-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border-card); }
.mp-by-avatar {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  font-size: 10px;
  font-weight: var(--weight-bold);
}
.mp-time-left { font-weight: var(--weight-bold); }
.mp-time-left--soon { color: var(--color-danger, #b3402a); }
.mp-card-actions-row { display: flex; gap: var(--space-2); flex-shrink: 0; }
.mp-card--closed { opacity: 0.6; }

.marketplace-card-actions {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

@media (min-width: 768px) {
  .marketplace-card-actions {
    width: auto;
  }
}

/* ════════════════════════════════════════════════════════════
   MARKETPLACE — TRADE BOARD LAYOUT & UTILITIES
   ════════════════════════════════════════════════════════════ */

.mp-keeper-link {
  color: var(--color-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-keeper-link:hover {
  color: var(--color-forest-mid);
}

/* Toast */
.mp-toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}

.mp-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mp-toast--success {
  background: var(--color-forest);
}

.mp-toast--error {
  background: var(--color-danger);
}

.mp-toast--warning {
  background: var(--color-warning);
  color: var(--color-dark);
}

/* Create form options */
.mp-type-option {
  cursor: pointer;
}

.mp-type-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mp-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--surface-page);
  transition: all var(--transition-fast);
}

.mp-type-option:hover .mp-type-badge,
.mp-type-option--active .mp-type-badge {
  border-color: var(--color-forest);
  color: var(--color-forest);
  background: var(--tint-forest);
}

.mp-price-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

@media (max-width: 600px) {
  .mp-board-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   AVATAR SETTINGS
   ════════════════════════════════════════════════════════════ */
.avatar-settings-wrap {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  margin-top: var(--space-4);
}

.avatar-preview-col {
  flex-shrink: 0;
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-preview-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-border);
  display: block;
}

.avatar-preview-placeholder {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

@media (max-width: 500px) {
  .avatar-settings-wrap {
    flex-direction: column;
    align-items: center;
  }

  .avatar-form-col {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════
   ADMIN GALLERY / AVATARS GRID
   ════════════════════════════════════════════════════════════ */
.admin-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-5);
}

.admin-gallery-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  padding: 0;
}

.admin-gallery-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-border);
}

.admin-gallery-meta {
  padding: 0 var(--space-4);
  flex: 1;
}

.admin-gallery-species {
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}

.admin-gallery-info {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.admin-gallery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}

/* ════════════════════════════════════════════════════════════
   CARD EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.card--empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
}

/* Keeper registry — avatar images should show top (face) not bottom */
.species-card-photo img.keeper-avatar {
  object-position: top center;
}

/* ════════════════════════════════════════════════════════════
   HABITAT BUILDER
   ════════════════════════════════════════════════════════════ */

/* ── Habitat builder ── */
.hb {
  display: grid;
  grid-template-columns: minmax(380px, 540px) 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-6) 0 var(--space-9);
}
.hb-form { position: static; }
.hb-main { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.hb-cols { display: grid; grid-template-columns: 1fr; gap: 0; }
.hb-cols--terrain { grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
.hb-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border-card);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.hb-field .form-input, .hb-field .form-select { width: 96px; padding: 4px 8px; text-align: right; }
.hb-field .form-select { text-align: left; }
.hb-field--sub label { padding-left: var(--space-4); }
.hb-sub {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-forest);
  margin: var(--space-4) 0 var(--space-2);
}
.hb-cols--terrain .hb-block { margin-bottom: var(--space-3); }
.hb-chipset { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-2); }
.hb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.hb-add { margin-bottom: var(--space-3); }

.habitat-result-row {
  background: var(--surface-card);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.hb-row-end { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.hb-thumb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center bottom;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}
.habitat-result-name { display: block; font-weight: var(--weight-bold); color: var(--color-forest); text-decoration: none; }
.habitat-result-name:hover { text-decoration: underline; }
.habitat-result-latin { display: block; font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.habitat-result-score {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  min-width: 54px;
  text-align: right;
}
.hb-inline { font-size: var(--text-md); margin-left: var(--space-2); }
.hb-noscore { color: var(--color-text-light); }
.score--high { color: var(--color-stat-green); }
.score--mid  { color: var(--color-stat-amber); }
.score--low  { color: var(--color-stat-red); }

.hb-n { width: 64px; padding: 4px 8px; }

.hb-details { margin-top: var(--space-2); }
.hb-details > summary { cursor: pointer; color: var(--color-text-muted); font-size: var(--text-sm); user-select: none; }
.hb-checks { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }

.habitat-check-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}
.habitat-check-row--ok   { background: var(--status-success-bg); color: var(--color-stat-green); }
.habitat-check-row--warn { background: var(--status-warning-bg); color: var(--color-stat-amber); }
.habitat-check-row--fail { background: var(--status-danger-bg); color: var(--color-stat-red); }
.habitat-check-row--note { background: var(--surface-subtle, rgba(0,0,0,.04)); color: var(--color-text-muted); }
.hb-flag { font-size: var(--text-sm); color: var(--color-stat-amber); cursor: help; }
.hb-flag { margin-left: var(--space-4); }
.hb-pin { font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.hb-pin:hover { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-text-on-dark); }
.habitat-check-label { font-weight: var(--weight-bold); flex-shrink: 0; min-width: 110px; }
.habitat-check-detail { opacity: .85; }

.hb-needs { margin-bottom: var(--space-2); }
.hb-why { color: var(--color-text-light); font-size: var(--text-sm); margin-left: var(--space-2); }
.hb-notes { margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); }
.hb-alert {
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-line);
  border-radius: var(--radius-md);
  color: var(--color-stat-red);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}
.hb-alert strong { display: block; font-size: var(--text-md); margin-bottom: 2px; }
.hb-disclaimer { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.hb-cols--terrain .hb-field .form-input { width: 72px; }

@media (max-width: 900px) {
  .hb { grid-template-columns: 1fr; }
  .hb-form { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 600px) {
  .hb-cols--terrain { grid-template-columns: 1fr; }
  .habitat-check-label { min-width: 90px; }
  .hb-row-top { flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   SPECIES DATA EXTRAS  (spx-*)
   Chips, terrain bars, release groups, fun facts, filters,
   admin form helpers
   ════════════════════════════════════════════════════════════ */

/* chip rows stack label over chips so long lists wrap cleanly */
.sp-stat-row--chips {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.sp-stat-row--chips .sp-stat-value {
  text-align: left;
}

.spx-mt { margin-top: var(--space-4); }

/* ── Terrain bars ── */
.spx-terrain {
  display: grid;
  gap: var(--space-3);
}

.spx-terrain-row {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr minmax(60px, auto);
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.spx-terrain-label { color: var(--color-text-muted); }

.spx-terrain-val { text-align: right; white-space: nowrap; font-weight: var(--weight-normal, 400); }

.spx-group-notes {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-base);
}

/* ── Zoopedia toolbar + filter extras ── */
.species-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.species-count strong { color: var(--color-text); font-size: var(--text-md); }

.species-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.species-sort .form-select { width: auto; min-width: 190px; }

.filter-sublabel {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.filter-sublabel:first-child { margin-top: 0; }
.filter-heading {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) 0 var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}
.filter-heading:first-child { margin-top: 0; }
/* Listing card footer: who and when on top, then the price on the left and the actions on the right */
.mp-card-footer { flex-direction: column; align-items: stretch; gap: var(--space-3); border-top: none; padding-top: 0; }
.mp-card-actions-row { width: 100%; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.mp-card-actions-row .mp-card-price-tag-muted { margin-right: auto; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.mp-card-actions-row .mp-card-price--open { font-weight: var(--weight-normal, 400); color: var(--color-text-light); }
/* a long description in one card must not stretch its neighbours */
#mp-board-grid, #mp-mine-grid { align-items: start; }
/* Habitat builder: selects and counts in the same quiet type */
.hb-add .form-select, .hb-n, .hb-field .form-select, .hb-field .form-input { font-size: var(--text-sm); color: var(--color-text-muted); }
.hb-field .form-select:not(:focus) { border-color: var(--color-border); }

/* No rule lines between filters: spacing and the dialed-down headings do the grouping */
.species-sidebar .filter-accordion { border-bottom: none; margin-bottom: 0; padding: var(--space-2) 0; }
.filter-sublabel[hidden] { display: none; }

.filter-count {
  margin-left: auto;
  margin-right: var(--space-2);
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-align: center;
  line-height: 1.6;
}

.filter-accordion.has-active > .filter-accordion-toggle { font-weight: var(--weight-bold); }

/* ── Admin: species form ── */
.spx-jump {
  position: sticky;
  top: var(--nav-height);
  z-index: 5;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  background: var(--surface-page);
  border-bottom: 1px solid var(--color-border);
}

.spx-jump a {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background: var(--surface-card);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.spx-jump a:hover { color: var(--color-forest); border-color: var(--color-gold); }

.card[id^="sec-"], [id="sec-groups"] { scroll-margin-top: calc(var(--nav-height) + 64px); }

.spx-sublabel {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.spx-group {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--surface-card);
}

.spx-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.spx-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3) var(--space-4);
}

.spx-group-grid .form-group { margin: 0; }
.spx-group-grid .spx-wide { grid-column: 1 / -1; }

.spx-compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2) var(--space-4);
  max-height: 360px;
  overflow-y: auto;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.spx-compat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.spx-compat-item[hidden] { display: none; }

@media (max-width: 600px) {
  .spx-terrain-row { grid-template-columns: 80px 1fr minmax(52px, auto); }
  .species-sort .form-select { min-width: 0; }
}

/* ── Admin Terrain Repeater ── */
.spx-terrain-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.spx-terrain-row-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* ════════════════════════════════════════════════════════════
   UTILITIES & SMALL COMPONENTS
   Replace former inline styles. Add new one-off styles here as classes, not style="".
   ════════════════════════════════════════════════════════════ */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mt-2 { margin-top: var(--space-2); }
.flex-wrap { flex-wrap: wrap; }
.self-end { align-self: flex-end; }
.is-hidden { display: none; }
.inline-form { display: inline; }
.max-w-320 { max-width: 320px; }

/* Section / layout variants */
.species-section--compact {
  min-height: 0;
  padding-block: var(--space-6) var(--space-9);
}

.species-section--form {
  min-height: 0;
  padding-block: var(--space-7);
}

.container--flush { padding: 0; }
.card--spacious { padding: var(--space-10) var(--space-6); }
.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

/* Forms */
.form-select-sm {
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  height: auto;
}

.form-group--grow-2 { flex: 2; min-width: 150px; }
.form-group--grow-1 { flex: 1; min-width: 85px; }
.filter-group--spaced { margin-bottom: var(--space-3); padding-bottom: var(--space-3); }

/* Colors sidebar (selected-species state) */
.color-sidebar-tree--flat {
  background: transparent;
  padding: var(--space-3) 0 0;
  margin-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.color-sidebar-species--root {
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
}

/* Avatars */
.avatar-thumb {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.avatar-thumb--40 { width: 40px; height: 40px; }
.avatar-thumb--28 { width: 28px; height: 28px; vertical-align: middle; margin-left: var(--space-1); }
/* Cards / meta */
.animal-card-owner {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* IUCN badge colours; text is white or dark, whichever contrasts (4.5:1 or better) */
.iucn-badge { background: var(--iucn-dd); }
.iucn-lc { background: var(--iucn-lc); }
.iucn-nt { background: var(--iucn-nt); }
.iucn-vu { background: var(--iucn-vu); }
.iucn-en { background: var(--iucn-en); }
.iucn-cr { background: var(--iucn-cr); }
.iucn-ew { background: var(--iucn-ew); }
.iucn-ex { background: var(--iucn-ex); }
.iucn-dd { background: var(--iucn-dd); }
.iucn-ne { background: var(--iucn-ne); }
.iucn-dom { background: var(--iucn-dom); }

/* Gender symbols */
.gender-male { color: var(--gender-male); }
.gender-female { color: var(--gender-female); }

/* Marketplace type picker accents (Sell = gold, Buy = info) */
.mp-type-option--active .mp-type-badge--wts,
.mp-type-option:hover .mp-type-badge--wts {
  border-color: var(--medal-bronze);
  color: var(--color-text-gold);
}

.mp-type-option--active .mp-type-badge--wtb,
.mp-type-option:hover .mp-type-badge--wtb {
  border-color: var(--status-info-strong);
  color: var(--status-info-strong);
}

/* ── Species page: hero, sticky menu, two-column layout ── */
.sp-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  aspect-ratio: 21 / 8;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-forest);
  color: var(--color-text-on-dark);
}

.sp-hero--empty { aspect-ratio: auto; min-height: 160px; }

.sp-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0) 55%);
}

.sp-hero-text { position: relative; z-index: 1; padding: var(--space-5) var(--space-6); }
.sp-hero-name { margin: 0; color: inherit; font-size: var(--text-hero); line-height: 1.1; }
.sp-hero-latin { margin: 0 0 -4px; line-height: 1.2; font-style: italic; opacity: .9; }

.sp-hero .sp-iucn-overlay { z-index: 1; top: var(--space-4); right: var(--space-4); }

/* taxonomy: small quiet pills under the latin name */
.sp-hero-taxa { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.sp-hero-taxa a { text-decoration: none; transition: background .15s; }
.sp-hero-taxa a:hover { background: rgba(20, 20, 16, .85); }
.sp-hero-taxa span,
.sp-hero-taxa a {
  font-size: var(--text-sm); line-height: 1; padding: 5px 10px; border-radius: 999px;
  color: var(--color-text-on-dark); background: rgba(20, 20, 16, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.sp-jump {
  position: sticky;
  top: var(--nav-height);
  z-index: 20;
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-5);
  background: var(--surface-page);
  border-bottom: var(--border-width) solid var(--color-border);
}

.sp-jump a {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: var(--border-width) solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
}

.sp-jump a:hover { color: var(--color-forest); border-color: var(--color-gold); }
.sp-jump a.is-active { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-text-on-dark); }
.sp-jump a[hidden] { display: none; }

/* phones: no sticky bar, so let the tabs wrap instead of scrolling sideways */
.sp-jump { scrollbar-width: none; }
.sp-jump::-webkit-scrollbar { display: none; }
@media (max-width: 720px) {
  .sp-jump { position: static; flex-wrap: wrap; overflow-x: visible; }
}

/* one text size for the whole species page; headings and titles set their own */
.sp-main { font-size: var(--text-sm); }
.sp-main [id] { scroll-margin-top: calc(var(--nav-height) + 72px); }

/* Species page, Zoopedia style: two columns of small cards, tab cards, collapsible groups */
.zp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}

.zp-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.zp-col:empty { display: none; }
/* the last card in each column grows so both columns end on the same line */
.zp-col > :last-child { flex: 1 1 auto; }

.sp-section > .zp-identity { margin-bottom: var(--space-4); }

.zp-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }

.zp-card-title { margin: 0 0 var(--space-3); font-size: var(--text-md); color: var(--color-forest); }

.zp-mini-title {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.zp-mini-title--first { margin-top: 0; }

/* terrain sub category: one sentence under its parent's bar */
.spx-terrain-row--sub .spx-terrain-label { padding-left: var(--space-4); }

.zp-chip-row + .zp-chip-row { margin-top: var(--space-3); }
/* full-width info card: one row per group, labels in an aligned column */
.zp-identity--wide { margin-bottom: var(--space-5); }
.zp-identity--wide .zp-chip-row .zp-mini-title { min-width: 6.5em; }
.zp-chip-row .zp-mini-title { margin: 0 var(--space-2) 0 0; }
.zp-chip-text { font-size: var(--text-sm); }

.zp-unlock { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-gold); }
.zp-unlock:last-child { margin-bottom: 0; }

.zp-facts { margin: 0; font-size: var(--text-sm); line-height: 1.7; padding-left: var(--space-5); list-style: upper-roman; display: flex; flex-direction: column; gap: var(--space-3); }

.zp-blurb { margin-top: var(--space-3); }

.zp-step-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: var(--border-width) solid var(--color-border);
  background: var(--surface-raised);
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  color: var(--color-forest);
}

.zp-step-btn:hover { border-color: var(--color-gold); }

.zp-step-unit { color: var(--color-text-muted); }

.zp-step-input {
  width: 56px;
  padding: 2px 8px;
  text-align: center;
}

.zp-group { border-top: var(--border-width) solid var(--color-border-card); padding: var(--space-3) 0; }
.zp-group:first-of-type { border-top: 0; padding-top: 0; }
.zp-group-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-forest); }
.zp-group-body { margin-top: var(--space-3); }

.zp-tile {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--color-border-card);
  border-radius: var(--radius-md);
}

.zp-tile strong { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text); }
.zp-tile small { font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text-muted); }

.sp-section > .zp-release-reqs { margin-bottom: var(--space-4); }
.sp-stat-row + .zp-tiles { margin-top: var(--space-3); }
.zp-stat-group + .zp-stat-group { margin-top: var(--space-4); }

.zp-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }

.zp-list.zp-enrich { padding-left: 0; list-style: none; flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.zp-enrich li { display: inline-flex; align-items: center; gap: var(--space-2); }
.zp-enrich-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3) 3px 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--color-text);
  text-decoration: none;
}
.zp-enrich-link:hover { border-color: var(--color-forest); color: var(--color-forest); }
.zp-enrich-icon { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--surface-page); flex-shrink: 0; }

.zp-rel-head h3 { margin: 0; margin-right: auto; }
.zp-rel-count { font-weight: var(--weight-medium); color: var(--color-text-muted); }

.zp-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-forest);
  color: var(--color-text-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: help;
}

.zp-info::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-dark);
  color: var(--color-text-on-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}

.zp-info:hover::after,
.zp-info:focus::after { opacity: 1; }

.zp-empty { margin: 0; padding: var(--space-5) 0; text-align: center; color: var(--color-text-light); font-weight: var(--weight-medium); }

.zp-rel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); align-items: start; }
.zp-rel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-4) var(--space-2); }

.zp-rel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  line-height: 1.25;
  text-align: center;
}
.zp-rel-item .zp-avatar { width: 64px; height: 64px; }
.zp-rel-item:hover { color: var(--color-forest); }
.zp-rel-item:hover .zp-avatar { box-shadow: 0 0 0 2px var(--color-gold); }

.zp-avatar {
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-sunken);
}
.zp-avatar--empty { display: inline-flex; align-items: center; justify-content: center; font-weight: var(--weight-medium); color: var(--color-text-muted); }

.zp-map img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

@media (max-width: 960px) {
  .zp-cols { grid-template-columns: minmax(0, 1fr); }
}
/* About card: one tabbed panel instead of stacked prose */
.sp-tab-panel.is-hidden { display: none; }
/* Thriving, incompatibilities and research (species page + admin repeaters) */
.spx-repeat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.js-req-target[hidden] { display: none; }

.spx-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }

.spx-checklist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border: var(--border-width) solid var(--color-border-card);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
}

.spx-checklist-label { font-weight: var(--weight-medium); }
a.spx-checklist-label { color: var(--color-forest); text-decoration: underline; text-underline-offset: 2px; }
/* JS hook classes with no styling of their own:
   filter-reset, mp-close-btn, mp-respond-btn, lookup-item, ui-dropdown-menu, modal-panel,
   audit-list, audit-entry, report-message,
   nav-user, sp-stat-block, spx-group-card */
.hb-temp { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.hb-temp .form-input { width: 5rem; }
.hb-temp .form-select { width: auto; min-width: 4.5rem; }
.hb-field #hb-dunit { width: auto; min-width: 9rem; }
.rel-reserves-continent { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-normal); color: var(--color-text); }
.rel-reserves-continent:first-child { margin-top: 0; }
.iucn-lc, .iucn-cr, .iucn-ew, .iucn-ex { color: var(--color-white); }