/* GoodStudy · 更新日志（2026-11-12 新增）
   ────────────────────────────────────────────────────────────────
   信息结构参照 2026_JurisHot 的 /changelog：日期分组 → 每条「时间 + 类型」左栏、
   「标题 + 要点」右栏，类型可筛选。只借结构与写法，不搬它的两栏 aside 布局
   （本站内页没有右栏，筛选改成页首一排 chip）。

   加载顺序排在 figma.css 之后。figma.css 由 build-figma-css.mjs 生成、不许手改；
   style.css 已降级为功能兼容层、不许加新视觉；所以新增视觉独立成这一份。
   配色一律走 site/tokens.css 的变量，本文件不出现字面色值。 */

/* 页头 */
.changelog-head{margin:0 0 6px}
.changelog-head h1{font-size:26px;font-weight:600;line-height:1.4;letter-spacing:.5px;color:var(--text-strong)}
.changelog-head p{margin-top:8px;max-width:44em;font-size:13.5px;line-height:1.8;color:var(--muted)}
.changelog-summary{margin:12px 0 16px;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* 类型筛选：复用 figma.css 的 .chip，只抬高对比度与点击区 */
.changelog-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.changelog-filters .chip{padding:6px 14px;font-size:12.5px;color:var(--ink);border-color:var(--line);text-decoration:none;cursor:pointer;transition:background var(--ease) ease,border-color var(--ease) ease,color var(--ease) ease}
.changelog-filters .chip:hover{background:var(--sage);border-color:var(--line-strong);color:var(--brand-strong)}
.changelog-filters .chip.active{background:var(--sage);border-color:var(--line-strong);color:var(--brand-strong);font-weight:600}

/* 日期分组卡 */
.changelog-days{display:grid;gap:18px}
.changelog-day{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.changelog-day-head{display:flex;align-items:baseline;gap:10px;padding:13px 18px;background:var(--sage);border-bottom:1px solid var(--line)}
.changelog-day-head time{font-family:var(--font-serif);font-size:16px;font-weight:600;line-height:1.5;color:var(--brand)}
.changelog-week{font-size:12px;color:var(--muted)}
.changelog-day-count{margin-left:auto;font-size:12px;color:var(--muted)}
.changelog-list{list-style:none;margin:0;padding:0}

/* 单条记录 */
.changelog-entry{display:grid;gap:8px;padding:16px 18px;border-top:1px solid var(--line)}
.changelog-entry:first-child{border-top:0}
.changelog-meta{display:flex;align-items:center;gap:10px}
.changelog-time{font-size:12.5px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}
.changelog-kind{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:11.5px;line-height:1.7;color:var(--text-strong);white-space:nowrap;background:var(--sage)}
.changelog-kind::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;background:var(--green)}
/* 四类各给一个浅色底 + 一个同色系圆点，文字统一用 --text-strong 保证对比度 */
.changelog-kind.feature{background:var(--teal-soft)}
.changelog-kind.feature::before{background:var(--brand-strong)}
.changelog-kind.polish{background:var(--blue-gray)}
.changelog-kind.polish::before{background:var(--teal)}
.changelog-kind.fix{background:var(--gold-bg)}
.changelog-kind.fix::before{background:var(--gold)}
.changelog-kind.notice{background:var(--lavender)}
.changelog-kind.notice::before{background:var(--muted)}

.changelog-body{min-width:0}
.changelog-body h3{margin:0;font-size:15px;font-weight:600;line-height:1.6;color:var(--text-strong)}
.changelog-text{margin:6px 0 0;font-size:13.5px;line-height:1.8;color:var(--text)}
.changelog-points{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.changelog-points li{position:relative;padding-left:14px;font-size:13.5px;line-height:1.8;color:var(--text)}
.changelog-points li::before{content:"";position:absolute;left:2px;top:.78em;width:4px;height:4px;border-radius:50%;background:var(--line-strong)}
.changelog-empty{margin:22px 0}

/* 桌面：左时间栏 + 分隔竖线，与 JurisHot 的排法一致 */
@media(min-width:721px){
  .changelog-entry{grid-template-columns:88px minmax(0,1fr);gap:0 22px;padding:18px 20px}
  .changelog-meta{flex-direction:column;align-items:flex-start;gap:8px;padding-top:1px}
  /* 无时分条目：补出 time 的高度（12.5px×1.6 + 8px gap），标签才对得上别条 */
  .changelog-meta.no-time{padding-top:29px}
  .changelog-body{border-left:1px solid var(--line);padding-left:22px}
}
@media(max-width:640px){
  .changelog-head h1{font-size:23px}
  .changelog-head p{font-size:13px}
  .changelog-day-head{padding:11px 14px;gap:8px}
  .changelog-day-head time{font-size:15px}
  .changelog-entry{padding:14px}
  .changelog-body h3{font-size:14.5px}
  .changelog-text,.changelog-points li{font-size:13px}
}