/*
 * 矩阵论 · 第一章教程 — mdBook 主题
 * ---------------------------------------------------------------------------
 * 设计规范：Academy / ink-warm / standard density / Ayu dark preset。
 * 侧栏以 RustWiki/mdBook 的连续目录流为基准：300px 宽、10px 内边距、
 * 1.5em 行高、0.6em 行间距、20px 子级缩进，hover 仅换色。
 * 字体角色：display serif = 章节层级；text serif = 长文阅读；
 *           sans = 导航与控件；mono = 编号、标签与证据。
 *
 * 本文件是唯一的视觉源。mdBook 变量映射在 §1，组件在 §2 之后。
 * 不要在这里写与内容相关的样式；内容语义由 tools/mathbook.py 生成的类名承载
 * （.box.def / .box.thm / .box.ex / .box.think / .box.errata / .box.method /
 *   .proof / details.sol-box / details.hint-box / a.crossref / .meta-strip）。
 */

/* ======================================================================== *
 * §1  本书对 base.css 令牌层的覆盖
 * ------------------------------------------------------------------------
 * base.css（三本共用）已声明完整令牌层；这里只保留**本书与它不同**的块与行，
 * 由上面「逐块比对」得出。改令牌请优先改 base.css。
 * ======================================================================== */
/* （本书与 base 无差异） */

/* ======================================================================== *
 * §2  mdBook 框架适配
 * ======================================================================== */
body{
  background:var(--page);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

#mdbook-menu-bar{
  border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  /* 不透明：半透明底会让滚动时正文从顶栏后透出（与 na.css 同步的坑） */
  background:var(--page);
}

@media (max-width:900px){
  #mdbook-menu-bar .portal-home{padding:0 var(--space-2)}
  #mdbook-menu-bar .portal-home-label{display:none}
}

.content p{margin:var(--space-3) 0;text-align:left;font-family:var(--sans)}

/* 例题解答（可折叠）
   折叠态此前只是一行文字，看不出「这里可以点、点开有什么」。改为一条有底色的
   横栏 + 右对齐的「展开 / 收起」提示 + 悬停反馈，与《数值分析》《机器人控制技术》
   同一套处理，三本书的同一交互外观一致。 */
details.sol-box{
  margin:13px 0;border:1px solid var(--line);background:var(--paper);
}

details.sol-box>summary::after{
  content:"展开";margin-left:auto;color:var(--muted);
  font:600 var(--fs-2xs)/1 var(--mono);letter-spacing:.09em;
}

/* 思路提示（可折叠，比解答更轻：虚线、暖色、更小字号）。
   与解答分层，让学生先拿到「从哪下手」而不直接看到全过程。 */
details.hint-box{
  margin:11px 0;border:1px dashed var(--think-line);
  background:var(--think-bg);border-radius:2px;
}

details.hint-box>summary{
  display:flex;align-items:center;gap:9px;
  padding:var(--space-2) 15px;color:var(--think-ink);
  font:700 10.5px/1.5 var(--sans);letter-spacing:.06em;
  cursor:pointer;list-style:none;user-select:none;
}

details.hint-box>summary::-webkit-details-marker{display:none}

details.hint-box>summary::before{
  content:"";width:5px;height:5px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(-45deg);transition:transform .16s;
}

details.hint-box[open]>summary{border-bottom:1px dashed var(--think-line)}

details.hint-box[open]>summary::before{transform:rotate(45deg)}

.hint-inner{padding:var(--space-2) 17px 10px;color:var(--think-ink);font-size:14.5px}

.hint-inner p:first-child{margin-top:0}

.hint-inner p:last-child{margin-bottom:0}

/* 插图占满版心宽度：SVG 是矢量，放大不损失清晰度；
 * 小尺寸插图（如 330px 宽的手绘坐标系）若按原尺寸显示，标注会小到看不清。
 * 宽插图（viewBox 920）会等比略缩，与原设计在 820px 栏内的观感一致。 */
.content figure svg{display:block;width:100%;height:auto;margin:2px auto}

/* 宽公式可横向滚动的视觉提示（matrix.js 标注 can-scroll / scrolled-start）：
 * 右缘 / 左缘 28px 渐隐指向被裁掉的继续部分；滚到尽头时 JS 撤下提示。
 * 渐隐取 --page 而非透明，避免文字从两层渐隐中透出重影。 */
.katex-display{position:relative;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}

.katex-display.can-scroll::after,
.katex-display.scrolled-start::before{
  content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;
}

.katex-display.can-scroll::after{
  right:0;
  background:linear-gradient(to left,var(--page),transparent);
}

.katex-display.scrolled-start::before{
  left:0;
  background:linear-gradient(to right,var(--page),transparent);
}

/* 回到顶部（theme/js/matrix.js 注入）：默认隐藏，滚过约一屏半后 .visible。
 * right 取 112px：避开 mdBook 右缘 90px 宽的「下一页」悬停热区，
 * 免得箭头钮与回顶钮在同一角落竖着叠成一串。 */
#back-to-top{
  position:fixed;right:112px;bottom:26px;z-index:60;
  width:38px;height:38px;padding:0;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface-card);color:var(--ink-2);
  font:600 16px/1 var(--sans);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(var(--space-2));
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  box-shadow:0 var(--space-1) 14px var(--shadow-ink);
}

#back-to-top.visible{opacity:1;visibility:visible;transform:none}

#back-to-top:hover{border-color:var(--ink);color:var(--ink)}

#back-to-top:active{transform:scale(.94)}

@media only screen and (max-width:700px){
  #back-to-top{right:14px;bottom:18px;width:var(--space-10);height:var(--space-10)}
}

.chapter-cover h1{
  max-width:760px;margin:0 0 14px;padding:0;border:0;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(36px,4vw,48px);line-height:1.16;letter-spacing:0;
}

/* ======================================================================== *
 * §6  页内目录（theme/js/matrix.js 在 H2 ≥ 3 的页面注入）与阅读进度条
 * ======================================================================== */
.page-toc{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px 22px;
  margin:26px 0 30px;padding:13px 17px 11px;
  border:1px solid var(--line);background:var(--paper-soft);
}

/* 页内锚点平滑滚动（prefers-reduced-motion 下方的全局规则会关掉） */
html{scroll-behavior:smooth}

/* ======================================================================== *
 * §7  响应式
 * ======================================================================== */
@media only screen and (max-width:700px){
  :root{--page-padding:var(--space-4)}
  /* 移动端抽屉顶部留白：让首个条目不被悬浮的目录开关按钮压住 */
  #mdbook-sidebar .chapter{margin-top:68px}
  .content h1{font-size:var(--fs-h2)}
  .chapter-cover{padding:34px 0 30px}
  .chapter-cover::after{font-size:140px}
  .chapter-cover .kicker{margin-bottom:30px}
  .chapter-cover h1{font-size:36px}
  .cover-chips{grid-template-columns:1fr;margin-top:var(--space-6)}
  .cover-chips span:nth-child(odd){border-right:0}
  .cover-chips span:nth-child(even){padding-left:0}
  .index-cards{padding-left:25px}
  .index-cards a{display:block;padding:var(--space-3) 9px}
  .index-cards .no,.index-cards .t,.index-cards .d,.index-cards .go{display:block;margin-bottom:5px}
  .study-paths{grid-template-columns:1fr;gap:var(--space-3)}
  .study-path{min-height:0}
  .lesson-brief{grid-template-columns:1fr;border-radius:var(--radius-sm)}
  .lesson-brief>div{padding:15px var(--space-4);border-right:0;border-bottom:1px solid var(--line)}
  .lesson-brief>div:last-child{border-bottom:0}
  .page-toc{grid-template-columns:1fr}
  .box{padding:var(--space-4) 15px var(--space-3)}
  .content table{display:block;overflow-x:auto}
}

/* 触屏：mdBook 给 .chapter li a 加的 5px 纵向内边距被上面 specificity 更高的
   padding:0 覆盖了，这里补回，保证手指可点的行高 */

/* 移动端抽屉打开时压暗正文：复用 mdBook 的 checkbox 兄弟选择器，
   断点 620px 与 mdBook 的桌面/移动分界一致。pointer-events:none——
   暗层不挡点击，关闭仍走左上角按钮 */

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

/* ======================================================================== *
 * §7.5  交互式图解（theme/js/matrix-interactive.js）
 * ------------------------------------------------------------------------
 * 内容里的契约是 <div class="widget" data-widget="名字">；JS 找不到实现时
 * 这里只剩一个空壳，故壳本身也必须有可读的默认外观，不能靠 JS 撑高度。
 * 控件用原生 range/button，因此键盘与读屏可用性由浏览器保证。
 * ======================================================================== */
.widget{
  margin:28px 0;padding:18px 18px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--paper);
}

.widget-head{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin:0 0 var(--space-1);padding:0 0 10px;border-bottom:1px solid var(--line);
}

.widget-kicker{
  color:var(--accent-text);font:700 var(--fs-xs)/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}

.widget-title{font:600 15px/1.4 var(--serif-display);color:var(--ink);margin:0}

.widget-hint{margin:10px 0 0;color:var(--muted);font:var(--fs-md)/1.65 var(--sans)}

.widget-body{margin-top:var(--space-3)}

.widget-canvas{
  display:block;width:100%;border-radius:10px;background:var(--paper-soft);
  touch-action:none;
}

.widget-canvas[tabindex]{cursor:grab}

.widget-canvas.is-dragging{cursor:grabbing}

.widget-canvas:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

.widget-controls{
  display:grid;gap:10px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.widget-control{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--space-1) 10px;font:var(--fs-md)/1.5 var(--sans);color:var(--ink-2);
}

.widget-control-name{grid-column:1 / -1}

.widget-control input[type=range]{
  width:100%;margin:0;accent-color:var(--accent-strong);
  background:transparent;cursor:pointer;
}

.widget-control input[type=range]:focus-visible{outline:2px solid var(--accent-strong);outline-offset:3px}

.widget-control-value{
  min-width:3.4em;text-align:right;
  font:600 12.5px/1 var(--mono);color:var(--accent-text);
  font-variant-numeric:tabular-nums;
}

.widget-btn{
  padding:7px 14px;border:1px solid var(--control-line);border-radius:9px;
  background:var(--surface-card);color:var(--ink);
  font:600 var(--fs-md)/1 var(--sans);cursor:pointer;
}

.widget-btn:hover:not(:disabled){border-color:var(--accent-strong);color:var(--accent-text)}

.widget-btn:disabled{opacity:.45;cursor:not-allowed}

.widget-btn:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}

/* 按钮是 <div class="widget-controls"> 的直接子元素时不要被拉满宽度 */
.widget-controls > .widget-btn{justify-self:start}

.widget-readout{
  margin:var(--space-3) 0 0;padding:10px var(--space-3);border-radius:9px;
  background:var(--surface-soft);color:var(--ink-2);
  font:var(--fs-md)/1.7 var(--sans);
  font-variant-numeric:tabular-nums;
}

.widget-readout:empty{display:none}

@media only screen and (max-width:619.98px){
  .widget{padding:14px var(--space-3) var(--space-3);margin:22px 0}
  .widget-controls{grid-template-columns:1fr}
}

/* ======================================================================== *
 * §7.5  考场竞技场（arena-clock 部件 + 竞技页样式）
 * ------------------------------------------------------------------------
 * 计时数字用等宽字体的 tabular-nums，跳动时不抖版式；紧急态取 --fig-red，
 * 归零态加深底色。全部颜色走令牌，明暗主题与打印由 §1/§8 统一负责。
 * ======================================================================== */
.arena-presets{
  display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;
}

.arena-chip{padding:5px 11px;font-size:12.5px}

.arena-chip.is-selected{
  border-color:var(--accent-strong);color:var(--accent-text);
  box-shadow:inset 0 -2px 0 var(--accent-strong);
}

.arena-display{
  margin-top:14px;display:flex;align-items:baseline;gap:var(--space-3);
}

.arena-time{
  font:700 44px/1 var(--mono);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}

.arena-display.is-urgent .arena-time{color:var(--fig-red)}

.arena-display.is-over .arena-time{
  color:var(--paper);background:var(--fig-red);
  padding:2px 10px;border-radius:var(--space-2);
}

.arena-bar{
  margin-top:10px;height:6px;border-radius:3px;overflow:hidden;
  background:var(--surface-soft);
}

.arena-bar-fill{
  height:100%;width:100%;border-radius:3px;
  background:var(--accent-strong);
  transition:width .25s linear;
}

.arena-display.is-urgent ~ .arena-bar .arena-bar-fill{background:var(--fig-red)}

.arena-live{display:block;margin-top:6px;color:var(--muted);font:var(--fs-sm)/1.4 var(--sans)}

.arena-controls{margin-top:var(--space-3);display:flex;gap:var(--space-2)}

.arena-tally{
  margin-top:14px;padding-top:var(--space-3);border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
}

.arena-tally-btn{padding:5px 11px;font-size:12.5px}

.arena-score{
  width:100%;color:var(--ink-2);
  font:600 var(--fs-md)/1.5 var(--mono);font-variant-numeric:tabular-nums;
}

/* 竞技页的段位徽标（纯文字徽章，不引图片） */
.arena-rank{
  display:inline-block;padding:1px var(--space-2);border-radius:999px;
  border:1px solid var(--line-strong);
  font:700 11.5px/1.7 var(--mono);letter-spacing:.06em;color:var(--ink-2);
  white-space:nowrap;
}

.arena-rank.is-s{border-color:var(--accent-strong);color:var(--accent-text)}

.arena-rank.is-hot{border-color:var(--fig-red);color:var(--fig-red)}

@media only screen and (max-width:619.98px){
  .arena-time{font-size:34px}
}

/* ======================================================================== *
 * §8  打印
 * ------------------------------------------------------------------------
 * 打印必须**重设全部颜色令牌**，不能只改看起来相关的几个。原因：默认主题是
 * ayu（暗色），纸却是白的——任何忘了重设的令牌都会把暗色值直接印到白纸上。
 * 曾经只重设了 --page/--paper/--ink/--line 与六个盒底色，于是正文里的
 * 强调色、插图配色、盒标签文字色全部沿用暗色值，实测对比度只有 1.6–3.1:1
 * （形同虚设），而 .lesson-brief 更是因为 --surface-card 没重设而印成整块黑底。
 *
 * 下面的取值不是随手挑的：强调色与插图色沿用亮色主题中已验收的那一套
 * （见 §1），在 #fefefe 上实测 5.7–8.6:1；盒标签用各自的 --*-ink，
 * 实测在盒底色上 6.3–8.2:1。**改这里之前先算一遍对比度。**
 * ======================================================================== */
@media print{
  :root,html.light,html.rust,html.navy,html.coal,html.ayu{
    --page:#fefefe;--paper:#fefefe;--paper-soft:#f6f6f4;
    --ink:#000;--ink-2:#333;--muted:#6f675b;--line:#ccc;--line-strong:#999;
    --control-line:#8f806d;
    /* 强调色家族：暗色下是高亮琥珀，白纸上几乎看不见 */
    --accent:#b96543;--accent-strong:#9f5033;--accent-text:#9f5033;
    /* --links / --inline-code-color 默认继承当前主题（暗色下 = --accent），
       打印时必须显式回落，否则正文链接与行内代码印成 4.2:1 的浅琥珀色。 */
    --links:var(--accent-strong);--inline-code-color:var(--accent-strong);
    --accent-soft:rgba(185,101,67,.10);
    --sage:#4f6f62;--shadow-ink:rgba(50,40,29,.86);
    --surface-card:#ffffff;--surface-soft:#f6f6f4;
    /* 语义盒子：底色 + 标签文字色 + 边框色三者都要给 */
    --def-bg:#f4f6f7;--def-ink:#284f5b;--def-line:#456f7c;
    --thm-bg:#f6f4f7;--thm-ink:#55425f;--thm-line:#705d79;
    --ex-bg:#f4f7f4;--ex-ink:#3c5740;--ex-line:#58735b;
    --think-bg:#f8f5ee;--think-ink:#73551f;--think-line:#967331;
    --err-bg:#faf1ef;--err-ink:#87342d;--err-line:#a7473d;
    --method-bg:#f2f6f6;--method-ink:#2e615d;--method-line:#447a75;
    /* 插图配色：暗色下是提亮版，白纸上同样偏淡 */
    --fig-blue:#2456a6;--fig-purple:#4c3d99;--fig-green:#1f6b3a;
    --fig-gold:#8a5a00;--fig-red:#9c2b25;--fig-neutral:#5b544a;
    --table-alternate-bg:#f6f6f4;
  }
  body{background:#fefefe;font-size:11.5pt}
  #mdbook-sidebar,#mdbook-menu-bar,#progress,.nav-wrapper,#mdbook-search-wrapper,#back-to-top{display:none!important}
  /* 工具条只对屏幕有意义；不隐藏会印出一个「已按下」的按钮，而浏览器默认
     不打印背景色 → 白底白字。matrix.js 的 beforeprint 恰好会把它切成按下态。 */
  .sol-toolbar{display:none!important}
  .katex-display.can-scroll::after,.katex-display.scrolled-start::before{content:none}
  .katex-display.can-scroll{overflow:visible!important}
  .content{padding:0;max-width:none}
  .chapter-cover::after{display:none}
  /* 分页：整个 .box 或整张长表设 avoid 反而制造大片空白（最长盒 57 行、
     最长表 42 行，一页放不下），所以只保证「行内不断」并让表头每页重复。 */
  .box,details.sol-box,figure,ul.objlist li{break-inside:avoid}
  /* 纸面上点不动：折叠解答的「展开 / 收起」提示去掉 */
  details.sol-box>summary::after{display:none}
  table{break-inside:auto}
  tr,td,th{break-inside:avoid}
  thead{display:table-header-group}
  h2,h3{break-after:avoid}
  /* 交互部件在纸面上没有交互可言：隐藏控件，保留画布与读数，
     避免读者以为图上少画了什么。 */
  .widget{break-inside:avoid;background:#fefefe;padding:10px 0}
  .widget-body .widget-controls{display:none!important}
  .widget-readout{background:#f6f6f4;color:#000}
  a.crossref{border:0;color:#000;text-decoration:underline}
  /* 纸面上点不动链接：把站外/跨页链接的目标印出来。纯页内锚点（#开头）
     不印——它们在同页就能找到，印出来只会变成噪音。 */
  .content a[href]:not([href^="#"]):not([href^="javascript"])::after{
    content:" ‹" attr(href) "›";font-size:.86em;color:#555;word-break:break-all;
  }
  .content a.header::after,.content a.crossref::after{content:none}
}