/**
 * 《孙子兵法》英文对照站（sunzi.5000yan.com/en/）
 * --------------------------------------------------------------------------
 * 设计原则（遵循全站视觉铁律）：
 *   - 层级用背景色表达，不用边框、内描边、左竖色条
 *   - 中文用宋体阅读字体，英文用衬线，靠字号与留白分层
 *   - 所有显示模式通过 <body> 上的 class 切换，零 JS 重排版
 */

/* ===== 设计变量（英文站自带，不加载全站 style-v2.css）
   颜色与 style-v2.css 的 :root / html.light 一致；改全站配色时此处需同步 ===== */
:root {
    color-scheme: dark;
    --bg-primary: #171410;
    --bg-secondary: #201c17;
    --bg-tertiary: #2b261f;
    --bg-card: #252018;
    --text-primary: #e8e4dc;
    --text-secondary: #c6c1b5;
    --text-muted: #928c7e;
    --accent: #3da55e;
    --accent-bg: rgba(61, 165, 94, .14);
    --radius: 12px;
    --radius-lg: 16px;
    --font-read: "Songti SC", "SimSun", "宋体", "Noto Serif CJK SC", "Source Han Serif CN", serif;
}
html.light {
    color-scheme: light;
    --bg-primary: #f5f2ed;
    --bg-secondary: #eeebe4;
    --bg-tertiary: #e5e0d8;
    --bg-card: #ffffff;
    --text-primary: #1e2024;
    --text-secondary: #3d4148;
    --text-muted: #666b73;
    --accent: #1b6b3a;
    --accent-bg: rgba(27, 107, 58, .08);
}
::selection { background: var(--accent-bg); color: var(--accent); }

/* ===== 基础变量兜底（style-v2.css 未定义的才生效） ===== */
.sz-body {
    --sz-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sz-maxw: 1180px;
    --sz-readw: 1120px;
    /* 顶栏实际高度：.sz-ctrl 靠它算吸顶位置。改顶栏的内边距/字号/换行方式时
       必须同步改这里，否则页面滚动后控制条会与顶栏之间露出一条缝隙。 */
    --sz-headh: 60px;
}

.sz-body,
.sz-body * { box-sizing: border-box; }

.sz-body {
    margin: 0;
    background: var(--bg-primary, #171410);
    color: var(--text-primary, #e8e4dc);
    font-family: var(--sz-serif);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.sz-body a { color: inherit; text-decoration: none; }

/* 移动端点击高亮统一关闭（2026-10-30，英文版专属坑）：
   本文件是英文版唯一加载的样式表（不加载 style-v2.css，那里已全局兜住），
   而 -webkit-tap-highlight-color 不继承、只对「可激活元素自身」生效，
   漏掉这条会让手机上点任何 A 标签都闪一下蓝色块（中英文差异的唯一来源）。
   后续新增英文版图书都复用本文件，不要再改动这条。 */
a, button,
input[type="button"], input[type="submit"],
[role="button"], [role="link"], [tabindex="0"], [onclick] {
    -webkit-tap-highlight-color: transparent;
}
a, button { touch-action: manipulation; }
button, [role="button"], [role="link"], [tabindex="0"], [onclick] {
    -webkit-user-select: none;
    user-select: none;
}

.sz-wrap {
    max-width: var(--sz-maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===== 阅读进度条 ===== */
.sz-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--accent, #3da55e);
    z-index: 90;
    transition: width .08s linear;
}

/* ===== 顶栏 ===== */
.sz-head {
    position: sticky;
    top: 0;
    z-index: 80;
    background: color-mix(in srgb, var(--bg-primary, #171410) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sz-head-in {
    max-width: var(--sz-maxw);
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.sz-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 15px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.sz-brand b { font-weight: 600; letter-spacing: .01em; }
/* 副标现在承载中文书名：uppercase 对汉字无作用，字距 .14em 恰好给四个字留呼吸 */
.sz-brand span { color: var(--text-muted, #9a938a); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

.sz-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    min-width: 0;
}

/* 四个栏目在窄屏内横向滑动；语言切换与主题按钮在滑动区之外，
   否则窄屏下会被挤出视口、永远点不到（2026-10-29） */
.sz-nav-list {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.sz-nav-list::-webkit-scrollbar { display: none; }

.sz-nav a {
    font-size: 13.5px;
    letter-spacing: .03em;
    color: var(--text-secondary, #b8b1a6);
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.sz-nav a:hover { color: var(--text-primary, #e8e4dc); background: var(--bg-tertiary, #2b261f); }
.sz-nav a.is-on { color: var(--text-primary, #e8e4dc); background: var(--accent-bg, rgba(61, 165, 94, .14)); }
.sz-nav .sz-nav-zh { color: var(--text-muted, #9a938a); }
.sz-nav .sz-nav-zh:hover { color: var(--accent, #3da55e); }

/* 日夜切换：与导航同族的文字按钮，状态与全站 darkMode Cookie 同步 */
.sz-theme {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--text-muted, #9a938a);
    background: transparent;
    border: 0;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s;
}
.sz-theme:hover { color: var(--text-primary, #e8e4dc); background: var(--bg-tertiary, #2b261f); }

/* ===== 首页 Hero ===== */
.sz-hero {
    position: relative;
    padding: 78px 0 48px;
}
.sz-hero-kicker {
    font-size: 12px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--accent, #3da55e);
    margin-bottom: 18px;
}
.sz-hero h1 {
    font-size: clamp(44px, 8vw, 86px);
    line-height: .98;
    letter-spacing: -.02em;
    font-weight: 500;
    margin: 0 0 22px;
}
.sz-hero-sub {
    font-size: clamp(16px, 2.2vw, 19px);
    line-height: 1.65;
    color: var(--text-secondary, #b8b1a6);
    max-width: 620px;
    margin: 0 0 30px;
}
.sz-hero-cn {
    position: absolute;
    right: 24px;
    top: 56px;
    writing-mode: vertical-rl;
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: .28em;
    color: var(--text-muted, #9a938a);
    opacity: .34;
    user-select: none;
    pointer-events: none;
}
.sz-hero-cn small {
    display: block;
    font-size: 12px;
    letter-spacing: .3em;
    color: var(--accent, #3da55e);
    opacity: .9;
    margin-top: 12px;
}

.sz-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.sz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: .02em;
    background: var(--bg-tertiary, #2b261f);
    color: var(--text-primary, #e8e4dc);
    transition: background .18s, transform .18s;
    cursor: pointer;
    border: 0;
    font-family: inherit;
}
.sz-btn:hover { background: var(--accent-bg, rgba(61, 165, 94, .16)); transform: translateY(-1px); }
/* 特异性必须高于 .sz-body a（0,1,1），否则 color 被继承覆盖→
   绿色底上落米白字，深色模式对比度只有 2.46:1 */
.sz-body .sz-btn-primary { color: #0d1a11; }
.sz-btn-primary { background: var(--accent, #3da55e); font-weight: 600; }
/* 浅色模式下 accent 是深绿，深色字会看不清，改用白字 */
html.light .sz-btn-primary { color: #fff; }
.sz-btn-primary:hover { background: var(--accent, #3da55e); filter: brightness(1.08); }

/* ===== 通用区块 ===== */
.sz-section { padding: 34px 0; }
.sz-section-title {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--text-muted, #9a938a);
    margin: 0 0 20px;
}
.sz-lede {
    font-size: 17.5px;
    line-height: 1.8;
    color: var(--text-secondary, #b8b1a6);
    max-width: 760px;
}
.sz-lede em { color: var(--text-primary, #e8e4dc); font-style: normal; }

/* ===== 特性卡（背景色分层，无边框） ===== */
.sz-feats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.sz-feat {
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    padding: 22px 22px 24px;
    transition: background .18s;
}
.sz-feat:hover { background: var(--bg-tertiary, #2b261f); }
.sz-feat h3 {
    font-size: 15.5px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: .01em;
}
.sz-feat p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary, #b8b1a6);
}

/* ===== 章节卡 ===== */
.sz-chapters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.sz-chcard {
    position: relative;
    display: flex;
    gap: 18px;
    padding: 20px 22px;
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    transition: background .18s, transform .18s;
    overflow: hidden;
}
.sz-chcard:hover { background: var(--accent-bg, rgba(61, 165, 94, .12)); transform: translateY(-1px); }
.sz-chcard-num {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    color: var(--text-muted, #9a938a);
    opacity: .5;
    min-width: 42px;
    font-variant-numeric: tabular-nums;
}
.sz-chcard:hover .sz-chcard-num { color: var(--accent, #3da55e); opacity: .8; }
.sz-chcard-body { min-width: 0; }
.sz-chcard h3 { margin: 0 0 4px; font-size: 17px; font-weight: 500; letter-spacing: .01em; }
.sz-chcard-zh {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 13px;
    color: var(--text-muted, #9a938a);
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.sz-chcard p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text-secondary, #b8b1a6);
}

/* ===== 名言 teaser ===== */
.sz-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sz-qcard {
    display: block;
    padding: 22px;
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    transition: background .18s;
}
.sz-qcard:hover { background: var(--bg-tertiary, #2b261f); }
.sz-qcard-zh {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 10px;
}
.sz-qcard-en { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary, #b8b1a6); font-style: italic; }
.sz-qcard-src { margin-top: 12px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #9a938a); }

/* ===== 章节页头部 ===== */
.sz-chead { padding: 42px 0 26px; }
.sz-crumb {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--text-muted, #9a938a);
    margin-bottom: 22px;
}
.sz-crumb a:hover { color: var(--accent, #3da55e); }
.sz-crumb span { opacity: .5; margin: 0 8px; }
.sz-chead h1 {
    font-size: clamp(32px, 5.4vw, 54px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -.015em;
    margin: 0 0 12px;
}
.sz-chead-zh {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 20px;
    letter-spacing: .14em;
    color: var(--text-secondary, #b8b1a6);
    margin-bottom: 6px;
}
.sz-chead-py {
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent, #3da55e);
    margin-bottom: 20px;
}
.sz-chead-sum {
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--text-secondary, #b8b1a6);
    max-width: 720px;
    margin: 0;
}
/* 论语单条页专用（2026-11-01）：中文原文只留一行做原典标识。
   不能用 .sz-chead-zh——那个类是 20px，放在 16.5px 的英文摘要后面会反客为主。
   本类只由 AnalectsController 输出，孙子/道德经不引用。 */
.sz-chead-cn {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--text-muted, #9a938a);
    margin: 10px 0 0;
}

/* ===== 章节目录 chips ===== */
/* 宽屏：十三章全部换行显示，不用鼠标去猜还能横滑；
   窄屏：保持横向滑动（触屏手势本身可发现，且竖屏放不下） */
.sz-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 0 6px;
}
@media (max-width: 700px) {
    .sz-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .sz-chips::-webkit-scrollbar { display: none; }
}
.sz-chips a {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--text-muted, #9a938a);
    background: var(--bg-secondary, #201c17);
    transition: background .18s, color .18s;
}
.sz-chips a:hover { color: var(--text-primary, #e8e4dc); background: var(--bg-tertiary, #2b261f); }
.sz-chips a.is-on { color: var(--accent, #3da55e); background: var(--accent-bg, rgba(61, 165, 94, .14)); }

/* ===== 阅读控制条 ===== */
/* 它已从 .sz-wrap 里提出来、直接放在 .sz-reader 里（见 ClassicsController），
   否则 sticky 会被只包住自身的短祖先把滑动行程限死、等于不吸顶。
   所以这里要自己撑出与 .sz-wrap 一致的最大宽和左右内边距。 */
.sz-ctrl {
    position: sticky;
    top: var(--sz-headh);
    z-index: 70;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: var(--sz-maxw);
    margin: 0 auto;
    padding: 10px 24px;
    background: color-mix(in srgb, var(--bg-primary, #171410) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.sz-seg {
    display: inline-flex;
    background: var(--bg-secondary, #201c17);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.sz-seg button {
    border: 0;
    background: transparent;
    color: var(--text-muted, #9a938a);
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 6px 13px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s, color .16s;
}
.sz-seg button:hover { color: var(--text-primary, #e8e4dc); }
.sz-seg button.is-on { background: var(--bg-tertiary, #2b261f); color: var(--text-primary, #e8e4dc); }
.sz-toggle {
    border: 0;
    background: var(--bg-secondary, #201c17);
    color: var(--text-muted, #9a938a);
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: .04em;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s, color .16s;
}
.sz-toggle:hover { color: var(--text-primary, #e8e4dc); }
.sz-toggle.is-on { color: var(--accent, #3da55e); background: var(--accent-bg, rgba(61, 165, 94, .14)); }
.sz-ctrl-spacer { flex: 1 1 auto; }
.sz-ctrl-count { font-size: 12px; color: var(--text-muted, #9a938a); letter-spacing: .06em; }

/* ===== 对照正文 ===== */
.sz-article { padding: 8px 0 40px; }

.sz-block {
    position: relative;
    z-index: 0;  /* 建立层叠上下文，供 ::before 垫在文字下方 */
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 40px;
    padding: 26px 0;
    border-radius: var(--radius-lg, 16px);
}
/* 阅读起点（2026-11-01）：本站读者是英语母语者，视线起点在左列。
   DOM 是「中文段 → 英文段」，桌面两列下不改 order 就成了左中文右英文——
   英语读者第一眼撞到读不懂的汉字，且与移动端（已英文在前）方向相反。
   这里让英文占据左侧加宽列（1.05fr），只改视觉顺序，DOM 与 SEO 不变。
   单语模式另一个语言已 display:none（见下方 sz-mode-zh / sz-mode-en），order 无副作用。 */
.sz-en { order: 1; }
.sz-cn { order: 2; }
/* 悬停高亮改用伪元素外扩，不给正文加 padding（加了会让文字左右位移、并触发重排）：
   色块上下各 0，左右外扩 20px，让文字与色块边缘之间留出呼吸。
   包在 hover:hover 里，避免触屏设备悬停粘滞（2026-10-29） */
@media (hover: hover) {
    .sz-block::before {
        content: '';
        position: absolute;
        inset: 0 -20px;
        background: var(--bg-secondary, #201c17);
        border-radius: var(--radius-lg, 16px);
        opacity: 0;
        transition: opacity .2s;
        pointer-events: none;
        z-index: -1;
    }
    .sz-block:hover::before { opacity: 1; }
}

.sz-cn {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 22px;
    line-height: 2.15;
    letter-spacing: .02em;
    color: var(--text-primary, #e8e4dc);
    align-self: start;
}
.sz-cn ruby { ruby-position: over; }
.sz-cn rt {
    font-family: var(--sz-serif);
    font-size: 10.5px;
    letter-spacing: 0;
    color: var(--text-muted, #9a938a);
    font-weight: 400;
    text-transform: lowercase;
}
.sz-cn .hz { cursor: pointer; transition: color .15s; }
.sz-cn .hz:hover { color: var(--accent, #3da55e); }
.sz-cn .sz-t {
    color: var(--accent, #3da55e);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent, #3da55e) 45%, transparent);
    transition: background .16s;
    border-radius: 3px;
}
.sz-cn .sz-t:hover { background: var(--accent-bg, rgba(61, 165, 94, .16)); }

.sz-en {
    font-size: 16.5px;
    line-height: 1.78;
    color: var(--text-secondary, #b8b1a6);
    align-self: start;
}
.sz-sent { margin: 0 0 10px; position: relative; padding-left: 26px; }
.sz-sent:last-child { margin-bottom: 0; }
.sz-n {
    position: absolute;
    left: 0;
    top: .25em;
    font-size: 10px;
    letter-spacing: .06em;
    color: var(--text-muted, #9a938a);
    font-variant-numeric: tabular-nums;
    opacity: .75;
}
.sz-sent em { color: var(--text-primary, #e8e4dc); font-style: italic; }

.sz-notes { margin-top: 8px; }
.sz-notes summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent, #3da55e);
    opacity: .85;
    padding: 2px 0;
}
.sz-notes summary::-webkit-details-marker { display: none; }
.sz-notes summary:hover { opacity: 1; }
.sz-note {
    display: block;
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--bg-tertiary, #2b261f);
    border-radius: var(--radius, 12px);
    font-size: 13.5px;
    line-height: 1.72;
    color: var(--text-secondary, #b8b1a6);
    font-style: italic;
}
.sz-note em { font-style: normal; color: var(--text-primary, #e8e4dc); }

/* 显示模式切换（零 JS 重排版） */
.sz-body.sz-mode-zh .sz-en { display: none; }
.sz-body.sz-mode-zh .sz-block { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sz-body.sz-mode-en .sz-cn { display: none; }
.sz-body.sz-mode-en .sz-block { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sz-body.sz-nopyin rt { visibility: hidden; }
/* 关掉注释时句子编号一起隐藏：编号只为对照注释而存在 */
.sz-body.sz-nonotes .sz-notes,
.sz-body.sz-nonotes .sz-n { display: none; }
.sz-body.sz-nonotes .sz-sent { padding-left: 0; }
.sz-body.sz-lang-zh .sz-cn { font-size: 24px; }

/* ===== 章末附录 ===== */
.sz-appendix { padding: 10px 0 8px; }
.sz-fold {
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    padding: 4px 22px;
    margin-bottom: 10px;
}
.sz-fold[open] { padding-bottom: 22px; }
.sz-fold summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 0;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-muted, #9a938a);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sz-fold summary::-webkit-details-marker { display: none; }
.sz-fold summary:hover { color: var(--text-primary, #e8e4dc); }
.sz-fold summary::after { content: "+"; margin-left: auto; font-size: 16px; letter-spacing: 0; color: var(--accent, #3da55e); }
.sz-fold[open] summary::after { content: "–"; }
.sz-fold-body { font-size: 14px; line-height: 1.85; color: var(--text-secondary, #b8b1a6); }
.sz-fold-body .sz-fold-hint { font-size: 13px; color: var(--text-muted, #9a938a); margin: 0 0 16px; }
.sz-fold-body p { margin: 0 0 10px; }
.sz-fold-body .sz-zhnote {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 14.5px;
    line-height: 1.95;
    margin: 0 0 8px;
    padding-left: 2.2em;
    text-indent: -2.2em;
}
.sz-fold-body .sz-zhnote b { color: var(--accent, #3da55e); font-weight: 500; margin-right: 4px; }

/* ===== 上下章导航 ===== */
.sz-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 0 48px; }
.sz-pager a {
    display: block;
    padding: 20px 22px;
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    transition: background .18s;
}
.sz-pager a:hover { background: var(--accent-bg, rgba(61, 165, 94, .12)); }
.sz-pager small { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted, #9a938a); margin-bottom: 6px; }
.sz-pager b { font-weight: 500; font-size: 16px; }
.sz-pager .sz-next { text-align: right; }
/* 底部目录入口（2026-11-01）：pager 只给上一章/下一章，读完一章想跳章时
   顶部的章目录已滚出视口。这里放一行轻量文字链接回首页目录区，
   不再展开整套数字格——底部重复几十个内链只增加 DOM 与视觉噪音。
   负 margin-top 抵消 .sz-pager 的 48px 底部内边距，不脱离上下文。 */
.sz-jump { margin: -26px 0 40px; text-align: center; font-size: 13px; }
.sz-jump a {
    display: inline-block;
    padding: 8px 2px;
    color: var(--text-muted, #9a938a);
    letter-spacing: .05em;
    transition: color .18s;
}
.sz-jump a:hover { color: var(--accent, #3da55e); }
.sz-jump i { margin-right: 7px; font-size: 11px; opacity: .75; }

/* ===== 术语表 ===== */
.sz-gloss { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sz-gitem {
    padding: 24px;
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    scroll-margin-top: 90px;
}
.sz-gitem:target { background: var(--accent-bg, rgba(61, 165, 94, .14)); }
.sz-gitem-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.sz-gitem-zh {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 26px;
    letter-spacing: .04em;
}
.sz-gitem-py { font-size: 12.5px; letter-spacing: .12em; color: var(--accent, #3da55e); text-transform: lowercase; }
.sz-gitem-en { font-size: 16px; font-weight: 500; margin-bottom: 10px; }
.sz-gitem p { margin: 0 0 12px; font-size: 14px; line-height: 1.72; color: var(--text-secondary, #b8b1a6); }
.sz-gitem-meta { font-size: 12px; color: var(--text-muted, #9a938a); letter-spacing: .04em; }
.sz-gitem-meta a { color: var(--text-muted, #9a938a); }
.sz-gitem-meta a:hover { color: var(--accent, #3da55e); }
.sz-gitem-meta span { opacity: .45; margin: 0 6px; }

/* ===== 名言页 ===== */
.sz-qlist { display: flex; flex-direction: column; gap: 10px; }
.sz-qrow {
    padding: 26px 26px 24px;
    background: var(--bg-card, #252018);
    border-radius: var(--radius-lg, 16px);
    transition: background .18s;
}
.sz-qrow:hover { background: var(--bg-tertiary, #2b261f); }
.sz-qrow-zh {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 24px;
    line-height: 1.7;
    letter-spacing: .03em;
    margin-bottom: 12px;
}
.sz-qrow-en { font-size: 16px; line-height: 1.75; color: var(--text-secondary, #b8b1a6); font-style: italic; }
.sz-qrow-en span { display: block; margin-bottom: 4px; }
.sz-qrow-src { margin-top: 14px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #9a938a); }
.sz-qrow-src a:hover { color: var(--accent, #3da55e); }

/* ===== 关于页 ===== */
.sz-prose { max-width: 760px; }
.sz-prose h2 {
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-muted, #9a938a);
    margin: 34px 0 10px;
    font-weight: 500;
}
.sz-prose p { font-size: 16.5px; line-height: 1.8; color: var(--text-secondary, #b8b1a6); margin: 0 0 14px; }
.sz-prose p em { font-style: normal; color: var(--text-primary, #e8e4dc); }
.sz-prose .sz-zh { font-family: var(--font-read, "Songti SC", "SimSun", serif); }

/* ===== 论语 about 页：二十篇清单（仅 AnalectsController 输出，孙子/道德经不引用） =====
   20 个书名原先塞在一段里、每五个硬 <br> 一行：窄屏下长短参差，行尾还丢分隔符。
   改成网格列表：桌面自动分两列，窄屏回落单列，每行一本书、编号对齐。 */
.sz-booklist {
    list-style: none;
    margin: 16px 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2px 24px;
}
.sz-booklist li { margin: 0; }
.sz-booklist a {
    display: flex;
    gap: 12px;
    padding: 7px 10px;
    margin-left: -10px;
    border-radius: var(--radius, 12px);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--text-secondary, #b8b1a6);
    transition: background .18s, color .18s;
}
.sz-booklist a:hover { background: var(--accent-bg, rgba(61, 165, 94, .12)); color: var(--text-primary, #e8e4dc); }
.sz-booklist span {
    flex: 0 0 1.6em;
    font-size: 13px;
    line-height: 1.78;
    color: var(--text-muted, #9a938a);
    font-variant-numeric: tabular-nums;
}

/* ===== 汉字浮层 ===== */
.sz-pop {
    position: fixed;
    z-index: 120;
    min-width: 190px;
    padding: 14px 16px;
    background: var(--bg-tertiary, #2b261f);
    border-radius: var(--radius, 12px);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
    display: none;
}
.sz-pop.show { display: block; }
.sz-pop-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.sz-pop-char { font-family: var(--font-read, "Songti SC", "SimSun", serif); font-size: 30px; line-height: 1; }
.sz-pop-py { font-size: 13px; color: var(--accent, #3da55e); letter-spacing: .1em; }
.sz-pop a { display: block; font-size: 13px; color: var(--text-secondary, #b8b1a6); padding-top: 6px; }
.sz-pop a:hover { color: var(--accent, #3da55e); }
.sz-pop-close {
    position: absolute;
    top: 6px; right: 8px;
    border: 0;
    background: transparent;
    color: var(--text-muted, #9a938a);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
}
.sz-pop-close:hover { color: var(--text-primary, #e8e4dc); }

/* ===== 页脚 ===== */
.sz-foot {
    margin-top: 40px;
    padding: 34px 0 44px;
    background: var(--bg-secondary, #201c17);
}
.sz-foot-in {
    max-width: var(--sz-maxw);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
    align-items: flex-start;
}
.sz-foot-col { font-size: 13px; line-height: 1.9; color: var(--text-muted, #9a938a); }
.sz-foot-col b { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-secondary, #b8b1a6); margin-bottom: 6px; font-weight: 500; }
.sz-foot-col a:hover { color: var(--accent, #3da55e); }
.sz-foot-fine { width: 100%; font-size: 12px; color: var(--text-muted, #9a938a); opacity: .8; line-height: 1.8; }

/* ===== 数据看点（首页） ===== */
.sz-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 34px;
    margin-top: 34px;
}
.sz-stats div {
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted, #9a938a);
}
.sz-stats b {
    display: block;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--text-primary, #e8e4dc);
    font-variant-numeric: tabular-nums;
}

.sz-more { margin: 22px 0 0; }

/* ===== 朗读按钮（每段一个，点击才取音频） ===== */
.sz-say { margin-top: 14px; }
.sz-audio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--bg-secondary, #201c17);
    color: var(--text-muted, #9a938a);
    font-family: var(--sz-serif);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .16s, color .16s;
}
.sz-audio::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
    opacity: .85;
}
.sz-audio:hover { color: var(--accent, #3da55e); background: var(--accent-bg, rgba(61, 165, 94, .14)); }
.sz-audio.is-playing::before,
.sz-audio.is-loading::before {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: currentColor;
}
.sz-audio.is-loading { animation: sz-pulse 1.1s ease-in-out infinite; }
/* 桌面端：朗读按钮平时压暗，指到段落再显现——一页上百个按钮不该铺满视线 */
@media (hover: hover) {
    .sz-block .sz-audio { opacity: .45; }
    .sz-block:hover .sz-audio,
    .sz-block .sz-audio:focus-visible,
    .sz-block .sz-audio.is-playing,
    .sz-block .sz-audio.is-loading { opacity: 1; }
}
@keyframes sz-pulse {
    0%, 100% { opacity: .35; }
    50% { opacity: .95; }
}

/* ===== 中文原文入口 ===== */
.sz-cnlink { margin: -20px 0 44px; font-size: 14px; }
.sz-cnlink a { color: var(--text-muted, #9a938a); }
.sz-cnlink a:hover { color: var(--accent, #3da55e); }

/* ===== 响应式 ===== */
@media (max-width: 960px) {
    .sz-feats { grid-template-columns: repeat(2, 1fr); }
    .sz-quotes { grid-template-columns: 1fr; }
    .sz-gloss { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .sz-wrap, .sz-head-in { padding-left: 16px; padding-right: 16px; }
    /* 顶栏改两行（2026-10-30）：品牌 + 语言/主题占第一行，四个栏目独占第二行。
       原来单行 flex 下滚动区只剩 116px（390 宽屏），About 被硬切 40px、
       且没有任何“还能横滑”的提示——英语读者会以为站里只有 3 个栏目。
       用 display:contents 拆掉 .sz-nav 这层壳，让它的子项直接参与外层排布。 */
    .sz-head-in { flex-wrap: wrap; gap: 8px 10px; padding-top: 10px; padding-bottom: 8px; }
    .sz-nav { display: contents; }
    .sz-brand { order: 1; }
    /* 语言切换也是 .sz-nav 里的 a，会被下面的 .sz-nav a（0,1,1）盖住，故提一级选择器 */
    .sz-nav a.sz-nav-zh { order: 2; margin-left: auto; padding: 5px 7px; font-size: 12px; }
    .sz-theme { order: 3; padding: 5px 7px; font-size: 12px; }
    .sz-nav-list {
        order: 4;
        flex: 1 1 100%;
        /* 右缘渐隐：320 宽以下四个栏目才真需要横滑 */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 14px), transparent);
    }
    .sz-brand span { display: none; }
    /* 顶栏在窄屏是两行（品牌+语言+主题 / 四个栏目）；但移动端顶栏已改为不吸顶，
       --sz-headh 归零（见本媒体查询末尾「移动端吸顶高度收敛」） */
    .sz-body { --sz-headh: 0px; }
    .sz-hero { padding: 46px 0 30px; }
    .sz-hero-cn { display: none; }
    /* 章节页头部收紧（2026-11-01）：移动端 .sz-chead 实测 334.8px（视口 844），
       正文首句被推到 663px、首屏只剩 180px 正文——进页像在读一张封面。
       实测构成：摘要 115（34%）、上下 padding 68（20%）、拼音块 38、面包屑 39。
       这里只压间距，并把「中文题 + 拼音」并成一行——两者都在回答「这章叫什么」，
       分两行纯占高度；摘要句子完整保留（不截断），只把行高从 1.75 收到 1.65。
       中文题较短、拼音较长的章会自然折行，退化成原来的两行，不会更差。
       桌面端不改：900px 视口下正文首句本就在 500px，够用。 */
    .sz-chead { padding: 24px 0 18px; }
    .sz-crumb { margin-bottom: 12px; }
    .sz-chead h1 { margin: 0 0 8px; }
    .sz-chead-zh { display: inline-block; margin: 0 12px 0 0; vertical-align: baseline; }
    .sz-chead-py { display: inline-block; margin: 0 0 14px; vertical-align: baseline; }
    .sz-chead-sum { font-size: 16px; line-height: 1.65; }
    .sz-feats, .sz-chapters { grid-template-columns: 1fr; }
    .sz-block { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 0; }
    /* 正文顺序（2026-11-01）：单列下 DOM 是「中文段+朗读 → 英文段+朗读」，
       英语读者进正文先撞一整块中文，第一句英文被压到 79px 之下。
       母语优先：英文段排前，中文原文紧随其后做对照。
       只改视觉顺序（order），DOM/SEO 与桌面两列布局完全不变；
       单语模式（Chinese/English）只剩一列，order 无副作用。 */
    .sz-en { order: 1; }
    .sz-cn { order: 2; }
    .sz-block:hover { background: transparent; }
    /* 悬停灰块的左右外扩必须收回到与 .sz-wrap 同宽的 16px：它原本外扩 20px，
       窄屏下比正文多出 4px，鼠标设备（窄窗口）能把整页横向拖动 4px。 */
    .sz-block::before { inset: 0 -16px; }
    .sz-cn { font-size: 20px; line-height: 2.05; }
    .sz-en { font-size: 16px; }
    .sz-ctrl { gap: 8px 6px; padding: 10px 16px; }
    .sz-ctrl-count { display: none; }
    .sz-pager { grid-template-columns: 1fr; }
    .sz-pager .sz-next { text-align: left; }
    .sz-qrow-zh { font-size: 21px; }
    .sz-gitem-zh { font-size: 23px; }
    .sz-stats { gap: 12px 24px; margin-top: 26px; }
    .sz-stats b { font-size: 22px; }
    .sz-nav a { padding: 7px 9px; font-size: 12.5px; }

    /* ── 移动端吸顶高度收敛（2026-10-30）────────────────────────────────
       旧行为：.sz-head(82px) 与 .sz-ctrl 同时 sticky，且 .sz-ctrl 在 390px 宽
       下装不下 6 个控件（Both/Chinese/English + Pinyin + Notes + Print），
       flex-wrap 折成两行 → 吸附总量超过 180px，在 667px 高的手机上
       吃掉近 1/3 屏，正文可见区只剩几百 px，读不下去。
       现改：顶栏随页面滚走（进页时仍能看全导航），只让阅读控制条吸顶，
       并压成单行横滑（功能一个不少，右缘渐隐提示还能横滑）。
       吸附总量从 ~182px 降到 ~46px。 */
    .sz-head { position: relative; }
    .sz-ctrl {
        top: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding: 8px 16px;
        scrollbar-width: none;
        /* 右缘渐隐：提示还有控件可以横滑（与 .sz-nav-list 同一手法） */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    }
    .sz-ctrl::-webkit-scrollbar { display: none; }
    /* 原来靠 flex:1 把 Print 推到最右，单行横滑下它只会多出一段空白 */
    .sz-ctrl-spacer { display: none; }
    .sz-seg button { padding: 5px 10px; font-size: 12px; }
    .sz-toggle { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
    /* 手机上「Print」无意义（iOS/Android 分享菜单自带打印，且本页已有 @media print）：
       留着它会把控制条撑到 408px、多出 33px 横滑，把真正高频的 Pinyin/Notes 挤出屏外。
       桌面端不受影响。实测：移除后控件总宽 318px < 375px，零横滑。 */
    .sz-toggle[data-action="print"] { display: none; }
}

/* ===== 打印 ===== */
@media print {
    .sz-head, .sz-ctrl, .sz-progress, .sz-chips, .sz-chnav, .sz-pager, .sz-jump, .sz-foot, .sz-pop, .sz-hero-actions, .sz-say, .sz-cnlink { display: none !important; }
    .sz-body { background: #fff; color: #111; }
    .sz-block { grid-template-columns: 1fr; gap: 10px; page-break-inside: avoid; }
    .sz-body .sz-cn, .sz-body .sz-en { display: block !important; color: #111; }
    .sz-note { background: #f4f2ee; color: #333; }
    .sz-cn rt { color: #666; }
}

/* 减少动态偏好 */
@media (prefers-reduced-motion: reduce) {
    .sz-body *, .sz-body *::before, .sz-body *::after { transition: none !important; animation: none !important; }
}

/* ===== 长文本分卷与紧凑卡（2026-10-31，道德经 81 章专用）=================
   孙子 13 章继续走上面的 .sz-chapters 原规则，一个字符没改；本段的类名
   只由 DaodejingController 输出。两本书仍共用这一份样式表。
   背景：81 张带摘要的卡在 PC 上 41 行、移动端近 10 屏，目录失去可用性。
   改为「通行本两卷（道经 1-37 / 德经 38-81）+ 紧凑卡（去摘要）+ PC 三列」。
   摘要只属章节页，首页不重复。 */
.sz-vol + .sz-vol { margin-top: 36px; }
.sz-vol-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-primary, #ece7de);
}
.sz-vol-range {
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--text-muted, #9a938a);
    font-variant-numeric: tabular-nums;
}
.sz-vol-zh {
    font-family: var(--font-read, "Songti SC", "SimSun", serif);
    font-size: 13px;
    letter-spacing: .12em;
    color: var(--text-muted, #9a938a);
}
.sz-chapters--dense { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sz-chcard--mini { padding: 13px 16px; gap: 12px; align-items: baseline; }
.sz-chcard--mini .sz-chcard-num { font-size: 19px; min-width: 24px; opacity: .42; }
.sz-chcard--mini h3 { font-size: 14.5px; line-height: 1.35; margin: 0 0 3px; }
.sz-chcard--mini .sz-chcard-zh { font-size: 12px; margin-bottom: 0; }

@media (max-width: 1000px) {
    /* 容器收窄后 3 列放不下「章号 + 英文题 + 中文题」，降为 2 列 */
    .sz-chapters--dense { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    /* ⚠️ 必须在此显式声明：本段在文件末尾，同特异性下会盖掉前面移动端的
       .sz-chapters { grid-template-columns: 1fr }，不写就会在手机上也排 3 列 */
    .sz-chapters--dense { grid-template-columns: 1fr; gap: 6px; }
    .sz-chcard--mini { padding: 12px 14px; }
    .sz-vol + .sz-vol { margin-top: 28px; }
}

/* ===== 章节目录折叠 + 纯数字网格（2026-10-31，道德经 81 章专用）===============
   背景：章节页顶部原先把 81 个「章号 + 完整英文标题」的 chip 全列出来——
   PC 上排成十几行（约 540px）、把正文挤到首屏之外；移动端走 .sz-chips 的
   nowrap + 横滑，总宽约 13000px，要滑三十多屏才到头。
   底部 .sz-pager 已经负责「上一章/下一章」，顶部只需一个「跳到任意一章」，
   所以收进 <details>：默认一行，展开是等宽数字格，全程不出现横向滚动。
   孙子 13 章仍走上面的 .sz-chips（不折叠、带标题），本段类名只由 DaodejingController 输出。 */
.sz-chnav { margin: 0 0 10px; }
.sz-chnav > summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 11px 15px;
    border-radius: var(--radius, 10px);
    background: var(--bg-secondary, #201c17);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, #9a938a);
    cursor: pointer;
    list-style: none;
    transition: background .18s ease;
}
.sz-chnav > summary::-webkit-details-marker { display: none; }
.sz-chnav > summary:hover { background: var(--bg-tertiary, #2b261f); }
.sz-chnav > summary span { color: var(--text-primary, #e8e4dc); }
.sz-chnav > summary em {
    flex: 1;
    min-width: 0;
    font-style: normal;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sz-chnav > summary i {
    flex: none;
    font-size: 11px;
    transition: transform .2s ease;
}
.sz-chnav[open] > summary i { transform: rotate(180deg); }

.sz-chips--nums {
    /* 覆盖 .sz-chips 的 flex：改成等宽数字格，章号位数一致所以列宽天然整齐 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    padding: 10px 0 2px;
    overflow: visible;
}
.sz-chips--nums a {
    display: grid;
    place-items: center;
    padding: 9px 0;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    /* ⚠️ 必须在此显式声明：本段在文件末尾，同特异性下要盖掉文件中部
       @media(max-width:700px) 给 .sz-chips 的 nowrap + overflow-x:auto，
       不写就会在手机上又变成横滑。 */
    .sz-chips--nums {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
        gap: 5px;
        overflow: visible;
    }
    .sz-chips--nums a { padding: 8px 0; }
}