/* ============================================================
   帮助中心（独立模板，只依赖 style.css 的变量与站点外壳）
   页面：/en/help/（索引）+ /en/help/<slug>/（文章）
   ============================================================ */

body.help-shell { background: var(--bg); }

/* 帮助页没有左侧栏，胶囊导航按视口居中（其余页面按内容区居中） */
@media (min-width: 769px) {
  body.help-shell .pillnav { left: 50vw; }
}

/* 帮助页不加载 main.js，toggleSidebar() 不存在（theme.js 会静默跳过）→ 隐藏这个点了没反应的按钮 */
body.help-shell .sidebar-toggle { display: none; }

.help-wrap { max-width: 1120px; margin: 0 auto; padding: 100px 24px 70px; }

/* 文章页整条阅读列收窄到正文宽度（780 + 24×2），随 .help-wrap 一起居中；
   否则 780px 正文贴在 1120px 容器左缘，视口 ≥828px 时偏左 ~146px。
   索引页与 /pdf/ 归类页不含 .help-article，保持 1120px；:has() 不被支持则回落原状 */
.help-wrap:has(.help-article) { max-width: 828px; }

/* 面包屑：style.css 里的 .breadcrumb 规则限定在 .tool-container 下，这里单独定义 */
.help-wrap .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-mute); margin: 0 0 4px;
}
.help-wrap .breadcrumb a { color: var(--text-mute); text-decoration: none; transition: color 0.2s var(--ease); }
.help-wrap .breadcrumb a:hover { color: var(--accent); }
.help-wrap .breadcrumb .sep { color: var(--text-faint); }
.help-wrap .breadcrumb .cur { color: var(--text-soft); }

/* ---------------- 索引页 ---------------- */
.help-hero { padding: 18px 0 6px; }
.help-hero h1 { font-size: 34px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--text); }
.help-hero p { font-size: 15px; line-height: 1.65; color: var(--text-mute); margin: 0; max-width: 760px; }

.help-search { position: relative; max-width: 520px; margin: 24px 0 34px; }
.help-search .hs-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.45; pointer-events: none; }
.help-search input {
  width: 100%; padding: 13px 44px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 14px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.help-search input:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-bg); }
.help-search input::placeholder { color: var(--text-faint); }

.help-cat { margin-bottom: 34px; }
.help-cat-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-left: 12px;
  border-left: 4px solid var(--accent); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text);
}
.help-cat-icon { font-size: 17px; }
.help-count { background: var(--accent-bg); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; }

.help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.help-card {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.help-card:hover { transform: translateY(-3px); border-color: var(--border-hover); background: var(--surface-hover); }
.hc-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 9px; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.hc-body { display: block; min-width: 0; }
.hc-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--text); margin-bottom: 4px; }
/* 简介长度中英差 4 倍，卡片高度改由 CSS 定；文本留在 DOM 内供首页搜索过滤（card.textContent）命中 */
.hc-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.hc-arrow { margin-left: auto; color: var(--text-faint); font-size: 16px; transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.help-card:hover .hc-arrow { color: var(--accent); transform: translateX(4px); }
.help-empty { display: none; padding: 24px 0; font-size: 14px; color: var(--text-mute); }

/* ---------------- 文章页 ---------------- */
.help-article { max-width: 780px; }
.help-article-head { margin: 10px 0 24px; }
.help-article-head h1 { font-size: 30px; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text); }
.help-meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; color: var(--text-mute); }
.help-tag { background: var(--accent-bg); color: var(--accent); border-radius: 999px; padding: 3px 10px; font-weight: 500; }

.help-body { font-size: 15.5px; line-height: 1.75; color: var(--text-soft); }
.help-body h2 { font-size: 21px; line-height: 1.35; margin: 32px 0 12px; color: var(--text); }
.help-body h3 { font-size: 17px; line-height: 1.4; margin: 24px 0 10px; color: var(--text); }
.help-body p { margin: 0 0 14px; }
.help-body ul, .help-body ol { margin: 0 0 14px; padding-left: 22px; }
.help-body li { margin-bottom: 7px; }
.help-body strong { color: var(--text); }
.help-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.help-body code { background: var(--surface-hover); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.help-body pre { overflow-x: auto; }
.help-body pre code { white-space: pre-wrap; word-break: break-word; }
.help-body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.help-body th, .help-body td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; }
.help-body th { background: var(--surface); color: var(--text); font-weight: 600; }
.help-body > table { display: block; overflow-x: auto; }

.help-tools { margin: 36px 0 4px; max-width: 780px; }
.help-tools h2 { font-size: 16px; margin: 0 0 12px; color: var(--text); }

/* 分类归类页：指南区块底部的「查看全部指南」入口 */
.help-cat-more { margin: 14px 0 0; font-size: 14px; }
.help-cat-more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.help-cat-more a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .help-wrap { padding: 88px 16px 48px; }
  .help-hero h1 { font-size: 26px; }
  .help-article-head h1 { font-size: 23px; }
  .help-body { font-size: 15px; }
  .help-cards { grid-template-columns: 1fr; }
}