/* ============================================================
   fxdgrld.top · 全站共用组件 v1（依赖 tokens.css，请先引入它）
   ------------------------------------------------------------
   本文件只放跨页复用的东西。页面专属样式仍留在各页内联。
   放在 tokens.css 之后、页面内联 <style> 之前引入。
   ============================================================ */

/* ---------- 键盘可达性 ----------
   历史问题：首页内联样式里有全局 *{outline:none}，
   会让所有按钮失去焦点环。下面这条特异性更高，能覆盖它，
   但首页已同时删掉了那句 reset，双保险。 */
:focus-visible {
  outline: 2px solid var(--gold-hi, #e6c877);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 跨页导航条 ----------
   放在 <body> 最顶部，非 sticky：随页面滚走，不与各页已有的
   sticky 章节导航抢位置。解决「说明书进来就出不去」。 */
.site-nav {
  border-bottom: 1px solid var(--line, #3a3528);
  background: var(--bg, #0a0a0c);
  font-family: var(--font-text, sans-serif);
  font-size: .82rem;
}
.site-nav-inner {
  max-width: var(--content, 1080px);
  margin: 0 auto;
  padding: .55rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.1rem;
}
.site-nav a {
  color: var(--muted, #8a7e6a);
  text-decoration: none;
  letter-spacing: .04em;
  padding-block: .2rem;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.site-nav a:hover { color: var(--paper, #e8e0d0); border-bottom-color: var(--gold, #c8a84e); }
.site-nav a[aria-current="page"] { color: var(--gold, #c8a84e); }
.site-nav .sn-brand {
  margin-right: auto;
  color: var(--gold, #c8a84e);
  letter-spacing: .18em;
  border: 0;
}
.site-nav .sn-sep { color: var(--line, #3a3528); user-select: none; }

/* ---------- 通用卡片：取代四页各自的四种卡片皮 ---------- */
.card {
  background: var(--panel, #14120d);
  border: 1px solid var(--line, #3a3528);
  border-top: 2px solid var(--accent, var(--gold, #c8a84e));
  border-radius: var(--r-1, 2px);
  padding: var(--sp-4, 24px);
}

/* ---------- 表格横向滚动提示（仅窄屏） ---------- */
@media (max-width: 768px) {
  .table-wrap {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
  }
}

/* ---------- 四角括号母题：全站可辨识签名 ----------
   首页 .shot 用的四角括号抽出来，文档页的章头、封面也可用。 */
.frame-corners { position: relative; }
.frame-corners::before,
.frame-corners::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--gold, #c8a84e);
  pointer-events: none;
}
.frame-corners::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame-corners::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ---------- 正文行长：长文页统一用它 ---------- */
.prose p, .prose li { max-width: var(--reading, 42em); }