/* ==========================================================================
   xtap-read.css — 中文阅读排版模块（全站共享，link 一次即可）
   目标：杂志级中文阅读体验，2026 年基线特性 + 全链路渐进增强。
   用法：<article class="read-article"> … </article>
   依赖：无。明暗可跟随系统，也可由 xtap-core.js 提供的按钮手动切换。
   --------------------------------------------------------------------------
   渐进增强铁律：所有新特性都用 @supports 包裹；不支持的浏览器自动落到
   「内容完整可读、排版依然正确」的兜底态，绝不出现错位或不可读。
   ========================================================================== */

/* ---------- 1. 设计令牌（明暗双主题唯一真源） ----------
   令牌挂在 :root 上，方便 body.read-page 与 .read-article 共用同一份。
   变量名统一 --read-* 前缀，与子站 xtap-ui.css 的 --bg/--txt 等不冲突。 */
:root{
  --read-bg:      #0b0b0d;
  --read-ink:     #ece7dd;
  --read-muted:   #8b867c;
  --read-faint:   #5c594f;
  --read-accent:  #c9a36a;
  --read-line:    rgba(236,231,221,.12);
  --read-code-bg: rgba(255,255,255,.05);
  --read-mark:    rgba(201,163,106,.18);
}
/* 系统偏好浅色时自动跟随（用户没手动选过才生效） */
@media (prefers-color-scheme: light){
  :root{
    --read-bg:      #faf7f0;   /* 米黄纸感，降低屏幕与文字的硬对比，久读不刺眼 */
    --read-ink:     #23201c;
    --read-muted:   #6b665d;
    --read-faint:   #9c968a;
    --read-accent:  #8a6a2f;
    --read-line:    rgba(35,32,28,.13);
    --read-code-bg: rgba(35,32,28,.05);
    --read-mark:    rgba(201,163,106,.32);
  }
}
/* 手动切换优先级最高（由 xtap-core.js 写入 html[data-theme]） */
html[data-theme="light"]{
  --read-bg:#faf7f0; --read-ink:#23201c; --read-muted:#6b665d; --read-faint:#9c968a;
  --read-accent:#8a6a2f; --read-line:rgba(35,32,28,.13);
  --read-code-bg:rgba(35,32,28,.05); --read-mark:rgba(201,163,106,.32);
}
html[data-theme="dark"]{
  --read-bg:#0b0b0d; --read-ink:#ece7dd; --read-muted:#8b867c; --read-faint:#5c594f;
  --read-accent:#c9a36a; --read-line:rgba(236,231,221,.12);
  --read-code-bg:rgba(255,255,255,.05); --read-mark:rgba(201,163,106,.18);
}

/* ---------- 1b. 页面底色：只有声明了 read-page 的页面才跟随主题 ----------
   这样音乐/影像等暗色子站不会被误切成浅色（它们的观感是刻意设计的）。 */
body.read-page{
  background: var(--read-bg);
  color: var(--read-ink);
  transition: background-color .35s ease, color .35s ease;
}
@media (prefers-reduced-motion: reduce){
  body.read-page{ transition: none }
}

/* ---------- 2. 正文基线 ---------- */
.read-article{
  /* 字体：中文优先思源宋体/系统宋体，正文可读性与仪式感兼顾 */
  --read-serif: "Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong",
                "SimSun",Georgia,serif;
  --read-sans:  "Inter","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;

  font-family: var(--read-serif);
  /* 流式字号：手机 16px → 桌面 18.5px，永不设固定值 */
  font-size: clamp(16px, 0.55vw + 14.6px, 18.5px);
  /* 行高：WCAG 要求 ≥1.5；中文取 1.8 最舒服，小屏更松 */
  line-height: 1.8;
  letter-spacing: 0.02em;          /* 中文微字距，笔画不糊在一起 */
  color: var(--read-ink);
  /* 行宽：CJK 每行约 38em ≈ 38 个汉字，符合 WCAG「每行不超过 40 字符」 */
  max-width: 38em;
  margin-inline: auto;
  text-align: justify;
  text-justify: inter-ideograph;    /* 中文两端对齐（日文/中文表意文字规则） */
  text-wrap: pretty;                /* 避免末行孤字，现代浏览器支持 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 3. 2026 新特性（全部渐进增强，不支持自动忽略） ---------- */

/* 3.1 中英混排自动加空格 ★ 最实用
   "佳能6D2"、"ISO100" 这类混排，浏览器自动补出合适间距。
   Baseline 2025-11：Chrome 140+ / Firefox 147+ / Safari 18.4+。
   不支持的浏览器（如旧版 Chrome）就是原本紧贴的样子，不报错、不错位。 */
@supports (text-autospace: normal){
  .read-article{ text-autospace: normal; }
}

/* 3.2 标点压缩：连续标点（如「」、……）自动收紧，行首不留空 */
@supports (text-spacing-trim: space-first){
  .read-article{ text-spacing-trim: space-first; }
}

/* 3.3 悬挂标点：引号/括号悬挂到版心外，边缘更齐整。
     2026 年仍仅 Safari 支持 —— 加了不碍事，其它浏览器自动忽略。 */
.read-article p{ hanging-punctuation: allow-end; }

/* 3.4 文字盒裁剪：中文字形自带上下留白，导致标题"居中总是差一点"。
     trim-both 裁掉这部分，垂直对齐终于精确（Chrome 133+/Safari 18.2+）。 */
@supports (text-box-trim: trim-both){
  .read-article .read-title,
  .read-article h1, .read-article h2{
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

/* ---------- 4. 段落 ---------- */
.read-article p{
  text-indent: 2em;               /* 中文惯例：段首缩进两字符（CLREQ 规范） */
  margin: 0.9em 0;
  orphans: 2; widows: 2;          /* 避免孤行寡行 */
}
/* 图注、引用、代码块不缩进 */
.read-article figure p,
.read-article blockquote p,
.read-article .no-indent{ text-indent: 0; }

/* ---------- 5. 标题 ---------- */
.read-article h1, .read-article h2, .read-article h3, .read-article h4{
  font-family: var(--read-serif);
  line-height: 1.4;
  letter-spacing: .01em;
  text-indent: 0;
  text-wrap: balance;             /* 标题折行左右均衡，不出现"一行满一行短" */
}
.read-article h1{ font-size: clamp(28px,4.6vw,46px); font-weight:500; margin:0 0 .5em }
.read-article h2{ font-size: clamp(22px,3.2vw,30px); font-weight:500;
  margin:2.2em 0 .7em; padding-top:.4em; border-top:1px solid var(--read-line) }
.read-article h3{ font-size: clamp(18px,2.4vw,22px); font-weight:600; margin:1.8em 0 .6em }
.read-article h4{ font-size: 1em; font-weight:600; margin:1.5em 0 .5em; color:var(--read-muted) }

/* ---------- 6. 行内元素 ---------- */
.read-article a{
  color: var(--read-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--read-accent);
  padding-bottom: 1px;
  transition: background-color .2s ease;
}
.read-article a:hover{ background: var(--read-mark) }
.read-article strong{ font-weight:600 }
.read-article em{ font-style:normal;
  /* 中文强调不用斜体（斜体中文丑且难读），用侧重点 */
  text-emphasis: filled dot; -webkit-text-emphasis: filled dot;
  text-emphasis-position: under right;
}
.read-article del, .read-article s{ color: var(--read-faint) }

/* ---------- 7. 引用 / 列表 ---------- */
.read-article blockquote{
  margin: 1.6em 0; padding: .2em 0 .2em 1.1em;
  border-inline-start: 2px solid var(--read-accent);
  color: var(--read-muted); font-size: .96em;
}
.read-article ul, .read-article ol{ padding-inline-start: 1.6em; margin: 1em 0 }
.read-article li{ margin: .45em 0; text-indent: 0 }
.read-article li::marker{ color: var(--read-accent) }

/* ---------- 8. 代码 ---------- */
.read-article code{
  font-family: ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  font-size: .88em; background: var(--read-code-bg);
  padding: .12em .38em; border-radius: 4px;
}
.read-article pre{
  background: var(--read-code-bg); padding: 1em 1.2em; border-radius: 10px;
  overflow-x: auto; line-height: 1.6; margin: 1.4em 0;
  direction: ltr;                 /* 代码永远左起，不受 rtl 影响 */
}
.read-article pre code{ background:none; padding:0; font-size:.85em }

/* ---------- 9. 图片 ---------- */
.read-article img{
  max-width: 100%; height: auto; display: block;
  margin: 1.8em auto; border-radius: 8px;
}
.read-article figure{ margin: 2em 0 }
.read-article figcaption{
  text-align: center; font-size: .85em; color: var(--read-faint);
  margin-top: .7em; font-family: var(--read-sans); letter-spacing: .04em;
}

/* ---------- 10. 分隔线 ---------- */
.read-article hr{
  border: none; height: 1px; background: var(--read-line);
  margin: 2.6em auto; width: 40%;
}

/* ---------- 11. 表格 ---------- */
.read-article table{
  width:100%; border-collapse: collapse; margin: 1.6em 0;
  font-size: .93em; font-family: var(--read-sans);
}
.read-article th, .read-article td{
  border-bottom: 1px solid var(--read-line); padding: .6em .5em; text-align: start;
}
.read-article th{ font-weight:600; color: var(--read-accent) }

/* ---------- 12. 移动端微调 ---------- */
@media (max-width: 640px){
  .read-article{
    line-height: 1.85;            /* 屏幕小、字密，行距要更松 */
    letter-spacing: .015em;       /* 小屏字距略收，避免行尾提前折行 */
    text-align: start;            /* 窄屏不做两端对齐，否则字距会被拉出大空隙 */
  }
  .read-article h2{ margin-top: 1.9em }
}

/* ---------- 13. 长文性能：视口外的图/段落跳过渲染 ---------- */
@supports (content-visibility: auto){
  .read-article figure,
  .read-article pre,
  .read-article table{ content-visibility: auto; contain-intrinsic-size: auto 420px; }
}

/* ---------- 14. 无障碍 ---------- */
@media (prefers-reduced-motion: reduce){
  .read-article *{ animation: none !important; transition: none !important }
}
.read-article :focus-visible{
  outline: 2px solid var(--read-accent); outline-offset: 3px; border-radius: 3px;
}
/* 打印：去背景、保链接地址 */
@media print{
  .read-article{ color:#000; background:#fff; max-width:none }
  .read-article a::after{ content:" (" attr(href) ")" }
}

/* ---------- 15. 阅读进度条（纯 CSS 滚动驱动，零 JS 运行时） ---------- */
.read-progress{
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  height: 2px; width: 100%; z-index: 8500;
  background: linear-gradient(90deg, var(--read-accent), #e8c98f);
  transform-origin: left;
}
@supports (animation-timeline: scroll()){
  .read-progress{
    transform: scaleX(0);
    animation: read-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes read-progress{ to{ transform: scaleX(1) } }

/* ---------- 16. 明暗切换按钮（44×44 触控标准） ---------- */
.read-theme-btn{
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  font-size: 17px; line-height: 1;
  background: var(--read-code-bg); color: var(--read-ink);
  border: 1px solid var(--read-line);
  backdrop-filter: blur(8px);
  z-index: 8600; opacity: .55;
  transition: opacity .2s ease, transform .2s ease;
}
.read-theme-btn:hover{ opacity: 1; transform: scale(1.06) }
@media (prefers-reduced-motion: reduce){
  .read-theme-btn{ transition: none }
}