/* 十年之约履约进度卡片（配合 /js/tenyear-cert.js 使用，仅 /website 页出现） */

.tenyear-card {
  margin: 0 0 2rem;
  padding: 1.25rem 1.35rem;
  background: var(--anzhiyu-card-bg);
  border: var(--style-border);
  border-radius: var(--anzhiyu-radius);
  box-shadow: var(--anzhiyu-shadow-border);
}

.tenyear-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.tenyear-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--anzhiyu-fontcolor);
}

.tenyear-percent {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
  color: var(--anzhiyu-main);
  font-variant-numeric: tabular-nums;
}

.tenyear-bars {
  display: flex;
  gap: 8px;
  overflow: hidden;
}

.tenyear-year {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}

/* 轨道：固定高度，填充层按 --year-progress 撑高 */
.tenyear-year i {
  position: relative;
  display: block;
  height: 34px;
  overflow: hidden;
  border: 1px solid var(--anzhiyu-card-border);
  border-radius: 4px;
  background: var(--anzhiyu-secondbg);
}

.tenyear-year i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--year-progress, 0%);
  background: var(--anzhiyu-main);
  transition: height 0.6s var(--animation-in), background-color 0.3s ease;
}

.tenyear-year b {
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  color: var(--anzhiyu-secondtext);
  font-variant-numeric: tabular-nums;
}

/* 已过去的年份：填满 + 主题色刻度 */
.tenyear-year.is-full b {
  color: var(--anzhiyu-main);
}

/* 进行中的年份：橙色，与已填满的段落区分 */
.tenyear-year.is-active i::after {
  background: var(--anzhiyu-orange);
}

.tenyear-year.is-active i {
  border-color: var(--anzhiyu-orange);
}

.tenyear-year.is-active b {
  color: var(--anzhiyu-orange);
}

.tenyear-dates {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 12px;
  color: var(--anzhiyu-secondtext);
}

.tenyear-summary {
  margin-top: 0.35rem;
  font-size: 12px;
  color: var(--anzhiyu-secondtext);
}

.tenyear-cert-no {
  margin-top: 0.2rem;
  font-size: 12px;
  color: var(--anzhiyu-secondtext);
  opacity: 0.75;
}

/* 汇总行有值时才占位，避免无 JS 时留一行空行 */
.tenyear-summary:empty {
  display: none;
}

/* 官方证书入口 */
.tenyear-cert-link {
  display: block;
  max-width: 520px;
  margin: 1.1rem auto 0;
  overflow: hidden;
  border: var(--style-border);
  border-radius: var(--anzhiyu-radius);
  transition: border-color 0.3s ease;
}

.tenyear-cert-link:hover {
  border-color: var(--anzhiyu-main);
}

.tenyear-cert-link[hidden] {
  display: none !important;
}

/* 需要压过主题的 `#article-container img` 规则（ID 选择器），故带上 ID 前缀 */
#article-container .tenyear-cert-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  object-fit: contain;
}

.tenyear-cert-caption {
  display: block;
  padding: 6px 0;
  font-size: 12px;
  text-align: center;
  color: var(--anzhiyu-secondtext);
  background: var(--anzhiyu-secondbg);
}

@media screen and (max-width: 768px) {
  .tenyear-card {
    padding: 1rem 0.9rem;
  }

  .tenyear-title {
    font-size: 0.9rem;
  }

  .tenyear-percent {
    font-size: 1.2rem;
  }

  .tenyear-bars {
    gap: 3px;
  }

  .tenyear-year {
    gap: 4px;
  }

  .tenyear-year i {
    height: 26px;
  }

  .tenyear-year b,
  .tenyear-dates,
  .tenyear-summary,
  .tenyear-cert-no {
    font-size: 10px;
  }
}