/* ============================================
   点灯蛙 统一答案卡样式 answer-card.css
   依赖：tokens.css（CSS 变量）/ components.css（.confidence-tag .freshness-badge .source-tier-tag）
   变量复用项目 :root 已定义的 --color-* 系列
   ============================================ */

/* === 主容器 === */
.answer-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* === 标题区 === */
.answer-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--space-xs);
}

.answer-card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.answer-card__header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* === 区块 === */
.answer-card__section {
  border-bottom: 1px solid var(--color-border-light);
}
.answer-card__section:last-of-type {
  border-bottom: none;
}

.answer-card__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  user-select: none;
  transition: color var(--transition-fast);
}
.answer-card__section-title:hover {
  color: var(--color-primary);
}

.answer-card__section-icon {
  margin-right: var(--space-sm);
}

.answer-card__section-toggle {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  transition: transform var(--transition-fast);
}
.answer-card__collapsed .answer-card__section-toggle {
  transform: rotate(-90deg);
}

.answer-card__content {
  padding: 0 0 var(--space-md) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
}
.answer-card__collapsed .answer-card__content {
  display: none;
}

/* === 字段行 === */
.answer-card__field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
}

.answer-card__field-label {
  flex-shrink: 0;
  width: 80px;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  padding-top: 2px;
}

.answer-card__field-value {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  word-break: break-word;
  min-width: 0;
}

.answer-card__field-confidence {
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 1px;
}

/* === 置信度标签位置补充（复用 components.css 的 .confidence-tag）=== */
.answer-card .confidence-tag {
  white-space: nowrap;
}

/* === 降级文案标记 === */
.answer-card__degraded {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* === 空值占位 === */
.answer-card__empty {
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-style: italic;
}

/* === 时间线 === */
.answer-card__timeline {
  position: relative;
  padding-left: var(--space-md);
}
.answer-card__timeline::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--color-border);
}

.answer-card__timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) 0 var(--space-sm) 0;
}
.answer-card__timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-md) + 1px);
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  z-index: 1;
}

.answer-card__timeline-date {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  min-width: 64px;
}

.answer-card__timeline-event {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  word-break: break-word;
}

/* === 升学路径 === */
.answer-card__path-combo {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-primary-bg);
  color: var(--color-primary-dark);
  font-weight: 500;
  font-size: var(--text-sm);
  margin-bottom: var(--space-sm);
}

.answer-card__path-item {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  margin-bottom: var(--space-sm);
}
.answer-card__path-item:last-child {
  margin-bottom: 0;
}

.answer-card__path-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.answer-card__path-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.answer-card__path-comp {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.answer-card__path-line {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.answer-card__path-risk {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: 2px;
}

.answer-card__path-assessment {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-border-light);
}

/* === 底部足注：鲜度 + 来源 === */
.answer-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  margin-top: var(--space-xs);
  border-top: 1px solid var(--color-border-light);
}

/* === 响应式：移动端 <768px === */
@media (max-width: 768px) {
  .answer-card {
    max-width: 100%;
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .answer-card__title {
    font-size: var(--text-lg);
  }

  /* 字段行改为纵向排列 */
  .answer-card__field {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .answer-card__field-label {
    width: auto;
  }

  .answer-card__field-confidence {
    align-self: flex-start;
  }

  .answer-card__timeline-date {
    min-width: 56px;
  }

  .answer-card__path-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
}