@layer retech-block {
  /* ══════════════════════════════════════════════════════════════════════════
     retech/pedia-section —— RetechPedia 区块(原型 `sec sec--light|dark pedia-sec`)
     原型来源:ret-ch/assets/css/solutions.css §20「RetechPedia」(1478–1695 行)。
     数值逐条对照原型,不重算;类名加 `retech-x-` 前缀、CSS 变量换成本插件的
     `--retech-x-*`(原型 `--steel`/`--ink-3`/`--green` … → 见 blocks/style-index.css)。
     原型字体变量按值展开:`--fs-h3` 21px · `--fs-sm` 14px · `--fs-xs` 13px
     (ret-ch/assets/css/retech.css:91/94/95)。
     ══════════════════════════════════════════════════════════════════════════ */

  /* 原型 `.pedia-sec`(section 纵距收窄一档) */
  .retech-x-pedia-sec {
    padding-top: var(--retech-x-sec-y-sm);
    padding-bottom: var(--retech-x-sec-y-sm);
  }

  /* ── intro-stats(原型 20.1 · 总览 #about-pedia)─────────────────────── */
  .retech-x-pedia-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 48px;
    align-items: end;
  }
  .retech-x-pedia-intro-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--retech-x-line-dark);
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
  }
  .retech-x-pedia-intro-stat { padding: 20px 18px; background: var(--retech-x-steel); }
  .retech-x-pedia-intro-stat span {
    display: block;
    color: var(--retech-x-flow);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .retech-x-pedia-intro-stat small {
    display: block;
    margin-top: 8px;
    color: var(--retech-x-w60);
    font-size: 13px;
    line-height: 1.45;
  }

  /* ── cat-cards(原型 20.2 · 总览 #categories)────────────────────────── */
  .retech-x-pedia-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
  }
  .retech-x-pedia-cat-card > a,
  .retech-x-pedia-cat-card > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 24px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-white);
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                box-shadow var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                transform var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-pedia-cat-card > a:hover {
    border-color: var(--retech-x-flow);
    box-shadow: var(--retech-x-sh-md);
    transform: translateY(-2px);
  }
  .retech-x-pedia-cat-count {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--retech-x-tech);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }
  .retech-x-pedia-cat-title { color: var(--retech-x-ink); font-size: 21px; line-height: 1.3; }
  .retech-x-pedia-cat-desc { margin-top: 10px; color: var(--retech-x-ink-3); font-size: 13px; line-height: 1.68; }
  /* 卡片底部单个 CTA —— 压掉共享 `.retech-x-link-arrow` 的上内距(原型同款) */
  .retech-x-pedia-cat-card .retech-x-link-arrow { margin-top: auto; padding-top: 18px; }

  /* ── pedia-cards(原型 20.3 · 总览 #featured + 分类页 #articles)─────── */
  .retech-x-pedia-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
  }
  .retech-x-pedia-card > a,
  .retech-x-pedia-card > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px 24px 24px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-gray-light);
    transition: border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-pedia-card > a:hover {
    border-color: var(--retech-x-flow);
    background: var(--retech-x-white);
  }
  .retech-x-pedia-card-cat {
    color: var(--retech-x-tech-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .retech-x-pedia-card-title { margin-top: 12px; color: var(--retech-x-ink); font-size: 17px; font-weight: 700; line-height: 1.4; }
  .retech-x-pedia-card-lede { margin-top: 10px; color: var(--retech-x-ink-2); font-size: 13px; line-height: 1.68; }
  .retech-x-pedia-card-meta { margin-top: 16px; color: var(--retech-x-ink-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
  .retech-x-pedia-card .retech-x-link-arrow { margin-top: auto; padding-top: 14px; }

  /* ── takeaways(原型 20.4 的 `.pedia-takeaways` 段)──────────────────────
     ⚠️ 属主仍是本块(原型里它就写在 §20 RetechPedia 下),但它是**文章页**
     `.doc-main` 里的元素,由 `tools/gen_pedia.py` 以
     `core/group.retech-x-pedia-takeaways` 产出。 */
  .retech-x-pedia-takeaways {
    margin: 0 0 34px;
    padding: 24px 26px;
    border: 1px solid var(--retech-x-line);
    border-left: 3px solid var(--retech-x-flow);
    border-radius: 0 var(--retech-x-r-lg) var(--retech-x-r-lg) 0;
    background: var(--retech-x-gray-light);
  }
  .retech-x-pedia-takeaways-title {
    color: var(--retech-x-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .retech-x-pedia-takeaways ul { margin-top: 14px; padding-left: 0; list-style: none; }
  .retech-x-pedia-takeaways li {
    position: relative;
    padding-left: 20px;
    margin: 9px 0;
    color: var(--retech-x-ink-2);
    font-size: 14px;
    line-height: 1.62;
  }
  .retech-x-pedia-takeaways li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--retech-x-flow);
  }

  /* ── rows(原型 20.5 · 文章页 #more-articles)───────────────────────── */
  .retech-x-pedia-row-list {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: grid;
    gap: 1px;
    background: var(--retech-x-line);
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
  }
  .retech-x-pedia-row > a,
  .retech-x-pedia-row > div {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    background: var(--retech-x-white);
    transition: background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-pedia-row > a:hover { background: var(--retech-x-gray-light); }
  .retech-x-pedia-row-cat {
    color: var(--retech-x-tech-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .retech-x-pedia-row-title { color: var(--retech-x-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }
  .retech-x-pedia-row-meta { color: var(--retech-x-ink-3); font-size: 11px; text-align: right; letter-spacing: 0.05em; text-transform: uppercase; }

  /* ── cross-links(原型 20.6 · 分类页 #other-categories)─────────────── */
  .retech-x-pedia-cross-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    background: var(--retech-x-line-dark);
    border: 1px solid var(--retech-x-line-dark);
    border-radius: var(--retech-x-r-lg);
    overflow: hidden;
  }
  .retech-x-pedia-cross > a,
  .retech-x-pedia-cross > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    background: var(--retech-x-steel);
    transition: background-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-pedia-cross > a:hover { background: var(--retech-x-steel-2); }
  .retech-x-pedia-cross-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; }
  .retech-x-pedia-cross-count {
    flex: 0 0 auto;
    color: var(--retech-x-w40);
    font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    font-weight: 700;
  }
  /* 原型 §19.14:深色区里 `.link-arrow` 默认墨色会「隐形」,这里按原型的兜底改亮 */
  .retech-x-pedia-cross .retech-x-link-arrow { color: var(--retech-x-w90); }
  .retech-x-pedia-cross .retech-x-link-arrow:hover { color: var(--retech-x-flow); }

  /* ── resource-cards(原型 `.proof-grid` / `.proof-card` · 总览 #resources)──
     ⚠️ 原型这一段用的类名是 `proof-*`,但形状与 `retech/proof`(双图 + 编号证明卡)
     **不同**:这里是「h3 + 说明 + 底部 link-arrow」的三列卡。所以照 §20 的语境
     把它归到 pedia-section,并加 `retech-x-pedia-res-` 前缀 —— 直接用
     `retech-x-proof-*` 会与 blocks/proof/style.css 抢同一个锚定属主(check-css E5)。
     数值逐条抄自 solutions.css:380–396 / 578。 */
  .retech-x-pedia-res-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .retech-x-pedia-res-card {
    padding: 26px 24px;
    border: 1px solid var(--retech-x-line);
    border-radius: var(--retech-x-r-lg);
    background: var(--retech-x-gray-light);
  }
  .retech-x-pedia-res-card h3 { font-size: 16px; font-weight: 700; color: var(--retech-x-ink); }
  .retech-x-pedia-res-card p { margin-top: 8px; color: var(--retech-x-ink-2); font-size: 13px; line-height: 1.6; }
  .retech-x-pedia-res-card .retech-x-pedia-note { margin-top: 0; color: var(--retech-x-ink-3); }
  /* 有意的修正(不是照抄):卡片是浅底,而 dark 区共享兜底会把箭头刷成近白色
     (原型 #resources 实测对比度 ≈1.05:1)。这里钉回共享 `.retech-x-link-arrow` 的墨色。 */
  .retech-x-pedia-res-card .retech-x-link-arrow { color: var(--retech-x-ink); }
  .retech-x-pedia-res-card .retech-x-link-arrow:hover { color: var(--retech-x-flow-dark); }

  /* ── 尾部小字(原型 `.sol-note` + `.sol-note .link-arrow`)──────────── */
  .retech-x-pedia-note {
    margin-top: 30px;
    color: var(--retech-x-ink-3);
    font-size: 13px;
    line-height: 1.6;
  }
  .retech-x-pedia-note .retech-x-link-arrow { padding-top: 0; margin-top: 10px; }
  .retech-x-section--dark .retech-x-pedia-note { color: var(--retech-x-w60); }

  /* ── 出处行(原型 §25.1 `.byline`,solutions.css:2124-2158)─────────────
     原型结构:`div.byline > span.byline-badge(46px 圆形 + 28px logo)
     + div.byline-body > p.byline-lead + p.byline-sub`。
     为什么不复用 `blocks/article-body` 的 `.retech-x-byline`:那个外壳只有
     **单段一行**,表达不了原型这个「徽标 + 两行」结构(实测文章页会因此少一张图)。 */
  .retech-x-pedia-byline {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--retech-x-line);
  }
  .retech-x-pedia-byline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid var(--retech-x-line);
    border-radius: 50%;
    background: var(--retech-x-gray-light);
  }
  .retech-x-pedia-byline-badge img { display: block; width: 28px; height: auto; }
  .retech-x-pedia-byline-body { min-width: 0; }
  .retech-x-pedia-byline-lead {
    color: var(--retech-x-ink);
    font-size: var(--retech-x-fs-sm);
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  .retech-x-pedia-byline-sub {
    margin-top: 4px;
    color: var(--retech-x-ink-3);
    font-size: var(--retech-x-fs-xs);
    line-height: 1.6;
    overflow-wrap: break-word;
  }
  .retech-x-pedia-byline-team {
    color: var(--retech-x-flow-deep);
    border-bottom: 1px solid var(--retech-x-flow-a45);
    transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui),
                border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui);
  }
  .retech-x-pedia-byline-team:hover {
    color: var(--retech-x-flow);
    border-bottom-color: var(--retech-x-flow);
  }

  /* ── 屏读专用标题(原型 `h2.sr-only#pa-title`,文章页 `#article` 段的标签目标)──
     站点没有全局 `.sr-only` 工具类,而原型这一族要用它,所以在本族样式里落一份
     (只影响带 `.retech-x-pedia-sr` 的节点;`check-css` 的重复选择器规则不会命中)。 */
  .retech-x-pedia-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@layer retech-responsive {
  /* ── 原型 20.7 响应式(值逐条对照,不改断点)─────────────────────────── */
  @media (max-width: 1240px) {
    .retech-x-pedia-cat-grid,
    .retech-x-pedia-card-grid,
    .retech-x-pedia-cross-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 1080px) {
    .retech-x-pedia-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
    .retech-x-pedia-res-grid { grid-template-columns: minmax(0, 1fr); }
    .retech-x-pedia-row > a,
    .retech-x-pedia-row > div { grid-template-columns: 150px minmax(0, 1fr) 90px; gap: 14px; padding: 16px 18px; }
  }
  @media (max-width: 767px) {
    .retech-x-pedia-cat-grid,
    .retech-x-pedia-card-grid,
    .retech-x-pedia-cross-grid,
    .retech-x-pedia-intro-stats { grid-template-columns: minmax(0, 1fr); }
    .retech-x-pedia-row > a,
    .retech-x-pedia-row > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .retech-x-pedia-row-meta { text-align: left; }
    .retech-x-pedia-takeaways { padding: 20px 18px; }
  }
  /* 原型 solutions.css:2218-2222(`@media max-width:700px`) */
  @media (max-width: 700px) {
    .retech-x-pedia-byline { gap: 12px; margin-bottom: 24px; padding-bottom: 20px; }
    .retech-x-pedia-byline-badge { width: 40px; height: 40px; flex-basis: 40px; }
    .retech-x-pedia-byline-badge img { width: 24px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .retech-x-pedia-cat-card > a,
    .retech-x-pedia-card > a { transition: none; }
    .retech-x-pedia-cat-card > a:hover,
    .retech-x-pedia-card > a:hover { transform: none; }
  }
}