/* ==========================================================================
   澄清南北 · 公开规则书（/rules）
   依赖：tokens.css、base.css、components.css。
   气质：史官档案 —— 纸面底、宋体标题、左侧目录（卷/章）、正文行高 ≥1.7。
   移动端（≤1024px）目录收纳为左侧抽屉，由 rules.js 驱动 .is-open。
   ========================================================================== */

.rules-page {
  background:
    radial-gradient(circle at 85% 8%, var(--cqnb-map-tint-warm) 0 10%, transparent 11%),
    var(--cqnb-bg);
}

/* ---- 跳转链接（无障碍） ---- */
.rules-skip-link {
  position: absolute; left: -9999px; top: var(--cqnb-space-2); z-index: var(--cqnb-z-toast);
  padding: var(--cqnb-space-2) var(--cqnb-space-3);
  background: var(--cqnb-panel-raised); color: var(--cqnb-accent-strong);
  border: 1px solid var(--cqnb-line-strong); border-radius: var(--cqnb-radius);
}
.rules-skip-link:focus { left: var(--cqnb-space-2); }

/* ---- 卷首 ---- */
.rules-masthead {
  border-bottom: 1px solid var(--cqnb-line-strong);
  background: linear-gradient(var(--cqnb-panel), var(--cqnb-bg-soft));
}
.rules-masthead__inner {
  max-width: var(--cqnb-content-narrow); margin: 0 auto;
  padding: var(--cqnb-space-8) var(--cqnb-space-5) var(--cqnb-space-6);
}
.rules-kicker {
  margin: 0; color: var(--cqnb-muted);
  font-size: var(--cqnb-text-xs); font-weight: 700; letter-spacing: .22em;
}
.rules-masthead h1 {
  margin: var(--cqnb-space-1) 0 var(--cqnb-space-2);
  font-size: clamp(var(--cqnb-text-2xl), 4vw, 34px); letter-spacing: .06em;
}
.rules-intro { margin: 0; color: var(--cqnb-muted); }
.rules-home { margin: var(--cqnb-space-3) 0 0; font-size: var(--cqnb-text-sm); }

/* 版本与更新提示位：数据来自 public-rules.json 的版本字段；
   若数据带 changelog 则以列表展示更新摘要，否则仅呈现版本行。 */
.rules-version-banner {
  margin-top: var(--cqnb-space-4);
  padding: var(--cqnb-space-3) var(--cqnb-space-4);
  border: 1px solid var(--cqnb-line); border-left: 4px solid var(--cqnb-accent);
  border-radius: var(--cqnb-radius);
  background: var(--cqnb-accent-faint); color: var(--cqnb-ink-soft);
  font-size: var(--cqnb-text-sm); line-height: 1.7;
}
.rules-version-banner p { margin: 0; }
.rules-changelog { margin: var(--cqnb-space-1) 0 0; padding-left: 1.4em; }
.rules-changelog li + li { margin-top: 2px; }

/* ---- 主体：目录侧栏 + 正文 ---- */
.rules-shell {
  max-width: var(--cqnb-content-narrow); margin: 0 auto;
  padding: var(--cqnb-space-5) var(--cqnb-space-5) var(--cqnb-space-8);
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--cqnb-space-5); align-items: start;
}
.rules-main { min-width: 0; }

/* 目录侧栏：桌面 sticky 独立滚动 */
.rules-sidebar {
  position: sticky; top: var(--cqnb-space-4);
  max-height: calc(100vh - var(--cqnb-space-8));
  max-height: calc(100dvh - var(--cqnb-space-8));
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--cqnb-space-4);
  padding: var(--cqnb-space-4);
  background: var(--cqnb-panel); border: 1px solid var(--cqnb-line);
  border-radius: var(--cqnb-radius-lg); box-shadow: var(--cqnb-shadow-sm);
}
.rules-sidebar__head { display: none; }

/* 检索 */
.rules-search-label { display: block; font-size: var(--cqnb-text-sm); font-weight: 700; color: var(--cqnb-ink-soft); margin-bottom: var(--cqnb-space-1); }
.rules-search-row { display: flex; gap: var(--cqnb-space-2); }
.rules-search-row .cq-input { min-width: 0; flex: 1; }
.rules-help { margin: var(--cqnb-space-2) 0 0; font-size: var(--cqnb-text-xs); color: var(--cqnb-muted); line-height: 1.6; }

/* 分类筛选 chip（不只靠颜色：选中态同时加文字描边与填充） */
.rules-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--cqnb-space-3); }
.rules-category {
  min-height: 32px; padding: 3px 10px;
  border: 1px solid var(--cqnb-line-strong); border-radius: var(--cqnb-radius-pill);
  background: var(--cqnb-panel); color: var(--cqnb-neutral);
  font-size: var(--cqnb-text-xs); font-weight: 600; cursor: pointer;
  transition: background var(--cqnb-motion-fast), color var(--cqnb-motion-fast), border-color var(--cqnb-motion-fast);
}
.rules-category:hover { background: var(--cqnb-accent-faint); color: var(--cqnb-accent-strong); }
.rules-category[aria-pressed="true"] {
  background: var(--cqnb-accent); border-color: var(--cqnb-accent); color: var(--cqnb-on-accent);
}

/* 目录（卷/章） */
.rules-directory-section h2 { font-size: var(--cqnb-text-lg); margin: 0 0 var(--cqnb-space-2); }
.rules-directory-group { border-left: 3px solid var(--cqnb-line-strong); padding-left: var(--cqnb-space-3); }
.rules-directory-group + .rules-directory-group { margin-top: var(--cqnb-space-4); }
.rules-directory-group h3 {
  margin: 0; font-size: var(--cqnb-text-md); letter-spacing: .12em; color: var(--cqnb-accent-strong);
}
.rules-directory-group ul { list-style: none; margin: var(--cqnb-space-1) 0 0; padding: 0; }
.rules-directory-group li { line-height: 1.7; }
.rules-directory-group a {
  display: block; padding: 2px 0;
  color: var(--cqnb-ink-soft); font-size: var(--cqnb-text-sm); text-decoration: none;
}
.rules-directory-group a:hover { color: var(--cqnb-accent-strong); text-decoration: underline; }

/* ---- 概览 ---- */
.rules-overview {
  padding: var(--cqnb-space-4);
  background: var(--cqnb-panel); border: 1px solid var(--cqnb-line);
  border-radius: var(--cqnb-radius-lg); box-shadow: var(--cqnb-shadow-sm);
  margin-bottom: var(--cqnb-space-4);
}
.rules-overview h2 { font-size: var(--cqnb-text-lg); margin: 0 0 var(--cqnb-space-3); }
.rules-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cqnb-space-2); margin: 0; }
.rules-meta div {
  border-left: 3px solid var(--cqnb-accent); background: var(--cqnb-bg-soft);
  padding: var(--cqnb-space-2) var(--cqnb-space-3); border-radius: 0 var(--cqnb-radius-sm) var(--cqnb-radius-sm) 0;
}
.rules-meta dt { font-size: var(--cqnb-text-xs); color: var(--cqnb-muted); }
.rules-meta dd { margin: 1px 0 0; font-weight: 700; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.rules-result-status { margin: var(--cqnb-space-3) 0 0; font-weight: 700; color: var(--cqnb-ink-soft); }
.rules-cache-notice {
  margin: var(--cqnb-space-3) 0 0; padding: var(--cqnb-space-2) var(--cqnb-space-3);
  border-left: 4px solid var(--cqnb-warning); border-radius: var(--cqnb-radius-sm);
  background: var(--cqnb-warning-soft); color: var(--cqnb-warning); font-size: var(--cqnb-text-sm);
}

/* ---- 错误 ---- */
.rules-error {
  margin-bottom: var(--cqnb-space-4); padding: var(--cqnb-space-4);
  border: 1px solid var(--cqnb-danger); border-left-width: 4px; border-radius: var(--cqnb-radius-lg);
  background: var(--cqnb-danger-soft); color: var(--cqnb-danger);
}
.rules-error p { margin: 0; }
.rules-error p + p { margin-top: var(--cqnb-space-2); }
.rules-error-actions { display: flex; gap: var(--cqnb-space-2); flex-wrap: wrap; margin-top: var(--cqnb-space-3); }

/* ---- 规则卡片（正文行高 ≥1.7） ---- */
.rules-list-heading { font-size: var(--cqnb-text-xl); margin: 0 0 var(--cqnb-space-3); }
.rules-list { display: grid; gap: var(--cqnb-space-4); }
.rules-list[aria-busy="true"] { min-height: 120px; }
.rules-card {
  padding: var(--cqnb-space-5);
  background: var(--cqnb-panel); border: 1px solid var(--cqnb-line);
  border-radius: var(--cqnb-radius-lg); box-shadow: var(--cqnb-shadow-sm);
  scroll-margin-top: var(--cqnb-space-5);
  transition: border-color var(--cqnb-motion-fast), box-shadow var(--cqnb-motion-fast);
}
.rules-card:target, .rules-card.rules-highlight {
  border-color: var(--cqnb-accent);
  box-shadow: 0 0 0 3px var(--cqnb-accent-soft), var(--cqnb-shadow);
}
.rules-card h2 { font-size: var(--cqnb-text-xl); line-height: 1.4; margin: 0 0 var(--cqnb-space-2); }
.rules-card h2 a { color: inherit; text-decoration: none; }
.rules-card h2 a:hover { color: var(--cqnb-accent-strong); text-decoration: underline; }
.rules-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--cqnb-space-2); }
.rules-tag {
  padding: 2px 9px; border-radius: var(--cqnb-radius-pill);
  background: var(--cqnb-neutral-soft); color: var(--cqnb-neutral);
  font-size: var(--cqnb-text-xs); font-weight: 600;
}
.rules-summary { margin: 0; font-weight: 700; line-height: 1.7; }
.rules-aliases { margin: var(--cqnb-space-2) 0 0; color: var(--cqnb-muted); font-size: var(--cqnb-text-sm); line-height: 1.7; }
.rules-card-controls { display: flex; gap: var(--cqnb-space-2); flex-wrap: wrap; margin-top: var(--cqnb-space-3); }
.rules-details { border-top: 1px solid var(--cqnb-line); margin-top: var(--cqnb-space-4); padding-top: var(--cqnb-space-3); }
.rules-details h3 { font-size: var(--cqnb-text-md); margin: 0 0 var(--cqnb-space-2); color: var(--cqnb-accent-strong); }
.rules-details ul { margin: 0; padding-left: 1.4em; }
.rules-details li { line-height: 1.75; }
.rules-details li + li { margin-top: var(--cqnb-space-1); }
.rules-detail-block {
  margin-top: var(--cqnb-space-3); padding: var(--cqnb-space-2) var(--cqnb-space-3);
  border-left: 3px solid var(--cqnb-accent); border-radius: 0 var(--cqnb-radius-sm) var(--cqnb-radius-sm) 0;
  background: var(--cqnb-bg-soft); overflow-wrap: anywhere;
}
.rules-detail-block h3 { margin: 0 0 2px; }
.rules-detail-block p { margin: 0; white-space: pre-wrap; line-height: 1.7; }
.rules-card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cqnb-space-3); margin-top: var(--cqnb-space-4); }
.rules-card-footer small { color: var(--cqnb-muted); overflow-wrap: anywhere; }
.rules-copy-fallback {
  display: block; max-width: 100%; min-width: min(100%, 260px);
  border: 1px solid var(--cqnb-line-strong); border-radius: var(--cqnb-radius-sm);
  background: var(--cqnb-panel-raised); padding: 6px; color: inherit; font: inherit;
}

/* ---- 空态 ---- */
.rules-empty {
  margin: 0; padding: var(--cqnb-space-6) var(--cqnb-space-4);
  border: 1px dashed var(--cqnb-line-strong); border-radius: var(--cqnb-radius-lg);
  background: var(--cqnb-bg-soft); color: var(--cqnb-muted);
}
.rules-empty h2 { font-size: var(--cqnb-text-lg); margin: 0 0 var(--cqnb-space-2); color: var(--cqnb-ink-soft); }
.rules-empty ul { margin: var(--cqnb-space-1) 0 0; padding-left: 1.4em; }

/* ---- 页脚链接 ---- */
.rules-footer-links { display: flex; justify-content: space-between; gap: var(--cqnb-space-4); margin: var(--cqnb-space-6) 0 0; }

/* ---- 移动端目录抽屉（≤1024px） ---- */
.rules-toc-open { display: none; }
.rules-overlay { display: none; }

@media (max-width: 1024px) {
  .rules-shell { grid-template-columns: minmax(0, 1fr); }
  .rules-toc-open {
    display: inline-flex; position: sticky; top: var(--cqnb-space-2); z-index: var(--cqnb-z-sticky);
    box-shadow: var(--cqnb-shadow);
  }
  .rules-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--cqnb-z-modal);
    width: min(360px, 92vw); max-height: none;
    border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;
    box-shadow: var(--cqnb-shadow-lg);
    transform: translateX(-105%);
    transition: transform var(--cqnb-motion-slow);
  }
  .rules-sidebar.is-open { transform: translateX(0); }
  .rules-sidebar__head {
    display: flex; align-items: center; gap: var(--cqnb-space-3);
    padding-bottom: var(--cqnb-space-2); border-bottom: 1px solid var(--cqnb-line);
  }
  .rules-sidebar__title { font-family: var(--cqnb-font-title); font-size: var(--cqnb-text-lg); font-weight: 700; }
  .rules-sidebar__head .cq-btn { margin-left: auto; }
  .rules-overlay {
    display: block; position: fixed; inset: 0; z-index: var(--cqnb-z-overlay);
    background: rgba(43, 38, 32, .45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--cqnb-motion);
  }
  .rules-overlay.is-open { opacity: 1; pointer-events: auto; }
}

@media (max-width: 768px) {
  .rules-masthead__inner { padding: var(--cqnb-space-6) var(--cqnb-space-4) var(--cqnb-space-5); }
  .rules-shell { padding: var(--cqnb-space-3) var(--cqnb-space-3) var(--cqnb-space-6); }
  .rules-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-card { padding: var(--cqnb-space-4); }
  .rules-search-row { flex-direction: column; }
  .rules-footer-links { flex-direction: column; gap: var(--cqnb-space-2); }
}

/* ---- 动效降级 ---- */
@media (prefers-reduced-motion: reduce) {
  .rules-sidebar, .rules-overlay, .rules-card, .rules-category, .leader-card { transition: none; }
}

/* 公开领袖目录：史官档案式卡片，内容层级与规则页保持一致。 */
.leaders-page { background: linear-gradient(180deg, rgba(154,123,45,.09), transparent 300px), var(--cqnb-bg, #f5f2e9); }
.leaders-shell { max-width: 1160px; margin: 0 auto; padding: var(--cqnb-space-6, 24px) var(--cqnb-space-5, 20px) var(--cqnb-space-8); }
.leaders-directory { border: 1px solid var(--cqnb-line, rgba(43,38,32,.14)); border-radius: 20px; background: rgba(255,255,255,.7); box-shadow: 0 18px 42px rgba(43,38,32,.08); overflow: hidden; }
.leaders-directory__intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 28px 30px 22px; border-bottom: 1px solid var(--cqnb-line, rgba(43,38,32,.14)); background: linear-gradient(118deg, rgba(51,86,107,.08), rgba(154,123,45,.1)); }
.leaders-directory__eyebrow, .leader-card__ordinal { margin: 0; color: var(--cqnb-gold, #9a7b2d); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.leaders-directory__intro h2 { margin: 5px 0 7px; color: var(--cqnb-ink, #2b2620); font-size: clamp(22px, 3vw, 30px); letter-spacing: .08em; }
.leaders-directory__intro p:not(.leaders-directory__eyebrow) { margin: 0; color: var(--cqnb-ink-soft, #655e55); line-height: 1.7; }
.leaders-directory__count { flex: 0 0 auto; margin: 0; padding: 8px 12px; border: 1px solid rgba(154,123,45,.36); border-radius: 999px; color: var(--cqnb-gold, #9a7b2d); background: rgba(255,255,255,.6); font-size: 13px; font-weight: 700; white-space: nowrap; }
.leaders-search { margin: 20px 30px 22px; }
.leaders-search .cq-input { width: 100%; max-width: 480px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--cqnb-line-strong); background: var(--cqnb-panel-raised); font-size: var(--cqnb-text-sm); }
.leaders-search .cq-input:focus { outline: none; border-color: var(--cqnb-accent); box-shadow: 0 0 0 3px var(--cqnb-accent-faint); }

.leaders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; padding: 0 30px 30px; }

.leader-card {
  position: relative;
  background: var(--cqnb-panel-raised, #fff);
  border: 1px solid var(--cqnb-line, rgba(43,38,32,.14));
  min-height: 170px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.leader-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(43,38,32,.13); border-color: var(--cqnb-line-strong); }
.leader-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--cqnb-gold, #9a7b2d), var(--cqnb-accent, #33566b));
}
.leader-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 10px 22px; }
.leader-card__head h3 { margin: 3px 0 0; font-family: Georgia, 'Songti SC', serif; font-size: 23px; letter-spacing: .11em; color: var(--cqnb-ink); }
.leader-card__count { color: var(--cqnb-gold, #9a7b2d); font-size: var(--cqnb-text-xs); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
.leader-card__tags { padding: 0 22px 11px; display: flex; flex-wrap: wrap; gap: 7px; }
.leader-card__tag { font-size: 12px; padding: 4px 10px; border: 1px solid rgba(51,86,107,.14); border-radius: 999px; background: var(--cqnb-accent-faint); color: var(--cqnb-accent-strong); font-weight: 700; }
.leader-card__body { margin: 0 12px 12px 22px; padding: 0 10px 0 0; border-top: 1px dashed var(--cqnb-line, rgba(43,38,32,.14)); }
.leader-card__body summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; color: var(--cqnb-accent); font-weight: 700; font-size: var(--cqnb-text-sm); padding: 11px 0 7px; }
.leader-card__body summary::before { content: '▸ '; color: var(--cqnb-gold); }
.leader-card__body[open] summary::before { content: '▾ '; }
.leader-card__body summary::-webkit-details-marker { display: none; }
.leader-card__summary-hint { color: var(--cqnb-ink-soft); font-size: 12px; font-weight: 500; }
.leader-card__body[open] .leader-card__summary-hint { font-size: 0; }
.leader-card__body[open] .leader-card__summary-hint::after { content: '收起'; font-size: 12px; }
.leader-card__skills { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 4px; }
.leader-skill { border-left: 2px solid var(--cqnb-line-faint, rgba(43,38,32,.1)); padding: 2px 0 2px 12px; }
.leader-skill__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.leader-skill b { font-size: var(--cqnb-text-md); color: var(--cqnb-ink); }
.leader-skill__kind { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: .04em; }
.leader-skill__kind.is-active { background: var(--cqnb-warning-soft); color: var(--cqnb-warning); }
.leader-skill__kind.is-passive { background: var(--cqnb-accent-faint); color: var(--cqnb-accent-strong); }
.leader-skill__kind.is-formation { background: var(--cqnb-accent-faint); color: var(--cqnb-accent-strong); }
.leader-skill__desc { margin: 5px 0 0; color: var(--cqnb-ink-soft); font-size: var(--cqnb-text-sm); line-height: 1.75; }

@media (max-width: 480px) {
  .leaders-shell { padding: 14px 12px 28px; }
  .leaders-directory { border-radius: 14px; }
  .leaders-directory__intro { display: block; padding: 21px 18px 17px; }
  .leaders-directory__count { display: inline-block; margin-top: 13px; white-space: normal; }
  .leaders-search { margin: 16px 18px 18px; }
  .leaders-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 18px 20px; }
  .leader-card__head { padding: 14px 16px 8px 18px; }
  .leader-card__body { margin: 0 10px 10px 18px; }
}