/* ==========================================================================
   DSH 百科 · 视觉系统（现代 Wiki / 索引式）
   实现 docs/08-visual-system.md：令牌 → 排版 → 布局 → 组件。
   零框架、零预处理器、零网络字体。纯 CSS 变量 + 组件类。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 令牌（docs/08 §2 颜色、§3 字体）
   亮色为默认值；暗色由 prefers-color-scheme 与 [data-theme] 两条路径覆盖。
   语义色永远与图标或文字同时出现（docs/08 §1 原则 5）。
   -------------------------------------------------------------------------- */

:root {
  /* 品牌与链接 */
  --brand: #12796f;
  --brand-weak: #e6f4f2;
  --link: #1a56db;
  --link-visited: #6d28d9;

  /* 底色与边框 */
  --bg: #ffffff;
  --bg-subtle: #f6f7f9;
  --bg-inset: #eef0f4;
  --border: #e3e6ea;
  --border-strong: #cfd4db;

  /* 文字 */
  --text: #1b1f24;
  --text-muted: #5a6472;
  --text-faint: #8b95a3;

  /* 语义色 */
  --ok: #1a7f37;
  --warn: #9a6700;
  --danger: #b42318;
  --unknown: #6b7280;

  /* 字体（docs/08 §3：不引入网络字体） */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei",
    "PingFang SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "JetBrains Mono", monospace;

  /* 字号阶梯：12 脚注 / 13 字段名与标签 / 14 正文 / 16 小节 / 20 词条标题 / 24 首页标题 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-h3: 16px;
  --fs-h2: 20px;
  --fs-h1: 24px;

  /* 尺度 */
  /* 右栏：280px 时信息表的取值列只剩 ~110px，中文每行 11 个字（评审：太窄）。
     加宽到 360px，取值列约 190px。 */
  --w-aside: 360px;
  /* 行宽**自适应**：以前这里写死 `72ch`，于是 1440 屏与 2560 屏上正文都是同一宽度，
     宽屏右侧空一大片（评审：很窄、问有没有自适应机制）。
     现在随视口在「舒适下限」与「可读上限」之间伸缩：
       · 46ch ≈ 380px —— 窄屏（手机/竖屏）不再被压成一条;
       · 48vw —— 跟着窗口走，屏幕越宽行越宽（这正是原来缺的那部分）;
       · 92ch ≈ 750px ≈ 54 个全角字 —— 中文行宽的可读上限，再宽读着累。
     `ch` 随字号变、`vw` 随窗口变，clamp 取两者之间，所以任意视口都落在合理区间。 */
  --max-prose: clamp(46ch, 58vw, 110ch);
  --h-masthead: auto;
  --r-badge: 12px;
  --r-box: 4px;

  /* 左侧导航栏（原顶栏的竖排改造）：宽度与收放动画。
     180px 是「最长的分区名（6 个汉字）仍能单行放下」的最小舒适宽度，
     再窄会把「界面与客户端」这类标签挤成两行。 */
  --w-rail: 180px;
  --rail-dur: 0.22s;
  --rail-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* 标签色调（docs/08 §4）：只有 TAG_STYLE 里**登记过**的标签才用得上其中一个，
     其余标签保持中性——中性是多数，彩色才有信息量。
     每档两个值：文字色 + 弱背景色（暗色主题下另给一组，见下面两个暗色块）。 */
  --tone-grass: #1f7a44;
  --tone-grass-weak: #e6f4ea;
  --tone-sky: #1f5fa8;
  --tone-sky-weak: #e6effa;
  --tone-amber: #8a5a00;
  --tone-amber-weak: #fbf1e0;
  --tone-violet: #5b3fb0;
  --tone-violet-weak: #efeafa;
  --tone-slate: #44505f;
  --tone-slate-weak: #eaeef2;

  color-scheme: light;
}

/* 暗色：手动覆盖优先（data-theme 同时覆盖 prefers-color-scheme） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3fd0bd;
    --brand-weak: #12302c;
    --link: #8ab4ff;
    --link-visited: #c4b5fd;
    --bg: #14171a;
    --bg-subtle: #1b1f23;
    --bg-inset: #22272c;
    --border: #2c3238;
    --border-strong: #3a4249;
    --text: #e6e9ee;
    --text-muted: #a3adba;
    --text-faint: #78828f;
    --ok: #4ade80;
    --warn: #fbbf24;
    --danger: #f87171;
    --unknown: #9ca3af;
  /* 标签色调（暗色版）：文字提亮、背景压暗，对比度与亮色版对齐 */
  --tone-grass: #7fd6a0;
  --tone-grass-weak: #14291c;
  --tone-sky: #86bcf0;
  --tone-sky-weak: #12222f;
  --tone-amber: #e0b070;
  --tone-amber-weak: #2a2113;
  --tone-violet: #b9a3f0;
  --tone-violet-weak: #1f1a2e;
  --tone-slate: #aab6c4;
  --tone-slate-weak: #1e242a;    color-scheme: dark;
  }
}
/* 手动切到暗色（无论系统偏好） */
:root[data-theme="dark"] {
  --brand: #3fd0bd;
  --brand-weak: #12302c;
  --link: #8ab4ff;
  --link-visited: #c4b5fd;
  --bg: #14171a;
  --bg-subtle: #1b1f23;
  --bg-inset: #22272c;
  --border: #2c3238;
  --border-strong: #3a4249;
  --text: #e6e9ee;
  --text-muted: #a3adba;
  --text-faint: #78828f;
  --ok: #4ade80;
  --warn: #fbbf24;
  --danger: #f87171;
  --unknown: #9ca3af;
  /* 标签色调（暗色版）：文字提亮、背景压暗，对比度与亮色版对齐 */
  --tone-grass: #7fd6a0;
  --tone-grass-weak: #14291c;
  --tone-sky: #86bcf0;
  --tone-sky-weak: #12222f;
  --tone-amber: #e0b070;
  --tone-amber-weak: #2a2113;
  --tone-violet: #b9a3f0;
  --tone-violet-weak: #1f1a2e;
  --tone-slate: #aab6c4;
  --tone-slate-weak: #1e242a;  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. 基础排版
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  overflow-wrap: break-word;
}

/* 中英混排与代码不断字（docs/08 §3 中文排版规则） */
code,
kbd,
samp,
.mono,
code-block,
.version,
.hash {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  word-break: keep-all;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--link-visited);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

h1,
h2,
h3,
h4 {
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 8px;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 40;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
  transition: top 0.1s linear;
}

.skip-link:focus {
  top: 8px;
}

.num {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--text-muted);
}

.faint {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   3. 通用盒子
   -------------------------------------------------------------------------- */

.box {
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  background: var(--bg);
}

.box__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.box__body {
  padding: 12px;
}

/* 「相关」框里的小标题（如「相关教程」）：把同一格里的两组链接分开 */
.box__subhead {
  margin: 8px 0 4px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   4. 左侧导航栏（原顶栏的竖排改造，docs/08 §4、§8.5）
   站名（最上面，稍大）+ 十一个分区（竖排、超出自己滚动）+ 搜索 / 主题
   + 最下面的「收起侧栏」按钮。
   状态：<html class="rail-collapsed"> 表示已向左收回。
   ≥1100px 推开正文常驻；<1100px 改为浮层覆盖（见文末「侧栏与正文的联动」）。
   -------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--w-rail);
  height: 100vh;
  height: 100dvh;
  background: var(--bg-rail);
  border-right: 1px solid var(--border);
  transform: translateX(0);
  transition: transform var(--rail-dur) var(--rail-ease);
}

html.rail-collapsed .masthead {
  transform: translateX(-100%);
}

.masthead__inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 10px 10px;
}

/* 站名：侧栏最上面，比原顶栏字号大一档 */
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 6px 10px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.brand:hover {
  text-decoration: none;
}

/* 品牌标记：固定尺寸，不要被 flex 压缩 */
.brand__mark {
  flex: none;
  display: block;
  width: 18px;
  height: 18px;
}

.brand__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand__name {
  display: block;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--brand);
  line-height: 1.25;
}

/* 侧栏副标 = 合规声明（标语不进导航，docs/08 §8.5 规矩 1） */
.brand__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  line-height: 1.3;
}

/* 分区导航：竖排，全部可达；过长时自己滚动，不挤走底部的按钮 */
.zones {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.zones__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zones__list a {
  display: block;
  padding: 7px 10px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  border-left: 3px solid transparent;
  border-radius: 0 var(--r-box) var(--r-box) 0;
}

.zones__list a:hover {
  color: var(--text);
  background: var(--bg-subtle);
  text-decoration: none;
}

.zones__list a[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-weak);
  border-left-color: var(--brand);
  font-weight: 600;
}

/* 侧栏底部：搜索、主题、相关、收起 */
.masthead__tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.masthead .search {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

/* 建议面板从侧栏向右展开，不被 232px 宽度卡住 */
.masthead .search__panel {
  right: auto;
  min-width: 0;
  width: max(100%, 288px);
}

.masthead .icon-btn {
  width: 100%;
  text-align: left;
}

/* 收起按钮（侧栏最下面） */
/* 侧栏顶部一行：站名 + 收起按钮（都在最上面，随时够得着） */
.rail__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--border);
}

/* 站名在这一行里占满剩余宽度，底框交给 .rail__top 统一画 */
.rail__top .brand {
  flex: 1 1 auto;
  padding: 0;
  border-bottom: 0;
}

/* 收起按钮：紧凑图标按钮（原来是占满整行的文字按钮） */
.rail-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 5px 8px;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  cursor: pointer;
}

.rail-collapse:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.rail-collapse__icon {
  font-size: var(--fs-base);
  line-height: 1;
}

/* 收起后在左上角露出的「展开导航」按钮（挂 body，不能跟着侧栏一起移出去） */
.rail-reopen {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 31;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.08);
  cursor: pointer;
}

html.rail-collapsed .rail-reopen {
  display: inline-flex;
}

.rail-reopen:hover {
  background: var(--brand-weak);
}

/* 窄屏浮层模式下的遮罩（只在 <1100px 且侧栏展开时出现） */
.rail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: none;
  background: rgb(0 0 0 / 0.32);
}

/* 搜索框常驻顶栏 */
.search {
  position: relative;
  flex: 0 1 220px;
  min-width: 132px;
}

.search__input {
  width: 100%;
  padding: 5px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
}

.search__input::placeholder {
  color: var(--text-faint);
}

.search__input:focus {
  background: var(--bg);
}

.icon-btn {
  flex: 0 0 auto;
  padding: 5px 8px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

/* 搜索建议面板 */
.search__panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
}

.search__panel[hidden] {
  display: none;
}

.search__group {
  padding: 6px 10px 2px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  border-top: 1px solid var(--border);
}

.search__group:first-child {
  border-top: 0;
}

.search__hit {
  display: block;
  padding: 6px 10px;
  color: var(--text);
  font-size: var(--fs-sm);
}

.search__hit:hover,
.search__hit[aria-selected="true"] {
  background: var(--brand-weak);
  text-decoration: none;
}

.search__hit b {
  color: var(--text);
  font-weight: 600;
}

.search__empty {
  padding: 10px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. 布局外壳（docs/08 §4）
   -------------------------------------------------------------------------- */

.layout {
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 12px 32px;
}

/* 页面主标题区 */
.pagehead {
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.pagehead h1 {
  margin-bottom: 4px;
}

.pagehead__desc {
  color: var(--text-muted);
  max-width: var(--max-prose);
  margin: 0 0 6px;
}

.pagehead__meta {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 面包屑 */
.crumbs {
  padding-top: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li + li::before {
  content: "›";
  margin-right: 4px;
  color: var(--text-faint);
}

.crumbs a {
  color: var(--link);
}

/* 词条页两栏：正文 / 信息表 + 目录（吸顶）。
   「相关」曾单独占左边一列（240px），评审判定「太占空间」，已并入信息栏（docs/08 §5）。 */
.entry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   6. 标题栏（docs/08 §5.1）
   -------------------------------------------------------------------------- */

.titlebar {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.titlebar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.titlebar h1 {
  margin: 0;
}

.titlebar__en {
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.titlebar__actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn {
  display: inline-block;
  padding: 4px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover {
  background: var(--bg-subtle);
  text-decoration: none;
}

.btn--primary {
  color: var(--bg);
  background: var(--brand);
  border-color: var(--brand);
}

.btn--primary:hover {
  background: var(--brand);
  opacity: 0.92;
}

.titlebar__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.titlebar__sub {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.titlebar__sub .sep {
  color: var(--text-faint);
  margin: 0 4px;
}

/* --------------------------------------------------------------------------
   7. 徽章（docs/08 §5.2，四种，形状统一 12px 圆角）
   一律「符号 + 文字」，不靠色块。
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: var(--r-badge);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: baseline;
}

/* 状态徽章 */
.badge--status {
  background: var(--bg-inset);
  color: var(--text-muted);
  border-color: var(--border);
}
.badge--ok {
  background: var(--bg-inset);
  color: var(--ok);
  border-color: var(--ok);
}
.badge--warn {
  background: var(--bg-inset);
  color: var(--warn);
  border-color: var(--warn);
}
.badge--danger {
  background: var(--bg-inset);
  color: var(--danger);
  border-color: var(--danger);
}
.badge--unknown {
  background: var(--bg-inset);
  color: var(--unknown);
  border-color: var(--unknown);
}

/* 来源徽章：淡底 + 次要文字 */
.badge--source {
  background: var(--bg-inset);
  color: var(--text-muted);
  border-color: var(--border);
  font-family: var(--font-mono);
}

/* 风险徽章：只有描边，避免页面变红 */
.badge--risk {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}

/* 口径徽章 */
.badge--manual {
  background: var(--bg-inset);
  color: var(--ok);
  border-color: var(--border);
}
.badge--verified {
  background: var(--bg-inset);
  color: var(--ok);
  border-color: var(--border);
}
.badge--auto {
  background: var(--bg-inset);
  color: var(--text-muted);
  border-color: var(--border);
}
.badge--none {
  background: var(--bg-inset);
  color: var(--unknown);
  border-color: var(--border);
}

/* 标签（二级筛选） */
.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--r-badge);
  background: var(--bg-inset);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  text-decoration: none;
}

a.tag:hover {
  color: var(--text);
  border-color: var(--border-strong);
  text-decoration: none;
}

/* 标签色调与小图标（docs/08 §4）：只有 TAG_STYLE 里**登记过**的标签才带 data-tone 与图标，
   其余保持中性——中性是多数，彩色才有信息量。
   图标只是装饰（aria-hidden），标签文字始终在，所以颜色不是唯一信号。
   注意：下面的选中态规则在它们之后、同优先级后者胜——选中的筛选 chip 一律用品牌色。 */
.tag[data-tone="grass"] {
  background: var(--tone-grass-weak);
  color: var(--tone-grass);
}

.tag[data-tone="sky"] {
  background: var(--tone-sky-weak);
  color: var(--tone-sky);
}

.tag[data-tone="amber"] {
  background: var(--tone-amber-weak);
  color: var(--tone-amber);
}

.tag[data-tone="violet"] {
  background: var(--tone-violet-weak);
  color: var(--tone-violet);
}

.tag[data-tone="slate"] {
  background: var(--tone-slate-weak);
  color: var(--tone-slate);
}

.tag__icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  vertical-align: -1px;
}

.tag__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}


.tag[aria-pressed="true"],
.tag--on {
  background: var(--brand-weak);
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}

.tagset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   8. 分块 tab（下划线指示，带计数；docs/08 §5.1）
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 12px 0 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: thin;
}

.tabs__btn {
  flex: 0 0 auto;
  padding: 7px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.tabs__btn:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.tabs__btn[aria-selected="true"] {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.tabs__count {
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tabs__btn[aria-selected="true"] .tabs__count {
  color: var(--brand);
}

.tabpanel {
  padding-top: 14px;
}

.tabpanel[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   9. 正文（Markdown 渲染结果）
   -------------------------------------------------------------------------- */

.prose {
  max-width: var(--max-prose);
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-h3);
}

.prose h3 {
  margin: 16px 0 6px;
}

.prose h4 {
  margin: 14px 0 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.prose p {
  margin: 0 0 10px;
}

.prose ul,
.prose ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.prose li {
  margin: 2px 0;
}

.prose code {
  padding: 1px 4px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 2px;
}

.prose blockquote {
  margin: 0 0 10px;
  padding: 2px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted);
}

.prose table {
  margin-bottom: 10px;
}

.prose img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

.anchor {
  margin-left: 6px;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  opacity: 0;
}

h2:hover .anchor,
h3:hover .anchor,
.anchor:focus-visible {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. 表格与版本矩阵（docs/08 §5.3）
   无斑马纹，1px 行分隔，表头 sticky；矩阵用「符号 + 文字」。
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

table.data caption {
  padding: 6px 8px;
  text-align: left;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

table.data th,
table.data td {
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

table.data thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-strong);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

table.data tbody tr:last-child td {
  border-bottom: 0;
}

table.data tbody th {
  font-weight: 500;
  white-space: nowrap;
}

table.data td code,
table.data th code {
  font-size: var(--fs-xs);
}

table.data .col-key {
  color: var(--text-muted);
  font-weight: 500;
}

.matrix td,
.matrix th {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 四态符号 + 文字；符号与文字都必须可读，不靠色块 */
.cell-ok {
  color: var(--ok);
}
.cell-bad {
  color: var(--danger);
}
.cell-unknown {
  color: var(--unknown);
}
.cell-na {
  color: var(--text-faint);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   11. 信息表（<dl>，分组，字段值带口径徽章；docs/08 §5.1）
   -------------------------------------------------------------------------- */

.infotable {
  margin: 0;
}

.infotable__group + .infotable__group {
  border-top: 1px solid var(--border);
}

.infotable__grouphead {
  padding: 6px 10px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.infotable__row {
  display: grid;
  grid-template-columns: minmax(88px, 34%) 1fr;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
}

.infotable__row:last-child {
  border-bottom: 0;
}

.infotable dt {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.infotable dd {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.infotable dd .val-missing {
  color: var(--unknown);
}

.infotable__note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   12. 数据来源脚注（docs/08 §5.1「数据来源」tab）
   -------------------------------------------------------------------------- */

.sourcelist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.sourcelist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.sourcelist li:last-child {
  border-bottom: 0;
}

.sourcelist__field {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  min-width: 96px;
}

.footnote {
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   13. 完整度条与缺项（docs/01 §4.4）
   -------------------------------------------------------------------------- */

.completeness {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  background: var(--bg-subtle);
}

.completeness__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}

.completeness__label {
  color: var(--text-muted);
  font-weight: 500;
}

.completeness__score {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bar {
  flex: 1 1 auto;
  height: 8px;
  min-width: 60px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.bar__fill {
  display: block;
  height: 100%;
  background: var(--brand);
}

.bar--unknown .bar__fill {
  display: none;
}

.completeness__missing {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.completeness__missing li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 2px 0;
}

/* 已有维护者时的那一行（docs/14 §1.4）：认领之后要看得出来，否则等于白认领 */
.completeness__owner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.completeness__owner-k {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.completeness__owner-v {
  font-weight: 600;
}

.completeness__owner-note {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 缺口清单里的动作：每个缺口都要能「做完」，不是只显示一句抱怨 */
.completeness__field {
  font-weight: 600;
}

.completeness__acts {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 2px 16px;
}

.completeness__act {
  font-size: var(--fs-xs);
  line-height: 1.5;
  padding: 1px 7px;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  background: var(--bg);
  color: var(--link);
  text-decoration: none;
  cursor: pointer;
}

.completeness__act:hover {
  border-color: var(--link);
  background: var(--bg-subtle);
}

.completeness__act--copy {
  color: var(--text-muted);
  font-family: inherit;
}

.completeness__missing .hint {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   14. 命令块（可复制；不做「一键安装」假按钮）
   -------------------------------------------------------------------------- */

.codeblock {
  position: relative;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  background: var(--bg-subtle);
}

.codeblock pre {
  margin: 0;
  padding: 8px 44px 8px 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  word-break: keep-all;
}

.codeblock--plain pre {
  padding-right: 10px;
}

.codeblock__copy {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 7px;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-box);
  cursor: pointer;
}

.codeblock__copy:hover {
  color: var(--text);
}

/* --------------------------------------------------------------------------
   15. 落点图（docs/08 §5.4：纯 HTML/CSS，不用图片）
   -------------------------------------------------------------------------- */

.dropzone {
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  background: var(--bg-subtle);
}

.dropzone__head {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.dropzone__tree {
  margin: 0;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  color: var(--text);
}

.dropzone__tree .hits {
  color: var(--brand);
  font-weight: 600;
}

.dropzone__tree .cmt {
  color: var(--text-faint);
}

.dropzone__foot {
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   16. 红链（docs/08 §5.3）
   -------------------------------------------------------------------------- */

.redlink {
  color: var(--text-faint);
  border-bottom: 1px dashed var(--text-faint);
  text-decoration: none;
}

.redlink:hover {
  color: var(--text-muted);
  text-decoration: none;
}

.redlink:visited {
  color: var(--text-faint);
}

.redlink::after {
  content: " ✎";
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   17. 卡片（分区页；docs/08 §5.3、docs/06 §4）
   两行紧凑：名称 + 徽章 / 一句话 + 标签行；右上角「词条 →」或红链。
   -------------------------------------------------------------------------- */

/* `hidden` 属性必须**真的**隐藏元素。
   作者样式里的 display 会盖掉浏览器默认的 `[hidden] { display: none }`，
   而分区页的标签筛选、空状态提示、页签都靠 hidden 来控制显隐——
   少这一条就出现"属性在、眼睛还看得见"（线上踩过两次：`.card` 的 display:grid、
   `.notice` 的 display:flex，后者导致「没有匹配的条目」一直挂在页面底部）。 */
[hidden] {
  display: none !important;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  background: var(--bg);
}

.card:hover {
  border-color: var(--border-strong);
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.card__name {
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--text);
}

/* 按类型浏览：类型导航条与页面标题（#/browse/<kind>） */
.kindchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0;
  list-style: none;
}

.kindchip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.kindchip:hover {
  border-color: var(--link);
  color: var(--link);
}

.kindchip--on {
  border-color: var(--brand);
  background: var(--brand-weak);
  font-weight: 600;
}

.kindchip__count {
  color: var(--text-faint);
  font-size: var(--fs-xs);
}

.page__title {
  margin: 4px 0 0;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--text);
}

a.card__name:hover {
  color: var(--link);
}

.card__body {
  grid-column: 1 / 2;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

/* 风险徽章：右栏里右对齐、必要时换行（它不再挤标题，也不再占标题的宽度） */
.card__risk {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
}

.card__actions {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: start;
  text-align: right;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.card__meta {
  grid-column: 1 / 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 4px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.card__links a::after {
  content: " ↗";
  font-size: 0.9em;
}

.card__fields {
  grid-column: 1 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.card__fields .k {
  color: var(--text-faint);
}

.card__fields .v {
  font-variant-numeric: tabular-nums;
}

.mini-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.mini-bar__track {
  width: 34px;
  height: 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.mini-bar__fill {
  display: block;
  height: 100%;
  background: var(--brand);
}

/* 筛选条：顶部 sticky + 横向滚动（窄屏） */
.filterbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  margin-bottom: 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.filterbar__label {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-weight: 500;
}

/* 没有外部源的分区：如实说明「这里是人工清单」，不留一片空白 */
.section__empty {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.65;
}

/* 二级分区（docs/06 §2.0.1）：一级分区回答「这是哪一层」，二级回答「同一层里属于哪一类」 */
.subsection {
  margin: 28px 0 0;
  scroll-margin-top: 72px; /* 锚点跳转时别被吸顶元素盖住 */
}

.subsec__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid var(--border-strong);
  padding-bottom: 8px;
}

.subsec__title {
  margin: 0;
  font-size: var(--fs-h3);
}

.subsec__count {
  font: 600 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: var(--text-faint);
}

.subsec__anchor {
  margin-left: auto;
  color: var(--text-faint);
  text-decoration: none;
  font-size: 12px;
}

.subsec__anchor:hover {
  color: var(--link);
}

.subsec__desc {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

/* 编辑综述（板块页语域）：左侧一条品牌色，与卡片清开 */
.subsec__intro {
  margin: 12px 0 0;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-left: 4px solid var(--brand);
  font-size: 13.5px;
  line-height: 1.75;
}

.subsec__intro > :first-child { margin-top: 0; }
.subsec__intro > :last-child { margin-bottom: 0; }
.subsec__intro p { margin: 0 0 8px; }
.subsec__intro ul,
.subsec__intro ol { margin: 0 0 8px; padding-left: 20px; }

.subsec__intro table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 8px;
  font-size: 13px;
}

.subsec__intro th,
.subsec__intro td {
  border: 1px solid var(--border);
  padding: 5px 8px;
  text-align: left;
}

.subsection .cards { margin-top: 12px; }

/* 分区扩展的首屏块（docs/13）：基础格式之外的「这一类最该先看到的东西」 */
.lead {
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-box);
  background: var(--bg-subtle);
  padding: 12px 14px;
}

.lead__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.lead__kind {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 1px 5px;
}

.lead__label {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.lead__code {
  margin: 0;
}

.lead__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.lead__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 14px;
}

.lead__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lead__k {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.lead__v {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   18. 提示条（草稿 / 归档 / 墓碑；docs/08 §1 原则 5、6）
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  margin: 10px 0;
  border: 1px solid var(--border-strong);
  border-left-width: 4px;
  border-radius: var(--r-box);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
}

.notice__icon {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.notice--warn {
  border-left-color: var(--warn);
}
.notice--warn .notice__icon {
  color: var(--warn);
}

.notice--danger {
  border-left-color: var(--danger);
}
.notice--danger .notice__icon {
  color: var(--danger);
}

.notice--unknown {
  border-left-color: var(--unknown);
}
.notice--unknown .notice__icon {
  color: var(--unknown);
}

.notice--ok {
  border-left-color: var(--ok);
}
.notice--ok .notice__icon {
  color: var(--ok);
}

/* 墓碑态 */
.tombstone {
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--danger);
  border-radius: var(--r-box);
  background: var(--bg-subtle);
}

.tombstone h1 {
  margin-bottom: 6px;
}

/* --------------------------------------------------------------------------
   19. 关系（按版本段分组，失效的标灰）
   -------------------------------------------------------------------------- */

.relgroup {
  margin-bottom: 12px;
}

.relgroup__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.relgroup--stale .relgroup__head {
  color: var(--text-faint);
  font-weight: 500;
}

.rellist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rellist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}

.rellist li:last-child {
  border-bottom: 0;
}

.rellist .reltype {
  min-width: 64px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.rellist .relnote {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 失效关系标灰（保留，不删除） */
.is-stale {
  color: var(--text-faint);
}

.is-stale a {
  color: var(--text-faint);
}

.relgroup--stale .reltype {
  color: var(--text-faint);
}

/* --------------------------------------------------------------------------
   20. 插件引用卡（docs/01 §4.2）
   -------------------------------------------------------------------------- */

.refcard {
  display: grid;
  gap: 4px;
  padding: 10px;
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  background: var(--bg);
}

.refcard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

.refcard__name {
  font-weight: 600;
}

.refcard__why {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: 0;
}

.refcard__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.refcard__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.refcard__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   21. 首页
   -------------------------------------------------------------------------- */

.hero {
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
}

.hero__name {
  font-size: var(--fs-h1);
  color: var(--text);
  margin: 0 0 4px;
}

.hero__tagline {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.hero__search {
  max-width: 560px;
}

.hero__search .search__input {
  padding: 8px 12px;
  font-size: var(--fs-base);
}

.hero__stats {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.section {
  margin-top: 24px;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--border-strong);
}

.section__head h2 {
  margin: 0;
  font-size: var(--fs-h3);
}

.section__note {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.zonegrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zonecard {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-box);
  color: var(--text);
}

.zonecard:hover {
  border-color: var(--brand);
  background: var(--bg-subtle);
  text-decoration: none;
}

.zonecard__name {
  display: block;
  font-weight: 600;
  color: var(--brand);
}

.zonecard__desc {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.zonecard__count {
  float: right;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.updatelist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.updatelist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}

.updatelist li:last-child {
  border-bottom: 0;
}

.updatelist .when {
  margin-left: auto;
  color: var(--text-faint);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.updatelist .kind {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  min-width: 36px;
}

/* --------------------------------------------------------------------------
   22. 侧栏与目录（吸顶）
   -------------------------------------------------------------------------- */

.aside {
  display: grid;
  gap: 12px;
  align-content: start;
}

.toc {
  padding: 0;
}

.toc__list {
  margin: 0;
  padding: 6px 10px 8px;
  list-style: none;
  font-size: var(--fs-sm);
}

.toc__list li {
  margin: 2px 0;
}

.toc__list a {
  color: var(--link);
}

.toc__list .lvl3 {
  padding-left: 14px;
  font-size: var(--fs-xs);
}

.toc__empty {
  padding: 8px 10px;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}

/* 默认折叠的二级分区（docs/02 分区文件契约的 collapsed）：主体要留内边距，
   因为里面的 .cards 自带 margin/padding: 0；边框与 summary 样式复用 details.collapse。 */
/* 维护者名册（maintainers.html）：头像用"字母垫底 + 图片盖上去"，
   这样 GitHub 头像取不到时退化成一个字母，不会出现破图。 */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.roster__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
}

.roster__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-weak);
}

.roster__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--brand);
}

.roster__avatar img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.roster__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.roster__name {
  font-weight: 600;
}

.roster__count,
.roster__entries {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.subsec__foldbody {
  padding: 10px 12px;
}

details.collapse {
  border: 1px solid var(--border);
  border-radius: var(--r-box);
}

details.collapse > summary {
  padding: 6px 10px;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--r-box);
}

details.collapse[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: var(--r-box) var(--r-box) 0 0;
}

/* --------------------------------------------------------------------------
   23. 页脚（docs/08 §8.5）
   -------------------------------------------------------------------------- */

.footer {
  margin-top: 32px;
  padding: 16px 12px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.footer__inner {
  max-width: 1760px;
  margin: 0 auto;
  display: grid;
  gap: 4px;
}

.footer__line {
  margin: 0;
}

.footer__eco {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__eco a::after {
  content: " ↗";
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   24. 加载与错误
   -------------------------------------------------------------------------- */

.loading {
  padding: 16px 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.loaderror {
  max-width: var(--max-prose);
}

/* --------------------------------------------------------------------------
   25. 断点（docs/08 §4）
   < 768px：单栏、目录折叠、信息表在标题下方、筛选条横向滚动
   768–1279px：正文 + 信息表（信息表移到正文上方）、卡片两列
   ≥ 1280px：左导航 240 / 正文 / 信息表 + 目录 280 吸顶、卡片两列
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  /* 窄屏：侧栏是浮层，宽度按视口收窄（正文不被推开） */
  :root {
    --w-rail: min(82vw, 300px);
  }

  .search {
    flex: 1 1 120px;
  }

  .search__panel {
    min-width: 0;
    left: auto;
    right: 0;
    width: min(92vw, 360px);
  }

  .filterbar {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .filterbar .tagset {
    flex-wrap: nowrap;
  }

  .card {
    grid-template-columns: 1fr;
  }

  /* 风险徽章：右栏里右对齐、必要时换行（它不再挤标题，也不再占标题的宽度） */
.card__risk {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 8px;
}

.card__actions {
    grid-row: auto;
    grid-column: 1 / 2;
    text-align: left;
    margin-top: 4px;
  }

  .card__fields,
  .card__meta,
  .card__body {
    grid-column: 1 / 2;
  }

  .hero__tagline {
    font-size: var(--fs-base);
  }

  /* 窄屏：长表格允许横向滚动，首列不吸顶（否则吃掉半屏） */
  table.data th,
  table.data td {
    padding: 4px 6px;
  }
}

@media (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zonegrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 768–1279：信息表移到正文上方（DOM 中它在 main 之后，用 order 提前） */
@media (min-width: 768px) and (max-width: 1279px) {
  .entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-grid__aside {
    order: -1;
  }
}

@media (min-width: 1024px) {
  /* 1024–1279：正文 + 信息表仍在同一条线上，但信息表在 DOM 之后 */
  .entry-grid {
    grid-template-columns: minmax(0, 1fr) var(--w-aside);
    gap: 24px;
  }

  .entry-grid__main {
    min-width: 0;
  }

  .zonegrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .layout {
    padding: 0 20px 40px;
  }

  /* 两栏：正文 / 信息表 + 目录（吸顶） */
  .entry-grid {
    grid-template-columns: minmax(0, 1fr) var(--w-aside);
    gap: 24px;
  }

  .entry-grid__aside {
    order: 0;
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .zonegrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   侧栏与正文的联动
   ≥1100px：侧栏常驻，把正文往右推；<1100px：侧栏浮层覆盖，正文宽度不变
   -------------------------------------------------------------------------- */

/* 收起后：正文顶部让出 48px 给「展开导航」按钮。
   不做浮层覆盖——覆盖式的把手会压住页面标题（实测在 1440 与 390 宽下都会挡住 h1）。 */
html.rail-collapsed body {
  padding-top: 48px;
}

body {
  transition: padding-top var(--rail-dur) var(--rail-ease),
    padding-left var(--rail-dur) var(--rail-ease);
}

@media (min-width: 1100px) {
  body {
    padding-left: var(--w-rail);
  }

  html.rail-collapsed body {
    padding-left: 0;
  }
}

@media (max-width: 1099px) {
  .masthead {
    box-shadow: 0 0 24px rgb(0 0 0 / 0.18);
  }

  html:not(.rail-collapsed) .rail-backdrop {
    display: block;
  }
}

/* 侧栏吃掉 180px（外加 .layout 的 40px 内边距）：词条页三栏需要内容区 ≥ 1280px，
   也就是视口 ≥ 1500px 才放得下。1280–1499 之间收掉词条页自己的左栏（位置与侧栏重复，
   内容仍可从「相关」进入正文流）；侧栏收起后正文重新变宽，这套降级同时撤销。 */
/* 1280 起就是两栏（正文 + 信息栏），侧栏展开时也不再需要专门降级：
   「相关」已经并进信息栏，词条页没有自己那一栏要与侧栏抢宽度了。 */

/* 打印：侧栏、把手、遮罩都不出现，正文铺满 */
@media print {
  .masthead,
  .rail-reopen,
  .rail-backdrop {
    display: none !important;
  }

  body {
    padding-left: 0 !important;
  }
}

/* 打印与减少动效 */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   视觉升级 v1（docs/08 §4）
   --------------------------------------------------------------------------
   集中放在文件末尾**覆盖**前面的组件规则：同优先级后者胜，所以这一整块可以
   整体删掉回退，也不会散进原有规则里难以维护。

   改的是"现代化"里真正影响观感的四件事：圆角、阴影、过渡、焦点环。
   没有引入任何框架、也没有引入网络字体——观感来自这些细节，不来自 React。
   ========================================================================== */

:root {
  --r-box: 10px;
  --r-card: 12px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 6px 16px rgba(16, 24, 40, 0.09), 0 2px 5px rgba(16, 24, 40, 0.05);
  --dur-fast: 0.14s;
  --dur: 0.2s;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* 面上的容器：大圆角；需要层次的给柔和阴影（正文里的引用块/代码块只给圆角，避免"到处浮起来"） */
.card,
.zonecard,
.box,
.lead,
.refcard,
.completeness,
.notice,
.dropzone,
.codeblock,
.subsec__intro {
  border-radius: var(--r-card);
}

.card,
.zonecard,
.box,
.refcard,
.completeness,
.dropzone {
  box-shadow: var(--shadow-1);
}

/* 交互元素统一过渡：悬停不再"硬跳" */
.card,
.zonecard,
.kindchip,
.tag,
.badge,
.btn,
.icon-btn,
.tabs__btn,
.toc__list a,
.zones__list a,
.search__hit {
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

/* 卡片悬停：轻微抬升（1px 就够，多了会晃） */
.card:hover,
.zonecard:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* 标签 / 徽章 / 按钮：胶囊化 */
.tag,
.badge,
.kindchip,
.btn {
  border-radius: var(--r-pill);
}

button.tag:hover,
.btn:hover {
  border-color: var(--border-strong);
  background: var(--bg-inset);
}

/* 排版：正文松一点、标题字距收一点 */
body {
  line-height: 1.72;
}

.titlebar h1,
.pagehead h1 {
  letter-spacing: -0.01em;
}

.section__head h2,
.subsec__title {
  letter-spacing: -0.005em;
}

/* 区块之间更透气；卡片内边距略放大 */
.subsection {
  margin-top: 36px;
}

.card {
  padding: 12px 14px;
}

/* 链接：下划线留一点距离，不再贴着字 */
.prose a,
.crumbs a,
.footer a,
.infotable dd a,
.toc__list a {
  text-underline-offset: 2px;
}

/* 焦点环：键盘用户看得见（鼠标点击不出现） */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 信息表：只留细分隔线，弱化硬边框感 */
.infotable__row {
  border-bottom: 1px solid var(--border);
}

/* 深色模式：阴影在暗底上几乎看不见，换成更深、更收敛的两档 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   视觉升级 v1.1：卡片层次（评审：卡片还不是很明显）
   --------------------------------------------------------------------------
   根因不是圆角，而是**白卡贴白底**：body 与 .card 都用 var(--bg)（#fff），
   两者之间只剩一根 1px 边框 → 卡片没有"面"的感觉。
   修法是把"页面底色"与"卡片的面色"分成两个令牌，白面浮在浅灰底上；
   阴影做层次，边框退到几乎看不见（只做兜底）。
   ========================================================================== */

:root {
  --bg-page: #e3e9f2;
  /* 左侧导航栏的「面」。原先是直接借 --bg（与卡片同色），暗色下就分不开了：
     卡片要回到主题色，而侧栏要留在中性黑灰 #14171a，所以它必须有自己的令牌。
     亮色下就是 --bg（白），行为与改动前一致。 */
  --bg-rail: var(--bg);
  --card-border: transparent;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.08), 0 10px 26px rgba(16, 24, 40, 0.13);
  --shadow-card-hover: 0 4px 10px rgba(16, 24, 40, 0.16), 0 20px 44px rgba(16, 24, 40, 0.20);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0f1215;
    --card-border: rgba(255, 255, 255, 0.09);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg-page: #0f1215;
  --card-border: rgba(255, 255, 255, 0.09);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.6);
}

body {
  background: var(--bg-page);
}

/* 卡片与盒子：白面 + 更强阴影 + 几乎看不见的边框 */
.card,
.zonecard,
.box,
.lead,
.refcard,
.completeness,
.dropzone {
  background: var(--bg);
  border-color: var(--card-border);
  box-shadow: var(--shadow-card);
}

.card:hover,
.zonecard:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
  transform: translateY(-2px);
}

/* 卡片之间拉开一点，层次才看得出来 */
.cards {
  gap: 16px;
}

.card {
  padding: 16px 18px;
}

/* 卡片标题更醒目：它现在是一张"面"的主标题，不是列表项 */
.card__name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

/* 分区页的二级分区卡片同样处理（首页用的是 .zonecard） */
.zonecard {
  padding: 12px 14px;
}

/* ==========================================================================
   配色 v2：以品牌青绿为主色调（评审：灰底太难看了；参考 knotlink.cn 的高级感）
   --------------------------------------------------------------------------
   学的是**方法**不是色相：① 底色带主色倾向，不用中性灰；② 主色只做低透明度
   辉光（chip/hover/选中态），不做大面积实底；③ 文字阶梯也带一点冷暖偏移。
   主色沿用站点既有的青绿（站点身份），所以**改 --brand 一处，整套跟着走**。
   ========================================================================== */

:root {
  /* 主色（改这一处即可整体换色） */
  --brand: #0f7a70;
  --brand-weak: #e2f2f0;
  --brand-tint: rgba(15, 122, 112, 0.08);
  --brand-tint-strong: rgba(15, 122, 112, 0.16);

  /* 底：带青绿倾向的浅面，而不是中性灰 */
  --bg-page: #edf3f3;
  --bg: #ffffff;
  --bg-subtle: #f2f7f7;
  --bg-inset: #e6eeee;

  /* 边框：比底色深一点点的同色系 */
  --border: #dae6e5;
  --border-strong: #c2d2d0;

  /* 文字：带一点冷青，不纯灰 */
  --text: #16272b;
  --text-muted: #556a6d;
  --text-faint: #7d8f92;

  /* 链接：与主色同族但可区分 */
  --link: #0e7490;
  --link-visited: #7c5cbf;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3fd0bd;
    --brand-weak: #10312c;
    --brand-tint: rgba(63, 208, 189, 0.1);
    --brand-tint-strong: rgba(63, 208, 189, 0.2);

    /* 深底带青绿倾向（不是中性炭灰）——knotlink 那种"蓝黑"换成我们的"青黑" */
    --bg-page: #0a1413;
    --bg: #111c1b;
    --bg-subtle: #16211f;
    --bg-inset: #1c2927;

    --border: #23332f;
    --border-strong: #33473f;

    --text: #e3ecea;
    --text-muted: #a2b3b0;
    --text-faint: #7a8b89;

    --link: #67c9dd;
    --link-visited: #b9a3f0;
  }
}

:root[data-theme="dark"] {
  --brand: #3fd0bd;
  --brand-weak: #10312c;
  --brand-tint: rgba(63, 208, 189, 0.1);
  --brand-tint-strong: rgba(63, 208, 189, 0.2);
  --bg-page: #0a1413;
  --bg: #111c1b;
  --bg-subtle: #16211f;
  --bg-inset: #1c2927;
  --border: #23332f;
  --border-strong: #33473f;
  --text: #e3ecea;
  --text-muted: #a2b3b0;
  --text-faint: #7a8b89;
  --link: #67c9dd;
  --link-visited: #b9a3f0;
}

/* 主色辉光：选中/悬停用它，而不是把按钮涂成实心色块 */
.tag--on,
.tag[aria-pressed="true"],
.kindchip--on {
  background: var(--brand-tint-strong);
  border-color: var(--brand);
  color: var(--brand);
}

.card:hover,
.zonecard:hover {
  border-color: var(--brand-tint-strong);
}

/* 侧栏当前分区：品牌色淡底胶囊（原来只有左侧色条） */
.zones__list a[aria-current="page"] {
  background: var(--brand-tint);
}

/* ==========================================================================
   预渲染块（P0，docs/10 §7）：无 JS 时它就是正文，所以给它和正文一致的排版与边距。
   有 JS 时它在 boot() 里被移除，用户看不到这一层。 */
.prerender {
  max-width: var(--max-prose);
}

.prerender__en {
  margin: 0 0 8px;
}

.prerender dl {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 4px 12px;
  margin: 0;
}

.prerender dt {
  color: var(--text-muted);
}

.prerender dd {
  margin: 0;
}

/* ==========================================================================
   视觉升级 v1.2：三处一致性问题（评审逐条指出）
   ========================================================================== */

/* ① 首页分区卡片：撑满网格单元，否则同一行的卡片高度参差（白卡比格子矮） */
.zonegrid > li {
  display: flex;
}

.zonecard {
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 分区名与条数在卡片顶端一行对齐，简介自己长 */
.zonecard__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

/* ② 分区页的筛选条：用页面底色而不是白，免得灰底上贴一坨白矩形；
   它是 sticky 的，所以不能透明（否则滚动内容会从底下穿出来） */
.filterbar {
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}

/* ③ 词条右栏 */
/* ③-a 别再拉伸：内容多高就多高（相关框只有一行就别占一大片） */
.entry-grid__aside {
  align-content: start;
}

.entry-grid__aside > * {
  align-self: start;
  height: auto;
}

/* ③-b 面底统一：右栏所有盒子都是白面 + 细边框，层次用边框与间距表达，
   而不是"这个淡底那个白底"（原来 .completeness 淡底、.box 白底、
   .infotable__grouphead 又淡底，三种面挤在一栏里） */
.completeness {
  background: var(--bg);
  padding: 10px 12px;
}

.box__head,
.infotable__grouphead {
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.box__body {
  padding: 10px 12px;
}

/* ③-c 信息表的分组线更轻，别在盒子里再画一层重框 */
.infotable {
  border-top: 0;
}

.infotable__group + .infotable__group {
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   跟随光标的吉祥物（大肥鱼）：docs/08 §9
   光标本身**不动**（系统指针照旧），吉祥物是跟在光标后面的宠物：所以第一要务是
   pointer-events: none —— 它绝不能挡点击、选字与滚动。
   素材是第三方的（作者 YunYueSama，大肥鱼项目署名许可 1.0）：来源、许可与我们
   所做的修改见 web/mascot-CREDITS.txt 与 docs/third-party/。
   分两半，各管一件事：位置、镜像、前倾在 .mascot 上（JS 算），换帧在 .mascot__sprite 上
   （CSS 做），互不覆盖 transform。
   ========================================================================== */

.mascot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20; /* 内容之上、左侧导航（30/40）之下：不许盖住导航 */
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
  will-change: transform;
}

.mascot--on {
  opacity: 1;
}

/* 两套横排精灵：待机 6 帧（第 5 帧是眨眼）、行走 8 帧。
   anchor 取底边中点（margin-left = -半宽），所以换帧、换套、左右镜像时人物都不跳。 */
.mascot__sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 96px;
  margin-left: -48px;
  background-repeat: no-repeat;
  background-size: auto 96px; /* 素材每帧 192×192，按高度 96px 缩放 → 每帧正好 96px 宽 */
  background-image: url("mascot-fatfish-idle.png");
  animation: mascot-idle 2.4s steps(6) infinite;
}

.mascot--walk .mascot__sprite {
  background-image: url("mascot-fatfish-walk.png");
  animation: mascot-walk 640ms steps(8) infinite;
}

/* steps 让它老实停在整帧上，不做插值（插值会糊）；位移正好是「每帧宽 × 帧数」 */
@keyframes mascot-idle {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -576px 0;
  }
}

@keyframes mascot-walk {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -768px 0;
  }
}

/* 触摸设备没有「光标」，跟随只会变成一块乱飘的图；减少动态效果则是不该动的东西别动 */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .mascot {
    display: none;
  }
}

/* 分区页顶部的入口卡（分区文件的 `links`）：目前只有插件分区用它指向生态全景图 */
.zone-cta {
  margin: 14px 0 4px;
}

.zone-cta__link {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-box);
  background: var(--bg-subtle);
  text-decoration: none;
}

.zone-cta__link:hover {
  border-color: var(--brand);
  text-decoration: none;
}

.zone-cta__label {
  display: block;
  font-weight: 600;
  color: var(--brand);
}

.zone-cta__note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   正文的宽度利用（docs/08 §4）
   --------------------------------------------------------------------------
   实测（1440 视口）：内容区 1205px、正文列 901px，但 `.prose { max-width: 72ch }`
   = 591px → 正文列里**浪费 310px**，表格与代码块也被卡在 591px。

   不能简单放开限宽：591px 对 14px 中文 ≈ 每行 42 个全角字，已经是舒适行宽的上限，
   再宽读着累。所以分成两类处理：

     · **文字类**（p / ul / ol / blockquote / dl / 标题外的块）→ 仍然限 --max-prose，
       保证行宽舒适、段落边缘整齐；
     · **宽块**（table / pre / img / 数据框 / 卡片列表）→ 放开到正文列满宽，
       它们受益于宽度而不受行宽约束。
   ========================================================================== */

.prose {
  max-width: none;
}

.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > dl,
.prose > h2,
.prose > h3,
.prose > h4 {
  max-width: var(--max-prose);
}

/* 宽块：用满正文列（表格最明显——列多的时候 591px 会挤成一团） */
.prose > table,
.prose > pre,
.prose > figure,
.prose > img,
.prose > .table-wrap,
.prose > .codeblock,
.prose > .lead,
.prose > .subsec__intro,
.prose > .prerender__indexlinks {
  max-width: none;
}

.prose > table,
.prose > .table-wrap {
  width: 100%;
}

/* 数据框（信息表前的「要点」块一类）也用满 */
.entry-grid__main > .lead,
.entry-grid__main > .infotable,
.entry-grid__main > .box {
  max-width: none;
}

/* ==========================================================================
   宽度政策（修订）：按**内容角色**判定，挂在 `main` 上
   --------------------------------------------------------------------------
   上一版挂在 `.prose > …`（直接子元素）上，两处都不成立：

     · 词条正文外面有 `.prose`，分区页的正文**根本不在 `.prose` 里**
       （实测祖先链：p → .subsec__intro → .subsec__foldbody → details → section.subsection → main）；
     · 就算在 `.prose` 里，中间还夹着包裹层，直接子元素选择器够不着里面的段落。

   于是同一个站里出现多种宽度：词条段落 591px、分区页综述段落 1162px、分节说明 1194px、
   索引页又是另一种。修订版只认**正文区 `main`**（不再逐个列举容器类名——那一定会漏，
   这一版先漏的就是分区页），规则本身仍是按角色分：

     · **文字类**（p / blockquote / dl / h2–h4）→ 限 --max-prose，保证行宽舒适；
     · **列表**（ul / ol）→ **分情况**：正文容器里的列表是文字（限宽），页面级的列表是布局
       （首页「十二个一级分区」的网格、类型 chip 行……）→ 必须满宽；
     · **宽块**（table / pre / figure / img / 卡片列表 / 数据框 / 通知）→ 用满正文列；
     · **宽块内部的文字**（表格单元格、卡片说明）→ 跟着块走，不受行宽限制。

   本节放在文件末尾，靠同特异性下「后者胜」覆盖上面那套。 */
main :is(p, blockquote, dl, h2, h3, h4) {
  max-width: var(--max-prose);
}

/* 列表只在**正文容器**里限宽。上一版把 `ul` 与段落一起限了，于是首页那个网格
   （`ul.zonegrid`，12 个分区卡片）被压到 903px，而它所在的 section 是 1700px ——
   评审就是这么发现「十二个一级分区怎么变窄了」。 */
.prose :is(ul, ol),
.subsec__intro :is(ul, ol),
.prerender :is(ul, ol) {
  max-width: var(--max-prose);
}

main :is(table, pre, figure, img, .cards, .table-wrap, .codeblock, .infotable, .lead, .box, .notice) {
  max-width: none;
}

main :is(table, .table-wrap) {
  width: 100%;
}

main :is(table, pre, .cards, .infotable, .box, .notice) :is(p, ul, ol, li, h2, h3, h4) {
  max-width: none;
}