/* ══════════════════════════════════════════════════════════
   qiuyiwu.com 设计系统 · 原子页扩展层
   依赖 tokens.css + base.css + components.css。

   frameworks/*.html、cases/*.html、essays/*.html 共用的结构：
   一段带标签/版本号的 hero + 编号小节 + "引用关系"列表 + 可选的
   yaml 元数据块 + 可选的版本历史。这里只放这些页面专属、components.css
   里没有的东西，别的一律用 .ds-* 组件。

   引用关系列表的两种状态是这一版重做的核心：
   - .ref-item（真链接）：目标是仓库里真实存在的静态页
   - .ref-item.plain（纯文字，不可点）：目标目前只有 card.html 这个内部
     工具，不把公开访客导进一个 ws-shell 壳、robots 禁止的内部页面——
     这正是"点进去像后台"那条反馈要修的问题。等这个原子有了真实公开页，
     把 class 从 .plain 换成普通 .ref-item 加 href 即可。
   ══════════════════════════════════════════════════════════ */

.atom-hero { padding: var(--sp-14) 0 var(--sp-10); border-top: none; }
.atom-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.atom-chip {
  font-family: var(--v-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill); border: 1px solid var(--v-line2); color: var(--v-ink3);
}
.atom-chip.tier { border-color: var(--v-accent); color: var(--v-accent); font-weight: 600; }
.atom-chip.update { border: none; color: var(--v-ink4); }
.atom-hero h1 { font-size: var(--fs-display); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); text-wrap: balance; }
.atom-en { font-family: var(--v-font-serif); font-style: italic; color: var(--v-ink3); font-size: 15px; margin-bottom: var(--sp-6); }
.atom-tagline { font-family: var(--v-font-cn-serif); font-size: 1.5rem; font-weight: 600; line-height: 1.5; margin-bottom: var(--sp-8); }
.atom-tagline em { color: var(--v-accent); font-style: normal; }
.atom-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--v-line);
  border: 1px solid var(--v-line); border-radius: var(--r-md); overflow: hidden; }
.atom-stat { background: var(--v-card); padding: var(--sp-4) var(--sp-5); }
.atom-stat .k { font-family: var(--v-font-mono); font-size: 9.5px; letter-spacing: .18em; color: var(--v-ink4); text-transform: uppercase; margin-bottom: 8px; }
.atom-stat .v { font-family: var(--v-font-serif); font-style: italic; font-size: 1.7rem; color: var(--v-accent); }
.atom-stat .v small { font-family: var(--v-font-cn); font-style: normal; font-size: 12px; color: var(--v-ink3); margin-left: 4px; }

.atom-body p, .atom-body ul { max-width: var(--v-read); font-size: var(--fs-body); color: var(--v-ink2); line-height: var(--lh-body); }
.atom-body p + p { margin-top: var(--sp-4); }
.atom-body ul { padding-left: 1.3em; margin-top: var(--sp-2); }
.atom-body li + li { margin-top: 6px; }
.atom-body strong { color: var(--v-ink); font-weight: 600; }
.atom-body em { color: var(--v-accent); font-style: normal; }

@media (max-width:760px) { .atom-stats { grid-template-columns: repeat(2,1fr); } }

/* ── 引用关系：两种状态 ── */
.ref-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.ref-list { display: flex; flex-direction: column; gap: 7px; margin-top: var(--sp-3); }
.ref-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 10px 14px; border-radius: var(--r-sm); font-size: 13.5px; }
a.ref-item { background: var(--v-card); border: 1px solid var(--v-line); color: var(--v-ink);
  transition: border-color var(--t-fast), transform var(--t-fast); }
a.ref-item:hover { border-color: var(--v-accent); transform: translateX(3px); }
.ref-item.plain { color: var(--v-ink3); background: transparent; border: 1px dashed var(--v-line); }
/* components.css 有个「15 个卡片类收编成一个」的遗留兼容层，把裸类名 .role
   也吃进去了(给的是卡片的 background/border/box-shadow/display:block)——跟这里
   毫不相关的历史包袱，只是撞了同一个词。.ref-item 是 flex 容器，display:block
   被吸收看不出来，但 background/border 还是会透出来，必须显式清掉。 */
.ref-item .role { font-size: 11.5px; color: var(--v-ink4); white-space: nowrap;
  display: inline; background: none; border: none; box-shadow: none; }
.ref-item.plain .tag { font-family: var(--v-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--v-ink4); }
@media (max-width:760px) { .ref-group { grid-template-columns: 1fr; } }

/* ── 元数据 yaml 块 ── */
.yaml-block { background: var(--v-bg2); border: 1px solid var(--v-line); border-radius: var(--r-md); padding: var(--sp-6); overflow-x: auto; }
.yaml { font-family: var(--v-font-mono); font-size: 12.5px; line-height: 1.9; color: var(--v-ink3); white-space: pre; }
.yaml .k { color: var(--v-accent); }
.yaml .s { color: var(--v-ink2); }
.yaml .c { color: var(--v-ink4); }

/* ── 版本历史 ── */
.changelog { display: flex; flex-direction: column; gap: var(--sp-4); }
.change { display: grid; grid-template-columns: 60px 90px 1fr; gap: var(--sp-4); font-size: 13.5px; align-items: baseline; }
.change .v { font-family: var(--v-font-mono); font-weight: 600; color: var(--v-accent); }
.change .date { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-ink4); }
.change p { color: var(--v-ink2); line-height: 1.7; margin: 0; }
@media (max-width:600px){ .change{ grid-template-columns: 1fr; gap: 4px; } }

/* ── 论证提要页（essays）专属：比 frameworks/cases 轻的引用卡 ── */
.e-note { background: var(--v-bg2); border-left: 3px solid var(--v-accent); border-radius: var(--r-sm);
  padding: var(--sp-4) var(--sp-5); font-size: var(--fs-sm); color: var(--v-ink2); line-height: 1.75; margin: var(--sp-6) 0; max-width: var(--v-read); }
.e-note b { color: var(--v-ink); }