/* 文章阅读体验（Modules/Common/Reading）：阅读进度条、标题锚点、图片占位、相关文章、手机目录 */

/* ---------- 阅读进度条 ---------- */
.ytea-progress {
  position: fixed; left: 0; top: 0; z-index: 10000;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--sky, #5fa8dc), var(--deep, #1d4e89));
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
.admin-bar .ytea-progress { top: 32px; }
@media (max-width: 782px) { .admin-bar .ytea-progress { top: 46px; } }

/* ---------- 标题锚点 ---------- */
/* 跳到某一节时标题不被顶部导航挡住 */
.single-article .entry-content :is(h1, h2, h3, h4)[id] { scroll-margin-top: 80px; }
.single-article .entry-content .ytea-anchor {
  display: inline-block; margin-left: .35em; padding: 0 .2em;
  color: var(--sky, #5fa8dc) !important; text-decoration: none !important;
  font-weight: 400; opacity: 0; transition: opacity .15s;
  border-radius: 4px; cursor: pointer;
}
.single-article .entry-content .ytea-anchor::before { content: "#"; }
.single-article .entry-content :is(h1, h2, h3):hover .ytea-anchor,
.single-article .entry-content .ytea-anchor:focus-visible { opacity: .85; }
.single-article .entry-content .ytea-anchor:hover { opacity: 1; background: var(--sky-soft, rgba(95, 168, 220, .12)); }
/* 触屏没有悬停：常显但淡一些 */
@media (hover: none) { .single-article .entry-content .ytea-anchor { opacity: .45; } }

/* ---------- 正文图片：补了宽高，按比例占位，加载前后高度不变 ---------- */
.single-article .entry-content img[width][height] { height: auto; max-width: 100%; }

/* ---------- 相关文章（主题原有 .related-posts，补一下细节） ---------- */
.related-posts .related-posts-item h2 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-posts .related-post-thumb { transition: transform .3s ease; }
.related-posts .related-posts-item:hover .related-post-thumb { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .related-posts .related-post-thumb { transition: none; }
  .related-posts .related-posts-item:hover .related-post-thumb { transform: none; }
}

/* ---------- 手机目录（< 768px，A2 不显示侧边栏目录） ---------- */
.ytea-mtoc-btn {
  position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 998;
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; padding: 0 14px; border: 0; border-radius: 20px;
  background: rgba(255, 255, 255, .92); color: var(--deep, #1d4e89);
  box-shadow: 0 4px 16px rgba(29, 78, 137, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: inherit; font-size: 14px; cursor: pointer;
}
.ytea-mtoc-btn[hidden] { display: none; }
/* 滚到页脚时让开（和手机上的播放器一致，见 ytea-site.js 的 ytea-footer-in-view） */
.ytea-mtoc-btn { transition: opacity .2s, transform .2s; }
.ytea-footer-in-view .ytea-mtoc-btn { opacity: 0; transform: translateY(12px); pointer-events: none; }
.ytea-mtoc { position: fixed; inset: 0; z-index: 10001; }
.ytea-mtoc[hidden] { display: none; }
.ytea-mtoc-mask { position: absolute; inset: 0; background: rgba(10, 20, 35, .45); opacity: 0; transition: opacity .2s; }
.ytea-mtoc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%); transition: transform .2s ease;
}
.ytea-mtoc.is-open .ytea-mtoc-mask { opacity: 1; }
.ytea-mtoc.is-open .ytea-mtoc-sheet { transform: none; }
.ytea-mtoc-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid var(--line, #e6edf5); }
.ytea-mtoc-head b { font-size: 16px; color: var(--deep-dark, #16365e); }
.ytea-mtoc-close { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sky-soft, #eef5fb); color: #556; font-size: 20px; line-height: 1; cursor: pointer; }
.ytea-mtoc ol { list-style: none; margin: 0; padding: 8px 10px 14px; overflow-y: auto; overscroll-behavior: contain; }
.ytea-mtoc li a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink, #2b3a4a); font-size: 15px; line-height: 1.5; text-decoration: none; }
.ytea-mtoc li.is-sub a { padding-left: 28px; font-size: 14px; color: var(--ink-muted, #6b7c8f); }
.ytea-mtoc li a.is-current { background: var(--sky-soft, #eef5fb); color: var(--deep, #1d4e89); font-weight: 600; }
html.ytea-mtoc-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ytea-mtoc-mask, .ytea-mtoc-sheet { transition: none; } }

/* 黑夜模式 */
html.yt-dark .ytea-mtoc-btn { background: rgba(22, 32, 48, .92); color: var(--deep, #8fc3ea); }
html.yt-dark .ytea-mtoc-sheet { background: #131d2c; }
html.yt-dark .ytea-mtoc-head { border-color: rgba(255, 255, 255, .08); }
html.yt-dark .ytea-mtoc-close { background: rgba(255, 255, 255, .08); color: #cfd8e3; }
html.yt-dark .ytea-mtoc li a { color: #cfd8e3; }
html.yt-dark .ytea-mtoc li a.is-current { background: rgba(95, 168, 220, .16); color: #8fc3ea; }

/* ---------- 电脑端左侧悬浮工具条：「喜欢」按钮和分享 / 评论 / 收藏一样做成圆形，点赞数改成右下角小角标 ----------
   原来它没有圆形底，数字排在爱心下面、贴着工具条底边（错位） */
@media (min-width: 769px) {
  .single .post-content-footer .content-footer-zan-cai { margin-top: 0; }
  .single .post-content-footer .content-footer-zan-cai span:first-child {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; border-radius: 50%; background: #fff;
    box-shadow: 0 4px 16px 0 rgb(13 39 91 / 6%); line-height: 1; transition: background .2s, transform .2s;
  }
  .single .post-content-footer .content-footer-zan-cai span:first-child:hover { background: var(--sky-soft, #eef5fb); transform: translateY(-1px); }
  .single .post-content-footer .content-footer-zan-cai span:first-child i { font-size: 24px; line-height: 1; }
  .single .post-content-footer .content-footer-zan-cai span:first-child b {
    position: absolute; right: 2px; bottom: 4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: var(--sky-soft, #eef5fb); color: var(--deep, #1d4e89);
    font: 600 10px/16px sans-serif; text-align: center;
  }
  .single .post-content-footer .content-footer-zan-cai span.picked:first-child b { background: #ffe3e8; color: #f96078; }
  html.yt-dark .single .post-content-footer .content-footer-zan-cai span:first-child { background: var(--card, #182335); }
}

/* ---------- 手机端文章页 ---------- */
@media (max-width: 767px) {
  /* 侧边栏排在正文下面：阅读工具、工具箱在手机上不显示；A2 在窄屏不生成目录，空的目录卡片也藏掉（目录用右下角的按钮） */
  #secondary #ytea-read-tools, #secondary #ytea-toolbox, #secondary .b2-widget-toc { display: none !important; }

  /* 正文：字号略小一点、小标题收一收（手机一屏能多看几行） */
  /* 选择器加了 html body.single：后台「额外 CSS」在主题样式之后加载，同等优先级会被它盖掉 */
  html body.single .single-article .entry-content h2 { font-size: 20px !important; }
  html body.single .single-article .entry-content h3 { font-size: 17.5px !important; }
  html body.single .single-article .entry-content p, html body.single .single-article .entry-content li { font-size: 16px !important; line-height: 1.8 !important; }
  html body.single .single-article .entry-content pre li { font-size: 13px !important; line-height: inherit !important; }

  /* 代码块：统一字号；顶部留一条放「复制」按钮，不再压住代码；横向滚动条变细 */
  .single-article .entry-content pre { font-size: 13px !important; padding-top: 38px !important; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .single-article .entry-content pre code, .single-article .entry-content pre li { font-size: 13px !important; }
  .single-article .entry-content pre .code-copy { top: 7px !important; right: 8px !important; padding: 1px 9px !important; opacity: .85 !important; }
  .single-article .entry-content pre::-webkit-scrollbar { height: 4px; }
  .single-article .entry-content pre::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 4px; }
  .single-article .entry-content pre::-webkit-scrollbar-track { background: transparent; }

  /* 表格太宽时在自己的框里横向滚动，不撑宽页面 */
  .single-article .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 13.5px; }

  /* 文末信息卡里的长链接换行 */
  .ytea-postcard code { word-break: break-all; }

  /* 评论框按钮行：原来比屏幕宽 18px，整页能左右滑动。改成可以换行，验证码和提交按钮单独一行铺满 */
  #respond .com-form-button { flex-wrap: wrap; row-gap: 10px; }
  #respond .com-form-button-r { flex: 1 1 100%; min-width: 0; justify-content: space-between; }
  #respond .com-form-button-r .ytea-captcha { flex: 1 1 auto; min-width: 0; }
  #respond .com-form-button-r .ytea-captcha-a { min-width: 0; }
  #respond .com-form-button-r > button, #respond .com-form-button-r > .b2-loading { flex: none; }
}