[data-surface="species"] {
  --ka-surface-toolbar-mobile-gap: var(--ka-space-12);
}

/* Species Reference owns only its orientation composition.
   Shared controls, identity, specimen media, limitations, and button chrome
   are defined in ui/shared/*.css. */

.site-main {
  flex: 1;
  outline: none;
}

.loading-stage {
  padding: var(--ka-space-48) 0;
  text-align: center;
}

.specimen-media-loading {
  width: 100%;
  min-height: 180px;
}

.specimen-media-loading .ka-skeleton-block.is-media {
  width: 100%;
  min-height: 180px;
  border-radius: var(--ka-radius-sm);
}

@media (min-width: 1024px) {
  .specimen-media-loading,
  .specimen-media-loading .ka-skeleton-block.is-media {
    min-height: 220px;
  }
}

[data-surface="species"] .specimen-fallback-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}


.fallback-graphic-wrap {
  margin-bottom: var(--ka-space-12);
  color: var(--ka-color-ink-quiet);
  opacity: 0.65;
}

.fallback-bird-icon {
  display: block;
}

.fallback-title {
  margin-bottom: var(--ka-space-4);
  font-size: var(--ka-text-body);
  font-weight: 600;
  color: var(--ka-color-ink-secondary);
}

.fallback-subtext {
  max-width: 240px;
  font-size: var(--ka-text-data-label);
  line-height: 1.4;
  color: var(--ka-color-ink-quiet);
}

.species-identity-heading,
.species-identity-details {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.species-identity-heading {
  order: 1;
}

.specimen-plate .media-container {
  order: 2;
}

.species-identity-details {
  order: 3;
}

@media (min-width: 1024px) {
  .species-identity-heading {
    grid-column: 1 / span 9;
    grid-row: 1;
    order: initial;
  }

  .species-identity-details {
    grid-column: 1 / span 9;
    grid-row: 2;
    order: initial;
  }

  .specimen-plate .media-container {
    grid-column: 10 / -1;
    grid-row: 1 / span 2;
    order: initial;
    align-self: start;
  }
}

.annotation-split-card {
  margin-bottom: var(--ka-space-24);
  padding: var(--ka-space-16);
  border: 1px solid var(--ka-color-annotation-split-border, var(--ka-color-rule-subtle));
  border-radius: var(--ka-radius-sm);
  background: var(--ka-color-annotation-split-fill);
  color: var(--ka-color-annotation-split-ink);
}

/* Species is the orientation hub; specialist detail belongs to GIS,
   Sources & evidence, and Compare. */
.species-orientation {
  margin-bottom: var(--ka-space-32);
  padding: var(--ka-space-24);
}

.species-orientation-heading {
  max-width: 760px;
  margin-bottom: var(--ka-space-20);
}

.species-orientation-kicker {
  margin: 0 0 var(--ka-space-6);
  font-family: var(--ka-font-mono);
  font-size: var(--ka-text-data-label);
  font-weight: 700;
  letter-spacing: var(--ka-track-data-label);
  text-transform: uppercase;
  color: var(--ka-color-ink-quiet);
}

.species-orientation-heading h2 {
  margin: 0;
  font-family: var(--ka-font-latin-serif);
  font-size: var(--ka-text-section-title);
  line-height: var(--ka-line-section-title);
  color: var(--ka-color-ink-primary);
}

.species-orientation-heading p:last-child {
  margin: var(--ka-space-8) 0 0;
  line-height: var(--ka-line-body);
  color: var(--ka-color-ink-secondary);
}

.species-orientation-help-link {
  margin-left: var(--ka-space-6);
  color: var(--ka-color-link);
  font-weight: 650;
}

.species-orientation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ka-space-12);
}

.species-orientation-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 190px;
  padding: var(--ka-space-20);
  border: 1px solid var(--ka-color-rule-subtle);
  border-radius: var(--ka-radius-sm);
  background: var(--ka-color-paper-surface);
  color: var(--ka-color-ink-primary);
  text-decoration: none;
}

.species-orientation-card:hover {
  border-color: var(--ka-color-rule-strong);
  background: var(--ka-color-paper-sunken);
}

.species-question-word {
  font-family: var(--ka-font-mono);
  font-size: var(--ka-text-data-label);
  font-weight: 700;
  letter-spacing: var(--ka-track-data-label);
  text-transform: uppercase;
  color: var(--ka-color-ink-quiet);
}

.species-orientation-card strong {
  margin-top: var(--ka-space-8);
  font-family: var(--ka-font-latin-serif);
  font-size: 1.22rem;
  line-height: 1.2;
}

.species-orientation-card > span:not(.species-question-word):not(.species-orientation-action) {
  margin-top: var(--ka-space-8);
  font-size: var(--ka-text-annotation);
  line-height: 1.5;
  color: var(--ka-color-ink-secondary);
}

.species-orientation-action {
  margin-top: auto;
  padding-top: var(--ka-space-16);
  font-size: var(--ka-text-annotation);
  font-weight: 700;
  color: var(--ka-color-link);
}

.species-orientation-note {
  margin: var(--ka-space-16) 0 0;
  padding-top: var(--ka-space-16);
  border-top: 1px solid var(--ka-color-rule-hairline);
  font-size: var(--ka-text-annotation);
  line-height: 1.5;
  color: var(--ka-color-ink-secondary);
}

.species-region-discovery {
  margin-bottom: var(--ka-space-32);
  padding: var(--ka-space-24) 0;
  border-top: 1px solid var(--ka-color-rule-hairline);
  border-bottom: 1px solid var(--ka-color-rule-hairline);
}

.species-region-discovery-heading {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: var(--ka-space-24);
  align-items: start;
  margin-bottom: var(--ka-space-16);
}

.species-region-discovery-heading .species-orientation-kicker {
  grid-column: 1;
}

.species-region-discovery-heading h2,
.species-region-discovery-heading p:last-child {
  grid-column: 2;
}

.species-region-discovery-heading h2 {
  margin: 0;
  font-family: var(--ka-font-latin-serif);
  font-size: var(--ka-text-section-title);
  line-height: var(--ka-line-section-title);
}

.species-region-discovery-heading p:last-child {
  margin: var(--ka-space-6) 0 0;
  color: var(--ka-color-ink-secondary);
  line-height: var(--ka-line-body);
}

.species-region-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ka-space-8);
}

.species-region-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ka-space-6);
  min-height: 44px;
  padding: var(--ka-space-8) var(--ka-space-12);
  border: 1px solid var(--ka-color-rule-subtle);
  border-radius: var(--ka-radius-sm);
  background: var(--ka-color-paper-surface);
  color: var(--ka-color-link);
  font-weight: 700;
  text-decoration: none;
}

.species-region-chip:hover,
.species-region-chip:focus-visible {
  border-color: var(--ka-color-rule-strong);
  background: var(--ka-color-paper-sunken);
}

.species-region-chip small {
  color: var(--ka-color-ink-quiet);
  font-size: var(--ka-text-micro);
  font-weight: 500;
}

.species-region-all-link {
  display: inline-block;
  margin-top: var(--ka-space-16);
  color: var(--ka-color-link);
  font-weight: 700;
  text-underline-offset: 0.18em;
}

.species-region-empty {
  margin: 0;
  color: var(--ka-color-ink-secondary);
}

.site-footer {
  margin-top: auto;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ka-space-8);
}

@media (max-width: 768px) {
  .specimen-plate .specimen-photo {
    aspect-ratio: auto;
    max-height: min(52vh, 420px);
    object-fit: contain;
  }

  .specimen-plate .photo-caption {
    padding: var(--ka-space-6);
    font-size: 10px;
  }

  .specimen-plate .photo-expand-hint {
    display: none;
  }

  .species-orientation {
    padding: var(--ka-space-20);
  }

  .species-orientation-grid {
    grid-template-columns: 1fr;
  }

  .species-orientation-card {
    min-height: 0;
  }

  .species-region-discovery-heading {
    grid-template-columns: 1fr;
    gap: var(--ka-space-8);
  }

  .species-region-discovery-heading .species-orientation-kicker,
  .species-region-discovery-heading h2,
  .species-region-discovery-heading p:last-child {
    grid-column: 1;
  }
}