/* =================================================================
   UX 增强样式（全站生效，配合 ux.js）
   颜色一律使用 Material 的 --md-* 变量，深浅色自动适配。
   ================================================================= */

/* ---------- 1. 中文排版 ----------
   字体栈定义在 main.html 的 {% block fonts %} 里（此处不重复定义，
   否则会被后加载的 fonts 块覆盖）。这里只调整更适合中文阅读的行距与间距。 */
.md-typeset {
  line-height: 1.78;            /* 中文比西文需要更宽松的行距 */
}

.md-typeset p {
  margin-bottom: 1.05em;
}

.md-typeset li,
.md-typeset li > p {
  margin: 0.3em 0;              /* 列表项默认偏挤，中文尤其明显 */
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  letter-spacing: 0;            /* 中文标题不需要额外字距 */
}

.md-typeset h2 {
  margin-top: 1.8em;
}

.md-typeset h3 {
  margin-top: 1.5em;
}

/* 表格单元格默认内边距偏小，参数表密集时更难读。
   ux-table-scroll 是 JS 给超宽表加的类，加了类之后就不再匹配 :not([class])，
   所以这里要一起写上，否则超宽表的内边距会突然变小。 */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td,
.md-typeset table.ux-table-scroll th,
.md-typeset table.ux-table-scroll td {
  padding: 0.55rem 0.75rem;
}

/* ---------- 2. 图片 ---------- */
.md-typeset img {
  max-width: 100%;
  border-radius: 0.3rem;
  border: 1px solid var(--md-default-fg-color--lightest);  /* 白底截图在白页面上没有边界 */
}

.md-typeset img.ux-zoomable {
  cursor: zoom-in;
}

/* 深色模式下白底截图很刺眼，轻微压暗，鼠标移上去恢复原亮度 */
[data-md-color-scheme="slate"] .md-typeset img {
  filter: brightness(0.92);
}

[data-md-color-scheme="slate"] .md-typeset img:hover {
  filter: none;
}

/* 加载失败的图片不显示裂图图标 */
.md-typeset img.ux-img-broken {
  display: none;
}

/* ---------- 3. 缺失 / 失败图片的占位 ----------
   正文里常有「如下图所示：」，图片缺失时若不显示任何东西，
   句子会悬空，读者会以为是自己浏览器没加载出来。 */
.img-pending {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  margin: 0.3rem 0;
  border: 1px dashed var(--md-default-fg-color--lightest);
  border-radius: 0.25rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  line-height: 1.6;
  user-select: none;
}

/* ---------- 4. 图片点击放大 ---------- */
.ux-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.86);
  cursor: zoom-out;
}

.ux-lightbox.is-open {
  display: flex;
}

.ux-lightbox-img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 0.25rem;
  background: #fff;             /* 透明 PNG 在黑底上看不清 */
  cursor: default;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.ux-lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.ux-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

body.ux-noscroll {
  overflow: hidden;
}

/* ---------- 5. 超宽表格（仅对溢出的表格生效，由 JS 加类）---------- */
.md-typeset table.ux-table-scroll {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 6. 站外链接标识 ---------- */
.md-typeset a.ux-ext::after {
  content: "\2197";             /* ↗ */
  margin-left: 0.15em;
  font-size: 0.78em;
  vertical-align: 0.25em;
  color: var(--md-default-fg-color--light);
}

/* ---------- 7. 页眉区域 ----------
   Material 默认给 .md-main__inner 1.5rem 的上边距，加上 sticky 侧栏的
   1.2rem 顶内边距，页签栏与正文之间的空档观感偏大，这里收紧。 */
.md-main__inner {
  margin-top: 0.8rem;
}

/* 页眉中间的搜索入口：搜索插件已禁用（用 RAG 搜索替代），
   Material 默认这个位置是空的，显得头重脚轻。
   按钮由 sitename.html 里的脚本移到 .md-header__inner（title 内的
   .md-ellipsis 是 overflow:hidden 的省略号元素，会裁掉按钮），
   这里把 inner 设为定位上下文，双框相对它并排居中。 */
.md-header__inner {
  position: relative;
}

.ux-hdr-search {
  position: absolute;
  top: 50%;
  right: calc(50% + 0.25rem);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: min(13rem, 21vw);
  padding: 0.28rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;                        /* 页眉恒为 primary 深色底，两种配色都用白字 */
  font-size: 0.68rem;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ux-hdr-search:hover {
  background: rgba(255, 255, 255, 0.26);
}

.ux-hdr-search svg,
.ux-hdr-ai svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  flex-shrink: 0;
}

.ux-hdr-search span,
.ux-hdr-ai span {
  flex: 1;
  text-align: left;
  opacity: 0.85;
}

.ux-hdr-search kbd {
  padding: 0 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.2rem;
  font-family: inherit;
  font-size: 0.62rem;
  line-height: 1.4;
}

/* AI 问答框：占中心线右半，紫色渐变底与右下角 AI 机器人呼应。
   点击由 sitename.html 里的脚本调用 LuatosChat.open()（chat-embed.js 的
   正式 API），效果等同右下角机器人按钮。 */
.ux-hdr-ai {
  position: absolute;
  top: 50%;
  left: calc(50% + 0.25rem);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: min(13rem, 21vw);
  padding: 0.28rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.35rem;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.85), rgba(83, 109, 254, 0.85));
  color: #fff;
  font-size: 0.68rem;
  line-height: 1.4;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.ux-hdr-ai:hover {
  filter: brightness(1.15);
}

/* 窄屏页眉空间有限（logo/汉堡菜单/语言下拉都在），隐藏两个入口，
   右下角浮动按钮仍然可用 */
@media screen and (max-width: 59.9375em) {
  .ux-hdr-search,
  .ux-hdr-ai {
    display: none;
  }
}

/* ---------- 9. header.autohide 收起时，左右侧栏同步上移补齐 ----------
   autohide 的机制：JS 给 header 加 [hidden] 属性，CSS 使其向上滑出。
   但侧栏的 sticky top 是 Material 的 JS 直接写成 inline style 的
   （e.style.top = 页眉高度，随其高度流更新），样式表的普通规则
   压不过 inline，因此这里必须用 !important：
   header 隐藏 → 侧栏贴顶（配合下方的 .25s 过渡，与页眉同步滑动）；
   header 显示 → 规则不再命中，交还 Material 原有的 inline 值。
   实测 header 隐藏时页签栏也会被移出视口，故目标位置是视口顶。 */
.md-sidebar {
  transition: top 0.25s cubic-bezier(0.8, 0, 0.6, 1);
}

@media screen and (min-width: 76.25em) {
  /* primary 的过渡要合并 main.html 里为拖拽写的 width 过渡，
     否则两条 transition 声明会互相覆盖（同特异性，本文件后加载） */
  .md-sidebar--primary {
    transition: top 0.25s cubic-bezier(0.8, 0, 0.6, 1), width 0.18s ease;
  }

  .md-header[hidden] ~ .md-container .md-sidebar {
    top: 0 !important;
  }
}

/* 中屏（60~76.25em）：右侧目录补到视口顶。
   此区间主侧栏是抽屉模式（fixed），无需处理 */
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
  .md-header[hidden] ~ .md-container .md-sidebar--secondary {
    top: 0 !important;
  }
}

/* ---------- 11. 左侧菜单滚动区延展到视口底部，且不与页脚重叠 ----------
   Material 的 JS 会在页面加载时按初始几何给 scrollwrap 算一个固定
   高度写成 inline style，且滚动后不再更新——菜单粘住后下方会留出
   一大截空白。这里让 scrollwrap 改为 absolute 溢出定位（Material
   在中屏抽屉模式的原生技巧），从 sidebar 顶部一直延到视口底。

   页脚避让：sidebar 占位高度设为 100vh - 页眉(4.8rem)，使其
   「视口底部」正好等于视口底。滚动到页脚进入视口时，sticky 元素
   底部触及正文容器底部，被自然向上推移，菜单（absolute 的
   scrollwrap）随之整体上移，尾部菜单项不再被页脚盖住；
   推移量最大正好等于页脚高度。 */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary,
  .md-sidebar--secondary {
    position: sticky !important;
    top: 4.8rem !important;
    height: calc(100vh - 4.8rem) !important;
    align-self: flex-start;
  }

  .md-sidebar--primary .md-sidebar__scrollwrap,
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    position: absolute !important;
    top: 1.2rem !important;
    bottom: auto !important;
    height: calc(100vh - 6rem) !important;   /* 页眉 4.8rem + 上内边距 1.2rem */
  }
}

/* ---------- 12. 窄屏 ---------- */
@media screen and (max-width: 44.9375em) {
  .md-typeset {
    line-height: 1.72;
  }

  .ux-lightbox {
    padding: 0.6rem;
  }

  .ux-lightbox-img {
    max-height: 88vh;
  }
}

/* ---------- 13. 页脚 ----------
   与页眉同款主色蓝（--md-primary-fg-color = indigo），版权行用深一档
   indigo 形成层次；整体高度压缩（卡片内边距、行距都收紧），避免
   页脚占据过多屏幕。 */
.md-footer {
  position: relative;
  background: var(--md-primary-fg-color);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.md-footer-meta {
  background: var(--md-primary-fg-color--dark);
}

/* 高度压缩：Material 默认页脚行高与内边距偏大 */
.md-footer__inner {
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.md-footer__link {
  margin: 0;                       /* Material 默认 margin: .6rem 0 .4rem，页脚偏厚的主因 */
  padding: 0.25rem 0.7rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.md-footer__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);
}

.md-footer__link:hover .md-footer__direction {
  color: #ffffff;
}

.md-footer__link:hover .md-footer__button {
  color: #ffffff;
}

/* 「上一页/下一页」小标签：大写字母 + 字距，弱化为导航辅助信息 */
.md-footer__direction {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* 页面标题 */
.md-footer__title .md-ellipsis {
  color: rgba(255, 255, 255, 0.95);
}

/* 方向箭头图标 */
.md-footer__button {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

/* 版权行文字 */
.md-copyright,
.md-footer-meta a {
  color: rgba(255, 255, 255, 0.6);
}

.md-footer-meta a:hover {
  color: rgba(255, 255, 255, 1);
}

/* 版权主体（站点署名）略亮于说明文字，形成信息层级 */
.md-copyright__highlight {
  color: rgba(255, 255, 255, 0.85);
}

/* 版权行垂直内边距收紧 */
.md-footer-meta__inner {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.md-copyright {
  padding: 0.1rem 0;
}

/* 窄屏收窄卡片内边距 */
@media screen and (max-width: 44.9375em) {
  .md-footer__link {
    padding: 0.25rem 0.5rem;
  }
}