/* 地球物种地图 · 物种卡片样式（右侧滑入）
   维护：会话 C（界面交互）；依赖：无（不改 css/style.css，冲突只在本文件提高选择器特异性）
   结构：#card-root.card-root > aside.geo-card（内含 关闭按钮 / 图片 / 正文 / 来源）
   桌面：右侧 360px、深色半透明、圆角 12px、从右侧滑入；底部让开时间轴，不挡拖动地球 */

#card-root.card-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

#card-root.card-root .geo-card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  width: 360px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: rgba(12, 18, 28, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
  color: #e8eef6;
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
  /* 2026-11-11：原图页签要挂到卡片左侧外面，所以卡片本身不能裁切（圆角改由图片自己裁） */
  overflow: visible;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0.28s;
}

#card-root.card-root .geo-card.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0s linear 0s;
}

/* 关闭按钮 */
#card-root.card-root .geo-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #e8eef6;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease;
}

#card-root.card-root .geo-card__close:hover {
  background: rgba(255, 255, 255, 0.16);
}

#card-root.card-root .geo-card__close:focus-visible {
  outline: 2px solid #4fd1c5;
  outline-offset: 2px;
}

/* 顶部物种页签：像浏览器标签页，只在同一点打开多个物种时出现；按用户要求不带 × */
#card-root.card-root .geo-card__tabs {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 32px;
  padding: 6px 38px 0 6px;   /* 右边给右上角关闭按钮让位 */
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(0, 0, 0, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  scrollbar-width: none;
  touch-action: pan-x;
}

#card-root.card-root .geo-card__tabs::-webkit-scrollbar {
  display: none;
}

#card-root.card-root .geo-card__tabs.is-empty {
  display: none;
}

#card-root.card-root .geo-card__tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  max-width: 150px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 238, 246, 0.62);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#card-root.card-root .geo-card__tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(232, 238, 246, 0.85);
}

#card-root.card-root .geo-card__tab.is-active {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  box-shadow: inset 0 2px 0 #4fd1c5;
}

#card-root.card-root .geo-card__tab-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 图片区 */
#card-root.card-root .geo-card__media {
  position: relative;
  flex: 0 0 auto;
  /* v1.1.0 手测修正：不再写死 220px，按卡片宽算高（桌面 360：240px），与 3:2 图集同比 */
  aspect-ratio: 3 / 2;
  height: auto;
  background: #0a1119;
  /* 同卡片：不裁切，页签才能挪到图片左侧外面 */
  overflow: visible;
  border-top-left-radius: 12px;
}

#card-root.card-root .geo-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 图片自己裁左上圆角（卡片/图片区都改成 overflow: visible 了） */
  border-top-left-radius: 12px;
}

/* 原图版（图片区 data-mode="original"）：原图比例不固定，contain 保证整张可见、不裁切 */
#card-root.card-root .geo-card__media[data-mode="original"] .geo-card__img {
  object-fit: contain;
}

#card-root.card-root .geo-card__media.is-empty .geo-card__img,
#card-root.card-root .geo-card__media.is-error .geo-card__img {
  display: none;
}

#card-root.card-root .geo-card__media.is-empty::after,
#card-root.card-root .geo-card__media.is-error::after {
  content: "暂无图片";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(232, 238, 246, 0.4);
  font-size: 12px;
}

#card-root.card-root .geo-card__media.is-error::after {
  content: "图片加载失败";
}

/* 正文 */
#card-root.card-root .geo-card__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 18px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#card-root.card-root .geo-card__name {
  margin: 0 26px 4px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

#card-root.card-root .geo-card__sci {
  margin: 0 0 12px;
  color: rgba(232, 238, 246, 0.62);
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  word-break: break-word;
}

#card-root.card-root .geo-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

#card-root.card-root .geo-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(232, 238, 246, 0.88);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

#card-root.card-root .geo-card__period {
  background: rgba(79, 209, 197, 0.16);
  color: #9ff0e7;
}

#card-root.card-root .geo-card__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

#card-root.card-root .geo-card__fact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#card-root.card-root .geo-card__fact dt {
  color: rgba(232, 238, 246, 0.5);
  font-size: 11px;
  letter-spacing: 0.04em;
}

#card-root.card-root .geo-card__fact dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

#card-root.card-root .geo-card__blurb {
  margin: 0;
  color: rgba(232, 238, 246, 0.86);
  font-size: 14px;
  line-height: 1.75;
}

/* 来源 */
#card-root.card-root .geo-card__credit {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(232, 238, 246, 0.5);
  font-size: 11px;
  line-height: 1.5;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  #card-root.card-root .geo-card {
    transition: none;
  }
}

/* 手机（宽 ≤768px）：卡片改成底部抽屉（高 55vh，从下往上滑出），字号整体缩小
   底部让开时间轴（手机 56px + 安全区），抽屉上圆角、上边框 */
@media (max-width: 768px) {
  #card-root.card-root .geo-card {
    top: auto;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: 55vh;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
    transform: translateY(105%);
  }

  #card-root.card-root .geo-card.is-open {
    transform: translateY(0);
  }

  #card-root.card-root .geo-card__body {
    padding: 12px 14px 14px;
  }

  #card-root.card-root .geo-card__tabs {
    height: 30px;
    padding: 5px 38px 0 5px;
  }

  #card-root.card-root .geo-card__tab {
    height: 24px;
    font-size: 11px;
  }

  /* 图片区高度由 aspect-ratio: 3 / 2 决定，手机也不再写死 140px（勿再加 height） */

  #card-root.card-root .geo-card__name {
    font-size: 18px;
    margin-right: 30px;
  }

  #card-root.card-root .geo-card__sci {
    font-size: 11px;
    margin-bottom: 10px;
  }

  #card-root.card-root .geo-card__chip {
    padding: 2px 8px;
    font-size: 11px;
  }

  #card-root.card-root .geo-card__facts {
    gap: 8px;
    padding: 10px;
    margin-bottom: 10px;
  }

  #card-root.card-root .geo-card__fact dd {
    font-size: 13px;
  }

  #card-root.card-root .geo-card__blurb {
    font-size: 13px;
    line-height: 1.65;
  }

  #card-root.card-root .geo-card__credit {
    padding: 8px 14px;
    font-size: 10px;
  }
}
/* ===== v1.1.0：归属地 chips + 底部数据来源（会话 C） ===== */
#card-root.card-root .geo-card__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* meta 那行本身有 14px 下边距，这里往上收一点，两行 chips 才不显得散 */
  margin: -6px 0 14px;
}

#card-root.card-root .geo-card__regions[hidden] {
  display: none;
}

#card-root.card-root .geo-card__region {
  color: rgba(232, 238, 246, 0.78);
}

/* 「+N」是 button：借用 chip 的胶囊外形，去掉浏览器默认边框 */
#card-root.card-root button.geo-card__chip {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#card-root.card-root .geo-card__region-more {
  border: 1px dashed rgba(79, 209, 197, 0.5);
  background: rgba(79, 209, 197, 0.1);
  color: #9ff0e7;
}

#card-root.card-root .geo-card__region-more:hover {
  background: rgba(79, 209, 197, 0.2);
}

#card-root.card-root .geo-card__region-more:focus-visible {
  outline: 2px solid #4fd1c5;
  outline-offset: 2px;
}

/* 底部两行：数据来源 / 图片授权 */
#card-root.card-root .geo-card__credit p {
  margin: 0;
}

#card-root.card-root .geo-card__credit p + p {
  margin-top: 2px;
}

#card-root.card-root .geo-card__source {
  color: rgba(232, 238, 246, 0.62);
}

#card-root.card-root .geo-card__img-credit {
  color: rgba(232, 238, 246, 0.4);
}

#card-root.card-root .geo-card__img-credit[hidden] {
  display: none;
}

@media (max-width: 768px) {
  #card-root.card-root .geo-card__regions {
    gap: 5px;
    margin-bottom: 10px;
  }
}
/* ===== v1.1.0 第 6 步：同纪其他物种（卡片正文底部横滑药丸，纯文字） ===== */
#card-root.card-root .geo-card__related {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

#card-root.card-root .geo-card__related[hidden] {
  display: none;
}

#card-root.card-root .geo-card__related-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(232, 238, 246, 0.45);
}

#card-root.card-root .geo-card__related-list {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  -webkit-overflow-scrolling: touch;
  /* 横向滑推荐；纵向仍能滚卡片正文（pan-x 会连父级纵向滚动一起禁掉） */
  touch-action: pan-x pan-y;
}

#card-root.card-root .geo-card__related-list::-webkit-scrollbar {
  height: 5px;
}

#card-root.card-root .geo-card__related-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

#card-root.card-root .geo-card__related-item {
  flex: 0 0 auto;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 238, 246, 0.82);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  padding: 6px 11px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.14s ease, color 0.14s ease;
}

#card-root.card-root .geo-card__related-item:hover {
  background: rgba(255, 255, 255, 0.11);
  color: #e8eef6;
}

#card-root.card-root .geo-card__related-item:focus-visible {
  outline: 2px solid #4fd1c5;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  #card-root.card-root .geo-card__related {
    margin-top: 12px;
    padding-top: 10px;
  }

  #card-root.card-root .geo-card__related-title {
    font-size: 10px;
    margin-bottom: 6px;
  }

  #card-root.card-root .geo-card__related-item {
    font-size: 11px;
    padding: 5px 9px;
  }
}
/* ===== v1.1.0 第 7 步：卡片图片区左侧竖排原图页签（只有 15 条有 original 的物种才显示） ===== */
#card-root.card-root .geo-card__origins {
  position: absolute;
  /* 2026-11-11 用户要求：页签挪到卡片左侧「外面」，不再压在动物图上（手机仍留在内侧，见 768px 媒体查询） */
  left: -46px;
  top: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#card-root.card-root .geo-card__origins[hidden] {
  display: none;
}

#card-root.card-root .geo-card__origin {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 8, 14, 0.5);
  color: rgba(232, 238, 246, 0.8);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 1.5px;
  padding: 7px 5px;
  /* 竖排文字：像挂在图片左边缘的小书签，尽量少挡画面 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

#card-root.card-root .geo-card__origin:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #e8eef6;
}

#card-root.card-root .geo-card__origin.is-active {
  background: rgba(79, 209, 197, 0.22);
  border-color: rgba(79, 209, 197, 0.55);
  color: #9ff0e7;
}

#card-root.card-root .geo-card__origin:focus-visible {
  outline: 2px solid #4fd1c5;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  #card-root.card-root .geo-card__origins {
    left: 6px;
    top: 6px;
    gap: 5px;
  }

  #card-root.card-root .geo-card__origin {
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 5px 4px;
    border-radius: 7px;
  }
}