/* ================================================================
   MD阅读 - WEB 端样式
   - 基准色 #333, 标题 #000/#2b2b2b (与鸿蒙端 PRD §5.2 保持一致)
   - 设计语言：克制、专业、留白充足
   ================================================================ */

:root {
  --text:        #333333;
  --heading-1:   #000000;
  --heading-2:   #111111;
  --heading-3:   #1f1f1f;
  --heading-4plus:  #2b2b2b;
  --code-bg:     #f6f8fa;
  --quote-bg:    #f0f1f3;
  --quote-bar:   #2a6fdb;
  --table-head:  #2a6fdb;
  --table-row:   #f8f9fa;
  --table-line:  #e0e0e0;
  --border-soft: #e6e6e6;
  --border-mid:  #cccccc;
  --text-mute:   #888888;
  --text-soft:   #555555;
  --code-text:   #c0341d;
  --code-text-bg:#f5eaea;
  --topbar:      #ffffff;
  --bg:          #ffffff;
  --hit:         #fafafa;
  /* 源码编辑区（textarea 是原生控件，不吃 var(--tx)） */
  --editor-bg:   #ffffff;
  --editor-tx:   #24292e;

  /* 表格列宽（与鸿蒙端 MarkdownParser.ts 单一数据源保持一致） */
  --cell-min:    76px;
  --cell-max:    800px;
  --cell-pad:    16px;          /* 左右内边距之和 */
  --cell-scale:  1.08;          /* 防贴边余量 */
  --cell-pix:    7.2px;         /* 半角字符基准宽 */

  /* 用户偏好（PREF_FONT_SIZE / PREF_LINE_HEIGHT，2026-10-05）
     由 /shared/js/kb-prefs.js 写在 <html> 上；这里给未登录时的默认值。
     正文所有字号走 calc(基准px * var(--kb-fs))，行高走 var(--kb-lh)。 */
  --kb-fs:       1;
  --kb-lh:       1.75;
  color-scheme: light;
}

/* 深色主题（2026-10-05）。
   之前这份 styles.css **只有浅色变量、连 prefers-color-scheme 都没有**，
   所以阅读器在任何系统下都是白底 —— 老板把主题选成 dark，问一问变了、
   阅读器不变，就是这个原因。
   做法与 ask/config 同一套：light-dark() 一份写两色，color-scheme 决定取哪套，
   而 color-scheme 由 kb-prefs.js 写的 data-theme 控制（缺省跟随系统）。
   ⚠️ 上面 :root 里那份**不带 light-dark 的写死浅色**是给老浏览器兜底的，不能删。 */
@supports (color: light-dark(#000,#fff)){
  :root{
    --text:light-dark(#333333,#d6d6d3);
    --heading-1:light-dark(#000000,#f2f2ef);
    --heading-2:light-dark(#111111,#eaeae6);
    --heading-3:light-dark(#1f1f1f,#e2e2de);
    --heading-4plus:light-dark(#2b2b2b,#dcdcd8);
    --code-bg:light-dark(#f6f8fa,#1b1d20);
    --quote-bg:light-dark(#f0f1f3,#232629);
    --quote-bar:light-dark(#2a6fdb,#6da3f0);
    --table-head:light-dark(#2a6fdb,#2f5f9e);
    --table-row:light-dark(#f8f9fa,#1e2023);
    --table-line:light-dark(#e0e0e0,#3a3d42);
    --border-soft:light-dark(#e6e6e6,#34373c);
    --border-mid:light-dark(#cccccc,#4a4e54);
    --text-mute:light-dark(#888888,#8b8b86);
    --text-soft:light-dark(#555555,#a3a39e);
    --code-text:light-dark(#c0341d,#f09595);
    --code-text-bg:light-dark(#f5eaea,#3a1f1f);
    --topbar:light-dark(#ffffff,#1c1e21);
    --bg:light-dark(#ffffff,#141618);
    --hit:light-dark(#fafafa,#222528);
    --editor-bg:light-dark(#ffffff,#1a1c1f);
    --editor-tx:light-dark(#24292e,#d6d6d3);
    color-scheme: light dark;
  }
}
/* 显式选择优先于"跟随系统" */
:root[data-theme="light"]{ color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ---------- 深色下的零散修正 ----------
   标题分隔线、表格奇数行、源码编辑区这几处原来写死了浅色专用字面量，
   已在下面各自改成变量（这里只留高亮覆盖）。 */
/* 代码高亮：vendor 里只放了 github.min.css（浅色）。深色下整块白底会很刺眼，
   这里把容器压暗并让 token 颜色整体提亮，不引入第二个高亮主题文件（离线要求）。 */
:root[data-theme="dark"] .rendered pre,
:root[data-theme="dark"] .rendered pre code{ background: var(--code-bg) !important; color: var(--text) !important; }
:root[data-theme="dark"] .hljs{ background: var(--code-bg); color: var(--text); }
:root[data-theme="dark"] .hljs-comment,
:root[data-theme="dark"] .hljs-quote{ color: #8b949e; }
:root[data-theme="dark"] .hljs-keyword,
:root[data-theme="dark"] .hljs-selector-tag,
:root[data-theme="dark"] .hljs-literal,
:root[data-theme="dark"] .hljs-type{ color: #ff7b72; }
:root[data-theme="dark"] .hljs-string,
:root[data-theme="dark"] .hljs-regexp,
:root[data-theme="dark"] .hljs-addition{ color: #a5d6ff; }
:root[data-theme="dark"] .hljs-number,
:root[data-theme="dark"] .hljs-symbol{ color: #79c0ff; }
:root[data-theme="dark"] .hljs-title,
:root[data-theme="dark"] .hljs-section,
:root[data-theme="dark"] .hljs-name{ color: #d2a8ff; }
:root[data-theme="dark"] .hljs-attr,
:root[data-theme="dark"] .hljs-attribute,
:root[data-theme="dark"] .hljs-variable{ color: #ffa657; }
:root[data-theme="dark"] .hljs-built_in,
:root[data-theme="dark"] .hljs-builtin-name{ color: #7ee787; }
:root[data-theme="dark"] .hljs-deletion{ color: #ffa198; }

/* ================================================================
   共享图形包（/shared/md/md-enhance.css）的换皮映射
   —— 图形块 / 角标 / 放大查看器的骨架在共享包里，配色由这里决定。
      官网引同一份共享包，映射它自己的品牌色；两边互不影响。
   ================================================================ */
:root {
  --mdg-border:       var(--border-soft);
  --mdg-border-hover: var(--border-mid);
  --mdg-bg:           #ffffff;
  --mdg-radius:       8px;
  --mdg-warn-bg:      #fff8e6;
  --mdg-warn-fg:      #a06800;
  --mdg-err-fg:       #c0341d;
  --mdg-hint-bg:      rgba(0, 0, 0, .45);
  --mdg-hint-fg:      #ffffff;
  --mdg-ph-bg:        #f5f5f5;
  --mdg-ph-fg:        var(--text-mute);

  --gv-bar-bg:        var(--quote-bar);
  --gv-bar-fg:        #ffffff;
  --gv-scale-fg:      #eaf2ff;
  --gv-btn-bg:        rgba(255, 255, 255, .18);
  --gv-btn-bg-hover:  rgba(255, 255, 255, .32);
  --gv-stage-bg:      #ffffff;
  --gv-grid:          #f4f6f9;
  --gv-z:             9999;
}
/* 图形块 / 放大查看器在深色下的取色。
   这几个块自带半透明遮罩与白底画布，深色下不改会变成"深色页里嵌一块白板"。
   只调背景与描边，遮罩层（--mdg-hint-bg 等）两种主题通用，不动。 */
@supports (color: light-dark(#000,#fff)){
  :root{
    --mdg-bg:light-dark(#ffffff,#1f2124);
    --mdg-warn-bg:light-dark(#fff8e6,#3a2f12);
    --mdg-warn-fg:light-dark(#a06800,#e3b341);
    --mdg-err-fg:light-dark(#c0341d,#f09595);
    --mdg-ph-bg:light-dark(#f5f5f5,#2a2d31);
    --gv-stage-bg:light-dark(#ffffff,#1f2124);
    --gv-grid:light-dark(#f4f6f9,#26292d);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

/* ===================== 顶栏工具栏 ===================== */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 12px 0 16px;
  background: var(--topbar);
  border-bottom: 1px solid var(--border-soft);
  flex: 0 0 auto;
}

.toolbar-left, .toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  max-width: 50vw;
  overflow: hidden;
  white-space: nowrap;
  outline: none;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, box-shadow 0.15s;
  cursor: text;
  overflow: auto;
}
/* 可编辑状态下的提示（聚焦时显示浅色背景） */
.app-title:focus {
  background: var(--hit);
  box-shadow: 0 0 0 2px rgba(42, 111, 219, 0.2);
}

.icon-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s;
}
.icon-btn:hover { background: var(--hit); }
.icon-btn:active { background: var(--border-soft); }

/* 分段控件（segmented control）：三态切换
   底色与选中块原本写死 #f1f2f4 / #ffffff —— 深色下会变成"深色工具栏里一条白灰条"，
   改用 --hit / --bg 后自动跟随（浅色下取值与原来完全一致，视觉零变化）。 */
.seg {
  display: inline-flex;
  height: 36px;
  padding: 3px;
  background: var(--hit);
  border-radius: 10px;
  border: 1px solid var(--border-soft);
}
.seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  padding: 0 14px;
  height: 100%;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;                    /* 图标与文字间距 */
}
.seg-btn:hover { color: var(--heading-1); }
.seg-btn.is-active {
  background: var(--bg);
  color: var(--heading-1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* 默认（大屏）：显示图标和文字；但图标默认隐藏，仅在小屏显示 */
.seg-icon { display: none; }
.seg-label { display: inline; }

/* ===================== 内容区 ===================== */
.content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* 通用面板：预览 + 源码共享布局规则（作为 .content flex 容器的子项） */
.pane {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--bg);
}

/* 预览面板 */
.pane-preview .rendered {
  padding: 4px 16px 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* 源码编辑面板（textarea） */
.pane-source .editor {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  outline: none;
  resize: none;
  padding: 16px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: calc(13px * var(--kb-fs,1));
  line-height: 1.55;
  color: var(--editor-tx);
  background: var(--editor-bg);
  white-space: pre;
  tab-size: 4;
}
.pane-source .editor::placeholder { color: var(--text-mute); }

/* 三态对应布局：通过 data-mode 在 .content 上挂类来控制显隐 */
/* 默认两个面板都隐藏，仅按 data-mode 显示对应面板 */
.pane-preview,
.pane-source {
  display: none;
}

/* 预览态：只显示渲染面板 */
.content[data-mode="preview"] .pane-preview {
  display: block;
}

/* 源码态：只显示编辑面板 */
.content[data-mode="source"] .pane-source {
  display: flex;
}

/* 分屏态：左右各半（源码在左、预览在右） */
.content[data-mode="split"] .pane-preview {
  display: block;
  flex: 0 0 50%;
  max-width: 50%;
  border-right: 1px solid var(--border-soft);
}
.content[data-mode="split"] .pane-source {
  display: flex;
  flex: 0 0 50%;
  max-width: 50%;
}

/* ===================== 渲染样式（与 PRD 同步） =====================
   字号/行高接 PREF_FONT_SIZE、PREF_LINE_HEIGHT（2026-10-05）。
   全部走 calc(基准px * var(--kb-fs,1))，--kb-fs 由 kb-prefs.js 写在 <html> 上。
   用 calc 而不是整体 zoom，是因为 zoom 会连边框、间距一起放大，
   表格列宽（--cell-*，与鸿蒙端对齐）会被一起撑坏。 */
.rendered {
  line-height: var(--kb-lh, 1.75);
}
.rendered h1, .rendered h2, .rendered h3,
.rendered h4, .rendered h5, .rendered h6 {
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
  color: var(--heading-4plus);
}
.rendered h1 { font-size: calc(26px * var(--kb-fs,1)); color: var(--heading-1); margin-top: 20px; padding-bottom: 8px; border-bottom: 2px solid var(--border-mid); }
.rendered h2 { font-size: calc(22px * var(--kb-fs,1)); color: var(--heading-2); margin-top: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.rendered h3 { font-size: calc(19px * var(--kb-fs,1)); color: var(--heading-3); margin-top: 12px; }
.rendered h4 { font-size: calc(17.5px * var(--kb-fs,1)); margin-top: 12px; }
.rendered h5 { font-size: calc(16.5px * var(--kb-fs,1)); margin-top: 12px; }
.rendered h6 { font-size: calc(15.5px * var(--kb-fs,1)); margin-top: 12px; }

/* 问一问参考清单「点第 N 段」跳转后的定位高亮（2026-10-06）
   靠背景色而不是 outline：标题自带 border-bottom，outline 会与之打架；
   用渐变淡出所以不需要额外 JS 控制多段样式，2.4s 后 JS 摘掉 class 自然复原。 */
.rendered .anchor-flash {
  background: linear-gradient(90deg, rgba(42,111,219,0.16), rgba(42,111,219,0.02) 70%, transparent);
  border-radius: 4px;
  box-shadow: -6px 0 0 0 rgba(42,111,219,0.55);
  transition: background 0.45s ease, box-shadow 0.45s ease;
}
:root[data-theme="dark"] .rendered .anchor-flash {
  background: linear-gradient(90deg, rgba(120,170,255,0.20), rgba(120,170,255,0.03) 70%, transparent);
  box-shadow: -6px 0 0 0 rgba(120,170,255,0.7);
}

.rendered p {
  margin: 6px 0;
  font-size: calc(16px * var(--kb-fs,1));
  line-height: var(--kb-lh, 1.75);
}

.rendered ul, .rendered ol {
  margin: 4px 0;
  padding-left: 28px;
}
.rendered li {
  font-size: calc(16px * var(--kb-fs,1));
  line-height: var(--kb-lh, 1.75);
  margin: 2px 0;
}
.rendered li > p { margin: 0; }

/* 引用 */
.rendered blockquote {
  margin: 8px 0;
  padding: 12px 12px 12px 16px;
  background: var(--quote-bg);
  border-left: 4px solid var(--quote-bar);
  border-radius: 4px;
  color: var(--text-soft);
  font-size: calc(15px * var(--kb-fs,1));
  line-height: var(--kb-lh, 1.75);
}
.rendered blockquote p { margin: 0; }

/* 代码块 */
.rendered pre {
  margin: 8px 0;
  padding: 12px;
  background: var(--code-bg);
  border-radius: 8px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(14px * var(--kb-fs,1));
  line-height: 1.5;
  color: var(--editor-tx);
}
.rendered code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  color: var(--code-text);
  background: var(--code-text-bg);
  border-radius: 3px;
}
.rendered pre code {
  padding: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
}

/* 分割线 */
.rendered hr {
  border: none;
  border-top: 1px solid #dddddd;
  margin: 12px 0;
}

/* 行内：粗体/斜体/链接/删除线 */
.rendered strong { font-weight: 700; }
.rendered em { font-style: italic; }
.rendered del { color: var(--text-mute); }
.rendered a { color: var(--quote-bar); text-decoration: underline; word-break: break-word; overflow-wrap: anywhere; }

/* 图片 */
.rendered img {
  max-width: 100%;
  border-radius: 6px;
  margin: 6px 0;
}

/* 表格 */
.rendered .md-table-wrap {
  margin: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rendered table.md-table {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: calc(14px * var(--kb-fs,1));
  line-height: 1.5;
  border: 1px solid var(--table-line);
}
.rendered table.md-table th,
.rendered table.md-table td {
  padding: 8px;
  border-right: 1px solid var(--table-line);
  border-bottom: 1px solid var(--table-line);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
  background-clip: padding-box;
}
.rendered table.md-table th {
  background: var(--table-head);
  color: #ffffff;
  font-weight: 700;
}
.rendered table.md-table tr:nth-child(even) td { background: var(--table-row); }
/* 奇数行原本写死 #ffffff。深色下会变成"白条夹在深色行里"，
   改用 --bg（浅色下 --bg 就是 #ffffff，视觉零变化；深色下自动变深）。 */
.rendered table.md-table tr:nth-child(odd)  td { background: var(--bg); }

/* ================================================================
   图形块 / Mermaid 容器 / 放大查看器的样式
   —— 已全部迁到共享包 /shared/md/md-enhance.css（与官网站点共用一份）。
      本文件只负责「阅读器配色」的变量映射，见文件顶部 :root。
      改图形外观请改那里的变量，不要再往这里加规则（否则又变成两份实现）。
   ================================================================ */


/* 滚动条克制美化 */
.pane::-webkit-scrollbar,
.rendered pre::-webkit-scrollbar,
.md-table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pane::-webkit-scrollbar-thumb,
.rendered pre::-webkit-scrollbar-thumb,
.md-table-wrap::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: 5px;
}
.pane::-webkit-scrollbar-thumb:hover,
.rendered pre::-webkit-scrollbar-thumb:hover,
.md-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #b8b8b8;
}

/* ===================== 响应式适配 ===================== */

/* 小屏设备：分屏退化为上下布局 */
@media (max-width: 720px) {
  .content[data-mode="split"] { flex-direction: column; }
  .content[data-mode="split"] .pane-preview,
  .content[data-mode="split"] .pane-source {
    flex: 1 1 50%;
    max-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .content[data-mode="split"] .pane-source { border-bottom: none; }
}

/* 超小屏（手机）：顶栏按钮紧凑，三态切换显示图标，隐藏文字 */
@media (max-width: 480px) {
  .toolbar {
    padding: 0 8px;
  }
  .toolbar-left {
    gap: 4px;
  }
  .toolbar-right {
    gap: 2px;
  }
  .app-title {
    font-size: 16px;
    max-width: 40vw;
  }
  .icon-btn {
    width: 40px;
    height: 40px;
  }
  .icon-btn svg {
    width: 18px;
    height: 18px;
  }

  /* 三态按钮：显示图标，隐藏文字 */
  .seg-icon { 
    display: inline-flex; 
    align-items: center;
  }
  .seg-label { display: none; }
  .seg-btn {
    padding: 0 8px;
    min-width: 36px;
    justify-content: center;
    font-size: 0; /* 隐藏文字但保留语义 */
  }
  .seg-btn .seg-icon svg {
    width: 18px;
    height: 18px;
  }
  /* 调整分段控件整体宽度适应图标 */
  .seg {
    height: 32px;
    padding: 2px;
  }
}

/* ===================== 加载遮罩 ===================== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.2s ease;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-soft);
  border-top-color: var(--quote-bar);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-msg {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 16px;
  letter-spacing: 0.5px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===================== 文档大纲（目录）2026-10-13 =====================
   响应式三档：
     ≥1360px  右侧常驻（正文两侧留白放得下，不遮挡）
     900–1359 折叠成右侧竖排标签，点开为浮层（「缩到边上」）
     <900     右下角浮动按钮，点开为左侧抽屉
   配色全部走既有主题变量，浅色 / 深色自动跟随；层级在图形放大浮层（9999）之下。 */
.md-outline[hidden] { display: none !important; }

.md-outline {
  --mdol-w: 200px;
  font-size: calc(13px * var(--kb-fs, 1));
  color: var(--text-soft);
}

/* 折叠态的右侧边缘竖排「目录」标签 */
.md-outline__tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  padding: 12px 5px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-soft);
  background: var(--topbar);
  border: 1px solid var(--border-soft);
  border-right: none;
  border-radius: 8px 0 0 8px;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.md-outline__tab:hover { color: var(--heading-2); background: var(--hit); }

/* 大纲面板 */
.md-outline__panel {
  position: fixed;
  right: 16px;
  top: 72px;
  bottom: 24px;
  width: var(--mdol-w);
  z-index: 41;
  display: flex;
  flex-direction: column;
  background: var(--topbar);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
:root[data-theme="dark"] .md-outline__panel { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }

.md-outline__hd {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--heading-3);
  font-weight: 600;
}
.md-outline__hd > span { font-size: 12px; letter-spacing: 1px; }
.md-outline__toggle {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
}
.md-outline__toggle:hover { color: var(--heading-2); background: var(--hit); }

.md-outline__list {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.md-outline__item { margin: 0; }
.md-outline__link {
  display: block;
  padding: 4px 10px 4px calc(12px + var(--lv, 0) * 12px);
  color: var(--text-soft);
  text-decoration: none;
  line-height: 1.45;
  border-left: 2px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-outline__link:hover { color: var(--heading-2); background: var(--hit); }
.md-outline__item.is-active > .md-outline__link {
  color: var(--quote-bar);
  border-left-color: var(--quote-bar);
  background: var(--hit);
  font-weight: 600;
}

/* 折叠 / 展开互斥 */
.md-outline.is-collapsed .md-outline__panel { display: none; }
.md-outline:not(.is-collapsed) .md-outline__tab { display: none; }

/* 窄屏：标签改右下角浮动按钮，面板改左侧抽屉 */
@media (max-width: 899px) {
  .md-outline__tab {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: none;
    writing-mode: horizontal-tb;
    letter-spacing: 1px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  }
  .md-outline__panel {
    left: 0;
    right: auto;
    top: 56px;
    bottom: 0;
    width: min(78vw, 320px);
    border-radius: 0 10px 10px 0;
    border-left: none;
  }
}