/*
 * 阅读偏好层 — 三本书共用（robot / numerical / matrix 三份内容逐字相同）
 * ---------------------------------------------------------------------------
 * 与各书的权威样式表（robot.css / na.css / matrix.css）**分工明确**：
 *   · 权威样式表定义「这本书长什么样」——设计令牌、组件、版式基线；
 *   · 本文件只定义「读者想把这本书调成什么样」，全部由根元素上的 data-* 属性驱动，
 *     由 theme/js/prefs.js 写入。
 *
 * 六个轴，各管一件事：
 *   data-font     字体（无衬线 / 衬线 / 楷体 / 系统）
 *   data-size     字号（小 / 中 / 大 / 特大）
 *   data-density  行距与间距（紧凑 / 标准 / 宽松 / 超宽）——整套间距由令牌驱动
 *   data-width    版心宽度（窄 / 标准 / 宽 / 超宽）
 *   data-palette  主题色（随主题 / 海蓝 / 青绿 / 松绿 / 琥珀 / 高对比 / 档案红 / 工程蓝 / 酸性黄）
 *   data-bg       背景纹理（随主题 / 柔和光感 / 纯净 / 细网格 / 方格纸 / 横线稿纸 / 点阵 / 纸张纤维 / 蓝图网格 / 帘纹纸）
 *
 * **与菜单栏主题弹层的关系**：主题弹层负责明暗与代码高亮；本面板的主题色同时
 * 调整强调色与纸张/卡片底色，明暗仍交给原生主题弹层，两个入口不抢同一件事。
 *
 * 为什么是「属性驱动」而不是内联 style：
 *   1. 偏好要能覆盖权威样式里的自定义属性（如 --content-max-width），而自定义属性
 *      的覆盖靠选择器特异性 + 源顺序；属性选择器特异性高于 :root，本文件又最后加载。
 *   2. 默认档（sans / m / standard / standard / theme）不写任何属性，外观与设置面板
 *      出现之前逐像素一致——升级不改变任何读者的现有观感。
 *
 * 加载顺序：book.toml 的 additional-css 里排在权威样式表与 framework.css **之后**
 * （framework.css 也接管了 .content p / li / ol / ul 的行高），这样同特异性的声明
 * 由本文件胜出。head.hbs 在首帧前写好属性，避免先按默认外观画一帧再跳。
 */

/* ======================================================================== *
 * §1  字体族
 *   默认使用清晰的无衬线正文；需要长文衬线或楷体时可以切换。导航与控件始终使用 sans。
 * ======================================================================== */
html[data-font="serif"] body,
html[data-font="serif"] .content,
html[data-font="serif"] .content p,
html[data-font="serif"] .content li,
html[data-font="serif"] .content table,
html[data-font="serif"] .content figcaption{font-family:var(--serif-text)}

html[data-font="sans"] body,
html[data-font="sans"] .content,
html[data-font="sans"] .content p,
html[data-font="sans"] .content li{font-family:var(--sans)}
/* 无衬线正文略收紧行高与字距 */
html[data-font="sans"] .content{letter-spacing:.002em}
html[data-font="sans"] .content p,
html[data-font="sans"] .content li{font-family:var(--sans);line-height:calc(var(--reading-lh) - .04)}

html[data-font="kai"] body,
html[data-font="kai"] .content,
html[data-font="kai"] .content p,
html[data-font="kai"] .content li{
  font-family:"Kaiti SC","STKaiti","KaiTi","AR PL UKai CN","Noto Serif CJK SC",serif;
}
/* 楷体骨架细、字形宽，行距略放宽一点才不显得挤 */
html[data-font="kai"] .content{letter-spacing:.012em}
html[data-font="kai"] .content p,
html[data-font="kai"] .content li{line-height:calc(var(--reading-lh) + .06)}

html[data-font="system"] body,
html[data-font="system"] .content,
html[data-font="system"] .content p,
html[data-font="system"] .content li{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
}

/* ======================================================================== *
 * §2  字号（s / m / l / xl；m 为基线 16px，不写属性）
 * ======================================================================== */
html[data-size="s"] .content{font-size:15px}
html[data-size="l"] .content{font-size:17.5px}
html[data-size="xl"] .content{font-size:19px}

/* ======================================================================== *
 * §3  行距与间距（density）
 * ------------------------------------------------------------------------
 * 一次调整四处：正文行高、段间距、块级（盒子/折叠/图）内边距与间距、整页留白。
 * 实现方式是**令牌驱动**：先声明一套基线值（= 权威样式表的现值），四档只改令牌，
 * 组件规则只写一遍。这样加一档只需加 12 个数字，不必复制一整套组件规则。
 *
 * 行高必须写在 .content p / li / ol / ul 上：mdBook 的 chrome 样式自带
 * `.content p{line-height:1.45em}`，比 `.content` 更细，会把权威样式表顶掉。
 * ======================================================================== */
:root{
  --reading-lh:1.72;
  --reading-para-gap:12px;
  --reading-h2-gap:64px;
  --reading-h3-gap:44px;
  --reading-h4-gap:30px;
  --reading-box-gap:20px;
  --reading-box-pad:18px 22px 14px;
  --reading-proof-gap:16px;
  --reading-proof-pad:12px 17px 6px;
  --reading-detail-gap:13px;
  --reading-detail-pad:10px 17px;
  --reading-sol-pad:8px 19px 12px;
  --reading-fig-gap:28px;
  --reading-fig-pad:20px 18px 12px;
  --reading-quote-gap:16px;
  --reading-quote-pad:12px 18px;
}
html[data-density="compact"]{
  --reading-lh:1.62;--reading-para-gap:8px;
  --reading-h2-gap:46px;--reading-h3-gap:32px;--reading-h4-gap:22px;
  --reading-box-gap:14px;--reading-box-pad:14px 18px 10px;
  --reading-proof-gap:12px;--reading-proof-pad:10px 15px 5px;
  --reading-detail-gap:9px;--reading-detail-pad:8px 15px;
  --reading-sol-pad:6px 17px 10px;
  --reading-fig-gap:20px;--reading-fig-pad:15px 14px 9px;
  --reading-quote-gap:12px;--reading-quote-pad:10px 15px;
}
html[data-density="loose"]{
  --reading-lh:1.86;--reading-para-gap:16px;
  --reading-h2-gap:78px;--reading-h3-gap:54px;--reading-h4-gap:36px;
  --reading-box-gap:26px;--reading-box-pad:22px 26px 17px;
  --reading-proof-gap:20px;--reading-proof-pad:15px 20px 8px;
  --reading-detail-gap:17px;--reading-detail-pad:13px 20px;
  --reading-sol-pad:11px 22px 16px;
  --reading-fig-gap:34px;--reading-fig-pad:24px 22px 15px;
  --reading-quote-gap:20px;--reading-quote-pad:14px 21px;
}
html[data-density="roomy"]{
  --reading-lh:2;--reading-para-gap:20px;
  --reading-h2-gap:92px;--reading-h3-gap:64px;--reading-h4-gap:42px;
  --reading-box-gap:32px;--reading-box-pad:26px 30px 20px;
  --reading-proof-gap:24px;--reading-proof-pad:18px 24px 10px;
  --reading-detail-gap:21px;--reading-detail-pad:16px 24px;
  --reading-sol-pad:14px 26px 19px;
  --reading-fig-gap:40px;--reading-fig-pad:28px 26px 18px;
  --reading-quote-gap:24px;--reading-quote-pad:17px 25px;
}

/* 只调桌面端的页面留白：≤900px 的 --page-padding 由权威样式表的响应式段接管
   （701–900px 收 20px，≤700px 收 16px），这里若不加宽度条件会把它顶掉。 */
@media (min-width:901px){
  html[data-density="compact"]{--page-padding:18px}
  html[data-density="loose"]{--page-padding:34px}
  html[data-density="roomy"]{--page-padding:40px}
}

.content p,.content li,.content ol,.content ul{line-height:var(--reading-lh)}
.content p{margin:var(--reading-para-gap) 0}
.content h2{margin:var(--reading-h2-gap) 0 20px}
.content h3{margin:var(--reading-h3-gap) 0 12px}
.content h4{margin:var(--reading-h4-gap) 0 6px}
.box{margin:var(--reading-box-gap) 0;padding:var(--reading-box-pad)}
.proof{margin:var(--reading-proof-gap) 0 4px;padding:var(--reading-proof-pad)}
details.sol-box{margin:var(--reading-detail-gap) 0}
details.sol-box>summary{padding:var(--reading-detail-pad)}
.sol-inner{padding:var(--reading-sol-pad)}
.content figure{margin:var(--reading-fig-gap) 0;padding:var(--reading-fig-pad)}
.content blockquote{margin:var(--reading-quote-gap) 0;padding:var(--reading-quote-pad)}

/* ======================================================================== *
 * §4  版心宽度（narrow / standard / wide / full；standard 为 820px）
 *   mdBook 把阅读列宽度放在 --content-max-width 上，改写它即可。
 *   正文栏变宽后，右侧粘性大纲（framework.js）会因空间不足自动让位，见 §5。
 * ======================================================================== */
html[data-width="narrow"]{--content-max-width:680px}
html[data-width="wide"]{--content-max-width:1000px}
html[data-width="full"]{--content-max-width:1180px}

/* ======================================================================== *
 * §5  强调色（palette）
 * ------------------------------------------------------------------------
 * 只改链接、选中态与控件强调色；背景、侧栏、边框与文字始终跟随 mdBook 主题。
 * 因而浅色/深色主题可以自由切换，而强调色不会带来另一套不协调的纸张色。
 * ======================================================================== */
html[data-palette="blue"]:not(.coal):not(.navy):not(.ayu){
  --accent:#2f74b8;--accent-strong:#205f9e;--accent-text:#205f9e;--link-color:var(--accent-strong);
}
html[data-palette="teal"]:not(.coal):not(.navy):not(.ayu){
  --accent:#287d82;--accent-strong:#20676b;--accent-text:#20676b;--link-color:var(--accent-strong);
}
html[data-palette="green"]:not(.coal):not(.navy):not(.ayu){
  --accent:#4f7a52;--accent-strong:#3d6340;--accent-text:#3d6340;--link-color:var(--accent-strong);
}
html[data-palette="amber"]:not(.coal):not(.navy):not(.ayu){
  --accent:#a65d2c;--accent-strong:#85451f;--accent-text:#85451f;--link-color:var(--accent-strong);
}
html[data-palette="contrast"]:not(.coal):not(.navy):not(.ayu){
  --accent:#a3370f;--accent-strong:#8a2c0b;--accent-text:#8a2c0b;--link-color:var(--accent-strong);
}
html[data-palette="blue"].coal,html[data-palette="blue"].navy,html[data-palette="blue"].ayu{
  --accent:#91bee7;--accent-strong:#b0d4f4;--accent-text:#b0d4f4;--link-color:var(--accent);
}
html[data-palette="teal"].coal,html[data-palette="teal"].navy,html[data-palette="teal"].ayu{
  --accent:#78c5c2;--accent-strong:#9ddbd7;--accent-text:#9ddbd7;--link-color:var(--accent);
}
html[data-palette="green"].coal,html[data-palette="green"].navy,html[data-palette="green"].ayu{
  --accent:#a6d69c;--accent-strong:#c3e8b9;--accent-text:#c3e8b9;--link-color:var(--accent);
}
html[data-palette="amber"].coal,html[data-palette="amber"].navy,html[data-palette="amber"].ayu{
  --accent:#e8b36c;--accent-strong:#f3ca91;--accent-text:#f3ca91;--link-color:var(--accent);
}
html[data-palette="contrast"].coal,html[data-palette="contrast"].navy,html[data-palette="contrast"].ayu{
  --accent:#ffd080;--accent-strong:#ffe0a6;--accent-text:#ffe0a6;--link-color:var(--accent);
}

html[data-palette="archive"]:not(.coal):not(.navy):not(.ayu){
  --accent:#8b3a2a;--accent-strong:#6f2c20;--accent-text:#6f2c20;--link-color:var(--accent-strong);
}
html[data-palette="blueprint"]:not(.coal):not(.navy):not(.ayu){
  --accent:#2f6f8f;--accent-strong:#235a75;--accent-text:#235a75;--link-color:var(--accent-strong);
}
html[data-palette="endfield"]:not(.coal):not(.navy):not(.ayu){
  --accent:#7c8a12;--accent-strong:#5f6b00;--accent-text:#5f6b00;--link-color:var(--accent-strong);
}
html[data-palette="archive"].coal,html[data-palette="archive"].navy,html[data-palette="archive"].ayu{
  --accent:#d79a89;--accent-strong:#e8b5a8;--accent-text:#e8b5a8;--link-color:var(--accent);
}
html[data-palette="blueprint"].coal,html[data-palette="blueprint"].navy,html[data-palette="blueprint"].ayu{
  --accent:#7fb7d9;--accent-strong:#a9d4ee;--accent-text:#a9d4ee;--link-color:var(--accent);
}
html[data-palette="endfield"].coal,html[data-palette="endfield"].navy,html[data-palette="endfield"].ayu{
  --accent:#d6ff3f;--accent-strong:#e6ff86;--accent-text:#e6ff86;--link-color:var(--accent);
}

/* 新主题的纸色：只改纸张/卡片，不改变文字与语义色 */

html[data-palette="blueprint"]:not(.coal):not(.navy):not(.ayu){
  --page:#eef3f7;--sidebar:#e7edf1;--paper:#f9fbfc;--paper-soft:#eef3f7;
  --surface-card:rgba(249,251,252,.94);--surface-soft:rgba(238,243,247,.72);
}

html[data-palette="archive"]:not(.coal):not(.navy):not(.ayu){
  --page:#f2ecdf;--sidebar:#ebe3d4;--paper:#fbf6ea;--paper-soft:#f3ecdf;
  --surface-card:rgba(251,246,234,.94);--surface-soft:rgba(243,236,223,.72);
}
html[data-palette="endfield"]:not(.coal):not(.navy):not(.ayu){
  --page:#e8e6df;--sidebar:#dedcd4;--paper:#f3f1ea;--paper-soft:#e9e7df;
  --surface-card:rgba(243,241,234,.94);--surface-soft:rgba(233,231,223,.72);
}
html[data-palette="blueprint"].coal,html[data-palette="blueprint"].navy,html[data-palette="blueprint"].ayu{
  --page:#0d1b27;--sidebar:#112333;--paper:#142838;--paper-soft:#1b3142;
  --surface-card:rgba(20,40,56,.94);--surface-soft:rgba(27,49,66,.72);
}
html[data-palette="blue"],html[data-palette="teal"],
html[data-palette="green"],html[data-palette="amber"],html[data-palette="contrast"],
html[data-palette="archive"],html[data-palette="blueprint"],html[data-palette="endfield"]{
  --accent-soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --mark-bg:color-mix(in srgb,var(--accent) 24%,var(--page));
}

/* ======================================================================== *
 * §5.5  语义提示色
 * ------------------------------------------------------------------------
 * 语义色保留为低饱和提示，不跟随强调色变化；主题只负责改变纸张与文字的明暗。
 * ======================================================================== */
html[data-palette]{
  --def-bg:color-mix(in srgb,var(--sem-def) 6%,var(--surface-card));
  --def-line:color-mix(in srgb,var(--sem-def) 62%,var(--line-strong));
  --def-ink:color-mix(in srgb,var(--sem-def) 55%,var(--ink));

  --thm-bg:color-mix(in srgb,var(--sem-thm) 6%,var(--surface-card));
  --thm-line:color-mix(in srgb,var(--sem-thm) 62%,var(--line-strong));
  --thm-ink:color-mix(in srgb,var(--sem-thm) 55%,var(--ink));

  --ex-bg:color-mix(in srgb,var(--sem-ex) 6%,var(--surface-card));
  --ex-line:color-mix(in srgb,var(--sem-ex) 62%,var(--line-strong));
  --ex-ink:color-mix(in srgb,var(--sem-ex) 55%,var(--ink));

  --think-bg:color-mix(in srgb,var(--sem-think) 6%,var(--surface-card));
  --think-line:color-mix(in srgb,var(--sem-think) 62%,var(--line-strong));
  --think-ink:color-mix(in srgb,var(--sem-think) 55%,var(--ink));

  --err-bg:color-mix(in srgb,var(--sem-err) 6%,var(--surface-card));
  --err-line:color-mix(in srgb,var(--sem-err) 62%,var(--line-strong));
  --err-ink:color-mix(in srgb,var(--sem-err) 55%,var(--ink));

  --method-bg:color-mix(in srgb,var(--sem-method) 6%,var(--surface-card));
  --method-line:color-mix(in srgb,var(--sem-method) 62%,var(--line-strong));
  --method-ink:color-mix(in srgb,var(--sem-method) 55%,var(--ink));

  --intuition-bg:color-mix(in srgb,var(--sem-intuition) 6%,var(--surface-card));
  --intuition-line:color-mix(in srgb,var(--sem-intuition) 62%,var(--line-strong));
  --intuition-ink:color-mix(in srgb,var(--sem-intuition) 55%,var(--ink));

  /* 阴影去暖：暖纸的阴影是棕调，落在冷 / 绿配色上会发脏（暗色档保持纯黑） */
}
html[data-palette]:not(.coal):not(.navy):not(.ayu){--shadow-ink:color-mix(in srgb,var(--ink) 88%,transparent)}
html[data-palette].coal,
html[data-palette].navy,
html[data-palette].ayu{--shadow-ink:rgba(0,0,0,.90)}

/* ======================================================================== *
 * §5.6  背景纹理（bg）
 * ------------------------------------------------------------------------
 * 七个档：随主题（默认纯色底）/ 柔和光感 / 纯净 / 细网格 /
 * 方格纸 / 横线稿纸 / 点阵 / 纸张纤维。全部由令牌算出（--grid-line、--grid-strong、
 * --dot、--fiber、--wash-*），因此与明暗主题、纸张配色都正交，不必逐档配色值。
 * 不透明度压在 2–14%：只做「纸感」，不与正文抢注意力；打印一律回到纯色。
 * ======================================================================== */
/* 每个档位只声明「图案 + 重复尺寸」两个自定义属性，再统一落到两层上：
   · body            —— 页面外侧（侧栏之外）的底；
   · .page-wrapper   —— mdBook 自己会给它画一层不透明底（background:var(--bg)），
                        正文区的底纹其实一直被它挡住，所以必须同时画在这里。 */
html[data-bg="plain"]{--bg-stack:none;--bg-size:auto}

/* 柔和光感：轻微的强调色与辅助色晕染，默认保持干净纯色。 */
html[data-bg="wash"]{
  --bg-stack:
    radial-gradient(circle at 8% 0%,var(--wash-accent),transparent 24%),
    radial-gradient(circle at 96% 100%,var(--wash-sage),transparent 26%),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    var(--page);
  --bg-size:auto,auto,28px 28px,28px 28px,auto;
}

html[data-bg="grid"]{
  --bg-stack:
    linear-gradient(90deg,var(--grid-mid) 1px,transparent 1px),
    linear-gradient(var(--grid-mid) 1px,transparent 1px),
    var(--page);
  --bg-size:28px 28px,28px 28px,auto;
}

/* 方格纸：28px 细格 + 140px 粗格（数学草稿纸的比例） */
html[data-bg="graph"]{
  --bg-stack:
    linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-mid) 1px,transparent 1px),
    linear-gradient(var(--grid-mid) 1px,transparent 1px),
    var(--page);
  --bg-size:140px 140px,140px 140px,28px 28px,28px 28px,auto;
}

/* 横线稿纸：只画横线，28px 一行 */
html[data-bg="ruled"]{
  --bg-stack:repeating-linear-gradient(to bottom,var(--grid-mid) 0 1px,transparent 1px 28px),var(--page);
  --bg-size:auto,auto;
}

/* 点阵：20px 一个点 */
html[data-bg="dots"]{
  --bg-stack:radial-gradient(circle at 1px 1px,var(--dot) 1.1px,transparent 1.8px),var(--page);
  --bg-size:20px 20px,auto;
}

/* 纸张纤维：三组极淡的斜向帘纹，模拟手工纸的织理 */

html[data-bg="blueprint"]{
  --bp-line:color-mix(in srgb,var(--accent) 13%,transparent);
  --bp-line-soft:color-mix(in srgb,var(--accent) 7%,transparent);
  --bg-stack:
    linear-gradient(90deg,var(--bp-line) 1px,transparent 1px),
    linear-gradient(var(--bp-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--bp-line-soft) 1px,transparent 1px),
    linear-gradient(var(--bp-line-soft) 1px,transparent 1px),
    var(--page);
  --bg-size:80px 80px,80px 80px,20px 20px,20px 20px,auto;
}
html[data-bg="laid"]{
  --laid-line:color-mix(in srgb,var(--ink) 4.5%,transparent);
  --laid-chain:color-mix(in srgb,var(--ink) 2.5%,transparent);
  --bg-stack:
    repeating-linear-gradient(to bottom,var(--laid-line) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(to right,var(--laid-chain) 0 1px,transparent 1px 120px),
    var(--page);
  --bg-size:auto,auto,auto;
}
html[data-bg="paper"]{
  --bg-stack:
    repeating-linear-gradient(115deg,var(--fiber) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(25deg,var(--fiber) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(to bottom,var(--fiber) 0 1px,transparent 1px 3px),
    var(--page);
  --bg-size:auto,auto,auto,auto;
}

html[data-bg] body,
html[data-bg] .page-wrapper{
  background:var(--bg-stack);
  background-size:var(--bg-size);
}

/* ======================================================================== *
 * §6  设置面板（结构由 theme/js/prefs.js 注入）
 *   按钮挨着原生主题钮放在菜单栏左侧（同属「外观」），面板由 JS 定位到按钮下方。
 * ======================================================================== */
/* 按钮的盒子与 hover / 按下反馈全部交给 .icon-button（框架 + 权威样式表），
   这里只补「展开时」比原生多出来的一档状态与 Aa 字形本身。 */
#mdbook-menu-bar .prefs-toggle[aria-expanded="true"]{color:var(--accent-text);background:var(--accent-soft);border-color:var(--accent)}
#mdbook-menu-bar .prefs-toggle .prefs-aa{font:700 15px/1 var(--serif-display);letter-spacing:.02em}

.theme-popup,.prefs-panel{
  border-color:var(--line-strong);border-radius:9px;
  box-shadow:0 14px 32px var(--shadow-soft);
}
.theme-popup{
  overflow:hidden;
  font:12px/1.5 var(--sans);
}
.theme-popup .theme{padding:4px 18px;line-height:28px}
.theme-popup .theme-selected{color:var(--accent-text);font-weight:650}

.prefs-panel{
  position:absolute;top:100%;left:10px;z-index:1000;
  box-sizing:border-box;
  width:min(380px,calc(100vw - 20px));
  /* 多个设置组会使面板变高：矮屏（笔记本半屏、横放手机）给一个上限并内部滚动，
     否则最后两行会被顶出视口，读者以为没有这些选项。 */
  max-height:calc(100vh - var(--menu-bar-height, 58px) - 16px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:15px 16px 13px;
  border:1px solid var(--line-strong);border-radius:9px;
  background:var(--paper);
  font-family:var(--sans);color:var(--ink);
}
.prefs-panel[hidden]{display:none}
.prefs-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 10px;
}
.prefs-head b{font:700 13px/1.3 var(--sans);letter-spacing:.02em}
.prefs-head span{color:var(--muted);font:10.5px/1.4 var(--sans)}
.prefs-row{margin:0 0 12px}
.prefs-row:last-of-type{margin-bottom:4px}
.prefs-label{
  display:block;margin:0 0 6px;color:var(--muted);
  font:700 10px/1.4 var(--mono);letter-spacing:.1em;
}
.prefs-opts{display:flex;flex-wrap:wrap;gap:6px}
/* 预设按钮：与站内既有的同族控件（权威样式表里的 .sol-toolbar button）同一套语言 */
.prefs-opt{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);color:var(--ink-2);
  font:600 11px/1.4 var(--sans);letter-spacing:.04em;cursor:pointer;
  transition:border-color 120ms ease,background 120ms ease,color 120ms ease,box-shadow 120ms ease;
}
.prefs-opt:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-soft)}
.prefs-opt[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
.prefs-opt[aria-pressed="true"]:hover{box-shadow:0 0 0 2px var(--accent-soft)}
.prefs-swatch{
  width:10px;height:10px;flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--ink) 24%,transparent);border-radius:50%;
  background:var(--swatch,transparent);
}
.prefs-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
}
.prefs-note{color:var(--muted);font:10.5px/1.5 var(--sans)}
.prefs-reset{
  padding:5px 11px;border:1px solid var(--line-strong);border-radius:6px;
  background:transparent;color:var(--ink-2);
  font:600 11px/1.4 var(--sans);letter-spacing:.04em;cursor:pointer;
}
.prefs-reset:hover{border-color:var(--ink);color:var(--ink);background:var(--paper-soft)}


/* 背景纹理：文字 chip → 真实纸样 */
.prefs-row[data-pref="bg"] .prefs-opts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;
}
.prefs-row[data-pref="bg"] .prefs-opt{
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  min-width:0;padding:4px;border-radius:4px;
  font:600 9.5px/1.3 var(--sans);letter-spacing:.02em;text-align:left;
}
.prefs-paper{
  display:block;height:31px;border:1px solid var(--line);border-radius:2px;
  background-color:var(--paper);background-repeat:repeat;
}
.prefs-paper[data-paper="theme"]{
  background-image:radial-gradient(circle at 9px 9px,color-mix(in srgb,var(--accent) 20%,transparent) 0 1.5px,transparent 2px);
  background-size:18px 18px;
}
.prefs-paper[data-paper="plain"]{background-image:none}
.prefs-paper[data-paper="wash"]{
  background-image:
    radial-gradient(circle at 8% 0%,var(--wash-accent),transparent 48%),
    radial-gradient(circle at 96% 100%,var(--wash-sage),transparent 52%);
}
.prefs-paper[data-paper="grid"]{
  background-image:
    linear-gradient(90deg,var(--grid-mid) 1px,transparent 1px),
    linear-gradient(var(--grid-mid) 1px,transparent 1px);
  background-size:9px 9px;
}
.prefs-paper[data-paper="graph"]{
  background-image:
    linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-mid) 1px,transparent 1px),
    linear-gradient(var(--grid-mid) 1px,transparent 1px);
  background-size:18px 18px,18px 18px,9px 9px,9px 9px;
}
.prefs-paper[data-paper="ruled"]{
  background-image:repeating-linear-gradient(to bottom,var(--grid-mid) 0 1px,transparent 1px 7px);
}
.prefs-paper[data-paper="dots"]{
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1.1px,transparent 1.8px);
  background-size:8px 8px;
}

.prefs-paper[data-paper="blueprint"]{
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent) 1px,transparent 1px),
    linear-gradient(color-mix(in srgb,var(--accent) 16%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px),
    linear-gradient(color-mix(in srgb,var(--accent) 8%,transparent) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,5px 5px,5px 5px;
}
.prefs-paper[data-paper="laid"]{
  background-image:
    repeating-linear-gradient(to bottom,var(--grid-mid) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(to right,var(--grid-line) 0 1px,transparent 1px 28px);
}
.prefs-paper[data-paper="paper"]{
  background-image:
    repeating-linear-gradient(115deg,var(--fiber) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(25deg,var(--fiber) 0 1px,transparent 1px 6px);
}
@media(max-width:420px){
  .prefs-row[data-pref="bg"] .prefs-opts{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 窄屏：面板贴到视口两侧，避免超出右缘被裁 */
@media (max-width:560px){
  .prefs-panel{left:8px;width:calc(100vw - 16px)}
}

/* 打印：偏好面板属屏幕阅读；字体 / 字号 / 密度 / 配色仍尊重读者选择（见上） */
@media print{
  .prefs-toggle,.prefs-panel{display:none!important}
  /* 纸面上不要纹理：属性选择器的特异性高于打印块里的 body 规则，这里显式压回 */
  html[data-bg] body,html[data-bg] .page-wrapper{background:var(--page)!important}
}