/* ═══════════════════════════════════════════════════════════════════════
   人生探微 · 基础层
   ─────────────────────────────────────────────────────────────────────
   重置 + 排版 + 版面骨架 + 无障碍底座。
   写法：基准样式按手机（390×844）写，@media (min-width:900px) 才是桌面增强。
        不是"桌面塌成一列"。
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ── hidden 必须真的能藏住东西 ──────────────────────────────────────
   ★ 这是踩过的坑：我给 .split 写了 display:grid，而 [hidden] 的
     display:none 只是浏览器的默认样式——作者样式永远压过默认样式，
     于是 hidden 属性形同虚设，五个板块全部叠在一起渲染。
   一条 !important 解决，且必须放在最前面，越早生效越好。 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 防横向溢出，但用 clip 而不是 hidden：hidden 会建立滚动容器，
     把 position:fixed / absolute 的子元素一起裁掉（抽屉、弹窗、提示条
     都可能被切）。clip 只裁不建容器，不会伤到浮层。 */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100dvh;                 /* dvh 而非 vh：iOS 地址栏收起时不会跳 */
  background-color: var(--paper);
  /* 纸底：极淡的三段渐变 + 一层纤维噪点。
     不加噪点的话大面积浅色会显得"塑料"——这是纸墨方向的关键一层。 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.055'/></svg>"),
    linear-gradient(180deg, var(--paper-hi) 0%, var(--paper) 45%, var(--paper-lo) 100%);
  color: var(--ink);
  font: 400 var(--t-md)/var(--lh-body) var(--font-sans);
  font-variant-numeric: tabular-nums;  /* 动态数字不跳动 */
  -webkit-font-smoothing: antialiased;
  /* 只有底栏这一份底部留白，不再叠加第二份 */
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
/* 纸面的三段微渐变端点。放在 tokens 之外，因为只有 body 用。 */
:root { --paper-hi: #EAECE4; --paper-lo: #ECEEE6; }
html.dark { --paper-hi: #121019; --paper-lo: #0b0a10; }

/* ── 排版 ─────────────────────────────────────────────────────────────
   中文正文一律不加字距（原站在 101 处写了 letter-spacing:1px、
   84 处写 2px，正文被拉得很难读）。字距只留给短标签。 */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;                  /* 标题不留孤字 */
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* 短标签才用宽字距——这是字距唯一正当的用法 */
.label {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  color: var(--ink-mid);
}

/* 数字要用等宽，否则倒计时/积分跳动时会左右晃 */
.num, time, .tabular { font-variant-numeric: tabular-nums; }

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

/* ── 无障碍底座 ────────────────────────────────────────────────────── */

/* 键盘用户直达主内容。视觉上藏起来，聚焦时才出现。 */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: calc(var(--z-toast) + 10);
  background: var(--ink);
  color: var(--ink-invert);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-2) 0;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* 焦点环统一走朱砂。用 :focus-visible——鼠标点击不显示，键盘才有。
   绝不用裸的 outline:none（原站有 6 处这么写，键盘用户会完全失去焦点提示）。 */
:focus-visible {
  outline: 2px solid var(--cinnabar);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* 只在真的没有替代方案时才藏掉默认轮廓，且必须立刻给出替代 */
.no-outline:focus { outline: none; }
.no-outline:focus-visible { outline: 2px solid var(--cinnabar); outline-offset: 2px; }

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

/* 吸顶栏会盖住锚点落位，留出空间 */
[id] { scroll-margin-top: calc(var(--s-9) + 8px); }

/* ── 版面骨架 ──────────────────────────────────────────────────────── */

/* 内容容器。原站是 200px 侧栏 + 80px 内边距 + 700px 定宽列，
   在 1440 屏上 47% 的宽度是空白。这里改成通栏容器。 */
.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-4);
}

/* 堆叠节奏：子元素之间统一间距，避免逐处写 margin */
.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* 两栏：手机单列，桌面分栏 */
.cols { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .cols-2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .cols-main-side { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); }
}

/* ── 桌面增强 ──────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  body { padding-bottom: 0; }          /* 桌面没有底栏 */
  .wrap { padding: 0 var(--s-6); }
}

/* ── 打印：去掉纸纹与底栏，省墨 ─────────────────────────────────────── */
@media print {
  body { background: #fff; padding: 0; }
  body::before { display: none; }
  .tabbar, .appbar, .no-print { display: none !important; }
}


/* ═══ 中英双语 ═══════════════════════════════════════════════════════
   沿用旧站的约定：正文里中文包 .zh、英文包 .en，靠 <html> 上的 lang-en
   类名切换。条款、免责这类法律文本是双语的，英文那份不能丢——
   它是给海外用户和搜索引擎看的。
   默认显示中文（无 lang-en 类）。 */
html:not(.lang-en) .en { display: none !important; }
html.lang-en .zh { display: none !important; }

/* ═══ 长文页排版 ═════════════════════════════════════════════════════
   条款、免责声明这类整页文字。字号比正文略大、行高更松、
   行宽收在 34em 以内——长段落的中文一超过这个宽度就很难跟行。 */
.doc { max-width: 720px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-9); }
.doc h1 {
  font-size: var(--t-2xl); margin-bottom: var(--s-3);
  letter-spacing: .08em;
}
.doc .doc-sub {
  font-size: var(--t-sm); color: var(--ink-mid);
  padding-bottom: var(--s-5); margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
  line-height: 1.9;
}
.doc h2 {
  font-size: var(--t-lg); margin: var(--s-7) 0 var(--s-4);
  padding-bottom: var(--s-2);
  /* 标题下一条发丝线，而不是左边一道粗竖线——
     给每个标题挂竖线是很好认的模板做法，长文里连着八条尤其像。
     法律文本本来也不需要装饰。 */
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
}
.doc h2:first-of-type { margin-top: 0; }
.doc p {
  font-size: var(--t-md); line-height: 2;
  color: var(--ink-mid);
  margin: 0 0 var(--s-4);
  max-width: 34em;
}
.doc .en { color: var(--ink-faint); font-size: var(--t-sm); line-height: 1.9; }
.doc .doc-foot {
  margin-top: var(--s-9); padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--ink-faint);
}
.doc .doc-foot a { color: var(--cinnabar); text-decoration: none; }
.doc .doc-foot a:hover { text-decoration: underline; }