/* 地球物种地图 · 底部时间轴样式
   维护：会话 C（界面交互）；依赖：无（不改 css/style.css；样式冲突只在本文件里靠选择器特异性解决）
   结构：#timeline-root.timeline > .timeline__track > .tl-cell × 12，最右端是 .tl-cell.tl-now
   手机：≤768px 时间轴横向滚动、字号缩小（媒体查询只写在本文件） */

#timeline-root.timeline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: stretch;
  /* 64px 是内容高度，iPhone 底部安全区额外加上去，免得格子被压扁 */
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(8, 12, 20, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#timeline-root.timeline .timeline__track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

#timeline-root.timeline .timeline__track::-webkit-scrollbar {
  height: 6px;
}

#timeline-root.timeline .timeline__track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
}

/* 12 个纪：等宽 */
#timeline-root.timeline .tl-cell {
  position: relative;
  flex: 1 1 0;
  min-width: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #c9d4e2;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

#timeline-root.timeline .tl-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#timeline-root.timeline .tl-range {
  font-size: 11px;
  letter-spacing: 0.03em;
  opacity: 0.72;
  white-space: nowrap;
}

@media (hover: hover) {
  #timeline-root.timeline .tl-cell:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

#timeline-root.timeline .tl-cell:active {
  background: rgba(255, 255, 255, 0.16);
}

#timeline-root.timeline .tl-cell:focus-visible {
  outline: 2px solid #4fd1c5;
  outline-offset: 2px;
}

/* 每格底部一道本色细线：时间轴一眼看出各纪颜色（与点位同一色板） */
#timeline-root.timeline .tl-cell::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--tl-color, #4fd1c5);
  opacity: 0.55;
  transition: opacity 0.18s ease;
}

/* 选中：用该纪的色板色铺底（文字颜色由 JS 按亮度算好，黄/青这类亮色自动用深字） */
#timeline-root.timeline .tl-cell.is-active {
  background: var(--tl-color, #4fd1c5);
  color: var(--tl-ink, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 4px 16px rgba(0, 0, 0, 0.35);
}

#timeline-root.timeline .tl-cell.is-active::after {
  opacity: 0;
}

/* "现在"：单独样式，固定在时间轴最右端 */
#timeline-root.timeline .tl-cell.tl-now {
  flex: 0 0 auto;
  min-width: 76px;
  margin: 8px 10px 8px 4px;
  border: 1px solid rgba(79, 209, 197, 0.55);
  border-radius: 10px;
  background: rgba(79, 209, 197, 0.12);
  color: #9ff0e7;
}

#timeline-root.timeline .tl-cell.tl-now.is-active {
  background: var(--tl-color, #2f6b8a);
  border-color: rgba(255, 255, 255, 0.32);
  color: #ffffff;
}

/* 数据加载失败时，直接在时间轴里显示原因（不用开控制台也能看到） */
#timeline-root.timeline .timeline__error {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 14px;
  color: #ff9a9a;
  font-size: 12px;
  line-height: 1.35;
}

/* 手机：时间轴横向滚动，字号缩小，卡片留出底部空间 */
@media (max-width: 768px) {
  #timeline-root.timeline {
    height: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  #timeline-root.timeline .timeline__track {
    gap: 4px;
    padding: 6px 8px;
  }

  #timeline-root.timeline .tl-cell {
    flex: 0 0 auto;
    min-width: 74px;
    padding: 4px 6px;
  }

  #timeline-root.timeline .tl-name {
    font-size: 12px;
  }

  #timeline-root.timeline .tl-range {
    font-size: 10px;
    opacity: 0.66;
  }

  #timeline-root.timeline .tl-cell.tl-now {
    min-width: 58px;
    margin: 6px 8px 6px 2px;
  }
}