/* 更新日志美化方案 C｜由 .workbuddy/changelog-proposals/apply_changelog_scheme.py 生成，勿手改 */
/* ===== 更新日志美化方案 · 共用基线 =====
   只清除现状里最刺眼的旧样式（硬阴影、菱形箭头、过疏条目间距），
   不做任何风格判断，4 套方案都在这条基线上叠加。仅作用于更新日志页。 */
.cl-hero { position: relative; }

/* 现状缺陷：vertical-timeline.css 有全局 `header{background:#5989e5;padding:10px}`，
   而方案 D 的导航胶囊是 fixed 定位、脱离文档流，header 容器便在文档流里
   露出一条饱和蓝带。浅色方案下尤其突兀，这里统一让 header 只做定位容器。 */
header.header {
  background: transparent !important;
  padding: 0 !important;
  -webkit-box-shadow: none;
  box-shadow: none !important;
}

#timeline .timeline-item { margin-bottom: 34px; }
#timeline .timeline-item .timeline-content {
  -webkit-box-shadow: none;
  box-shadow: none;
}
#timeline .timeline-item .timeline-content:before { display: none !important; }
#timeline .timeline-item .timeline-content ul { margin-top: 20px; margin-bottom: 22px; }
#timeline .timeline-item .timeline-content ul li { line-height: 1.9; }
footer.main-footer .contact-info li { list-style: none; }

/* ===== 方案 C · 文档杂志风 =====
   思路：把横幅压成一条左对齐的信息栏（左侧品牌渐变竖条 + 右侧版本跨度），
   时间线彻底去掉色块与边框，改成大日期 + 细分隔线 + 序号正文的「排版式」，
   footer 收成居中的一行。适合：把 63 条更新当文档读、追求信息密度。 */
.cl-hero {
  background: #fff !important; padding: 34px 0 30px !important;
  text-align: left !important; border-bottom: 1px solid #e8edf6;
}
.cl-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(#5989e5, #37cfdc);
}
.cl-hero::after {
  content: "63 次更新\A 2019 — 2026\A v2.7.844644";
  white-space: pre; position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
  text-align: right; font-size: .84rem; line-height: 1.85; letter-spacing: .3px;
  color: #8a97ad; border-right: 2px solid #dce7fa; padding-right: 18px;
}
html[data-lang="en"] .cl-hero::after { content: "63 releases\A 2019 — 2026\A v2.7.844644"; }
.cl-hero .container { text-align: left; }

/* ── 顶部信息栏与导航胶囊共用同一条内容基准线 ─────────────────────────
   导航胶囊是浮动岛：≥1280px 时 width:calc(100% - 48px)/max-width:1240px/padding 0 20px，
   1200–1279.98px 为 calc(100% - 24px)+14px，≤1199.98px 为 calc(100% - 24px)+12px。
   这里把 .cl-hero 的容器换成同一组数值：kicker / 标题 / 副标题的左边缘与 logo 左边缘
   精确对齐，右侧「63 次更新」版本块与语言菜单的右边缘精确对齐。
   原来容器是主题的 1100px，比胶囊窄 140px、又内缩 15px，所以在宽屏上标题比 logo
   偏右约 65px、版本块还探出胶囊右边缘约 250px。 */
.cl-hero .container,
.cl-hero + .container {
  /* 胶囊 = 1px 边框 + padding，且宽度在 1200–1264px 之间还会先撞上 max-width， */
  /* 所以这里用同一个 min() 表达式表达，内缩值取「边框 + padding」。 */
  /* 时间线容器一并换成同一条基准线，顶部信息栏与正文档位共用同一中轴， */
  /* 否则标题在 120px、正文列却居中于主题的 1100px 老框里，看起来像两套栅格。 */
  width: min(calc(100% - 48px), 1240px);
  max-width: none;
  padding-left: 21px;
  padding-right: 21px;
}
.cl-hero::after {
  right: calc((100% - min(calc(100% - 48px), 1240px)) / 2 + 21px);
}
@media (max-width: 1279.98px) {
  .cl-hero .container,
  .cl-hero + .container { width: min(calc(100% - 24px), 1240px); padding-left: 15px; padding-right: 15px; }
  .cl-hero::after { right: calc((100% - min(calc(100% - 24px), 1240px)) / 2 + 15px); }
}
@media (max-width: 1199.98px) {
  .cl-hero .container,
  .cl-hero + .container { padding-left: 13px; padding-right: 13px; }
  .cl-hero::after { right: calc((100% - min(calc(100% - 24px), 1240px)) / 2 + 13px); }
}
.cl-hero .cl-kicker { color: #5989e5 !important; opacity: 1; font-size: .72rem; letter-spacing: 3px; }
.cl-hero h1 { color: #22304d !important; font-size: 2.1rem; margin-bottom: 10px; }
.cl-hero p { color: #6b7688 !important; font-size: .92rem; max-width: 62%; }

#timeline:before { width: 1px; background: #dce4f2; left: 5%; }
/* 时间图标严格居中：原主题用 translate + 行盒基线摆图，方案 C 的 26px 小圆里
   日历图案实际偏右 1.4px、偏下 6.6px，几乎贴到圆的下沿。这里改成 flex 居中，
   并让圆心精确落在时间轴竖线中心（竖线 1px，中心 = 5% + .5px）。 */
#timeline .timeline-item .timeline-icon {
  background: #fff !important; border: 1px solid #c9d9f7;
  width: 26px; height: 26px; margin-left: -12.5px; top: -3px;
  box-shadow: none;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
#timeline .timeline-item .timeline-icon img {
  width: 14px !important; height: 14px !important;
  position: static !important;
  transform: none !important;
  display: block;
  margin: 0 !important;
  flex: 0 0 auto;
  filter: brightness(0) opacity(.42);
}
#timeline .timeline-item .timeline-content {
  background: transparent !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding: 0 0 0 4px !important;
}
#timeline .timeline-item .timeline-content h3 {
  background: transparent !important; color: #22304d !important;
  margin: 0 !important; padding: 0 0 12px !important;
  border-bottom: 1px solid #e3e9f2; border-left: 0;
  border-radius: 0 !important; font-size: 1.14rem; font-weight: 700;
}
#timeline .timeline-item .timeline-content ul { counter-reset: cl; margin-top: 16px; margin-bottom: 8px; }
#timeline .timeline-item .timeline-content ul li {
  counter-increment: cl; list-style-type: none; position: relative;
  padding-left: 40px; color: #4a5568; font-size: 14.5px; line-height: 29px;
}
#timeline .timeline-item .timeline-content ul li::before {
  content: counter(cl, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  color: #9db4e4; font-size: .74rem; font-weight: 700; letter-spacing: .6px;
  line-height: inherit;   /* 与正文共用同一绝对行盒，序号与文字垂直中心对齐 */
  /* top:1px：按视觉反馈把序号整体下移 1px */
}

footer.main-footer { padding: 30px 0 0 !important; text-align: center; }
footer.main-footer .row { justify-content: center; }
footer.main-footer .col-lg-6 { flex: 0 0 100%; max-width: 100%; }
footer.main-footer .brand { color: #22304d !important; font-weight: 700; font-size: 1.1rem; }
footer.main-footer .contact-info { margin-top: 8px; }
footer.main-footer .contact-info li,
footer.main-footer p { color: #6b7688 !important; font-size: .86rem; line-height: 1.8; }
footer.main-footer a { color: #5989e5 !important; }
footer.main-footer .copyrights {
  margin-top: 18px !important; padding: 14px 0; border-top: 1px solid #eef1f7;
}
footer.main-footer .copyrights .row { justify-content: center; }
footer.main-footer .copyright,
footer.main-footer .markup,
footer.main-footer .markup a { color: #98a2b4 !important; font-size: .8rem; }

/* 窄屏中轴对齐：本方案把竖线设为 left:5%，会盖掉主题在 ≤768px 的 left:0，
   而图标仍是 left:0，两者在手机上错开约 16px。这里把竖线与圆心重新对齐。 */
@media (max-width: 768px) {
  #timeline:before { left: 0; }
  #timeline .timeline-item .timeline-icon { left: 0; margin-left: -12.5px; }
}

/* 窄屏收敛：右侧绝对定位统计块会挤占标题，改为横幅底部左对齐的一行小字 */
@media (max-width: 767.98px) {
  .cl-hero { padding: 22px 0 20px !important; }
  .cl-hero h1 { font-size: 1.6rem; }
  .cl-hero p { font-size: .8rem; max-width: 100%; }
  .cl-hero::after {
    content: "63 次更新 · 2019 — 2026 · v2.7.844644";
    position: static; transform: none; display: block;
    margin-top: 12px; padding: 0 0 0 12px;
    text-align: left; white-space: normal;
    border-right: 0; border-left: 2px solid #dce7fa;
    font-size: .72rem; line-height: 1.6;
  }
  html[data-lang="en"] .cl-hero::after {
    content: "63 releases · 2019 — 2026 · v2.7.844644";
  }
}