/* ==========================================================================
   联创圈 · 移动端点击热区补齐（P1-3）
   --------------------------------------------------------------------------
   问题
     390px 实测各页 45%~95% 的可点元素小于 44x44（Apple HIG 与 WCAG 2.5.5
     的最低标准）。典型元凶：顶部图标按钮 38x38、顶部 logo 链接 104x24、
     底部 tab 76x37、分页 32x32。手机上误触率高，是"点了没反应 / 点错"
     的直接来源。

   做法
     完全不改视觉尺寸，用 ::after 在元素四周铺一层**透明热区**：
       left:50%  top:50%  width/height: max(44px, 100%)  translate(-50%,-50%)
     —— 只朝外扩张、绝不内缩（元素本身已 >=44 时 max() 取 100%，保持原样）。
     浏览器不支持 max() 时该声明被忽略，伪元素退化为 0 尺寸，不影响任何功能。

   分组原则
     · 严格组：独立可点的工具栏 / 按钮 / 列表项，一律保证 44x44。
     · 温和组：密排的文字链接与标签（一行内多个、上下相邻），
       垂直方向只扩到 32px —— 避免热区互相覆盖导致"点错"
       （互相覆盖时后渲染者胜，会让用户点到隔壁链接）。

   生效范围
     仅 <=768px。桌面端鼠标精度高，放大热区反而会让点击落到非预期元素上。

   维护
     改动后请用 scripts/check_ui_baseline.py --update 复核基线；
     热区复测可用工作区的浏览器探查脚本（390x844，统计 <44x44 占比）。
   ========================================================================== */

@media (max-width: 768px) {

  /* ------------------------------------------------------------------
     严格组：保证 44x44
     ------------------------------------------------------------------ */
  .m-topbar-btn,
  .m-topbar-brand,
  .m-topbar-login,
  .m-topbar-avatar,
  .m-tab,
  .m-tab-logout,
  .m-tab-icon-wrapper,
  .page-item,
  .pagination a,
  .pagination button,
  .community-tab,
  .auth-tab,
  .sidebar-widget-more,
  .sidebar-hot-column-item,
  .hot-post-link,
  .lc-resources-cat,
  .hb-toc-list a,
  .ds-toast__close {
    position: relative;
  }

  .m-topbar-btn::after,
  .m-topbar-brand::after,
  .m-topbar-login::after,
  .m-topbar-avatar::after,
  .m-tab::after,
  .m-tab-logout::after,
  .m-tab-icon-wrapper::after,
  .page-item::after,
  .pagination a::after,
  .pagination button::after,
  .community-tab::after,
  .auth-tab::after,
  .sidebar-widget-more::after,
  .sidebar-hot-column-item::after,
  .hot-post-link::after,
  .lc-resources-cat::after,
  .hb-toc-list a::after,
  .ds-toast__close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  /* 说明：登录页验证码图 (img#loginCaptchaImg, 100x42) 曾作为例外保留，
     2026-09-24 二次复测后改为用 box-sizing: content-box 补偿到 44px，
     见本文件末尾「P1-3 收口」段落。 */

  /* ------------------------------------------------------------------
     温和组：垂直只扩到 32px，避免密排元素互相抢点击
     ------------------------------------------------------------------ */
  .ds-tag,
  .auth-link,
  .card-author-link {
    position: relative;
  }

  .ds-tag::after,
  .auth-link::after,
  .card-author-link::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(32px, 100%);
    transform: translate(-50%, -50%);
  }

  /* ds-btn 是通用按钮类，可能出现在任意密度的按钮组里 —— 折中到 40px：
     独占一行的大按钮够用，小按钮组里也不会互相覆盖 */
  .ds-btn {
    position: relative;
  }

  .ds-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(40px, 100%);
    transform: translate(-50%, -50%);
  }

  /* ==================================================================
     P1-3 收口（2026-09-24 二次复测后新增）
     ------------------------------------------------------------------
     用真实浏览器「有效点击面积」复测（取元素 rect 与 ::after 的 used 值
     取大者），上一轮剩下的真实缺口只有下面几类，逐一补齐。
     ================================================================== */

  /* --- 回顶按钮（移动端 40x40，差 4px）---
     它是 position: fixed，本身就是绝对定位元素的包含块，
     因此**只加 ::after，绝不加 position: relative**
     （加了会把 fixed 覆盖成 relative，按钮不再吸角）。 */
  .back-to-top::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  /* --- 静态定位元素：补 relative + ::after ---
     .hero-cta 内的 CTA 按钮：首页 159x38 / 平台页 186x43.5，只差高度
     .card-avatar-link：社区卡片头像（18x25），与同排的 .card-author-link
       指向同一 URL，热区重叠无副作用
     .lc-courses-cat / .lc-search-btn：课程分类 120x36、资源页搜索 74x36 */
  .hero-cta .btn-primary,
  .hero-cta .btn-secondary,
  .hero-cta .btn-ghost,
  .card-avatar-link,
  .lc-search-btn {
    position: relative;
  }

  .hero-cta .btn-primary::after,
  .hero-cta .btn-secondary::after,
  .hero-cta .btn-ghost::after,
  .card-avatar-link::after,
  .lc-search-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(44px, 100%);
    height: max(44px, 100%);
    transform: translate(-50%, -50%);
  }

  /* --- 课程分类胶囊（97.5x36）---
     它**不能**用 ::after：父容器 .lc-courses-cats 是 overflow:auto 的横向
     滚动条，会把自己的热区裁掉（实测 y 扫描上方一段全部命中祖先元素，
     可用高度只剩约 38px）。这里直接给元素本身上高度，父容器高度自适应。 */
  .lc-courses-cat {
    min-height: 44px;
  }

  /* --- 验证码图（100x42，只差 2px）---
     img 是替换元素，伪元素热区无效。这里不改 height，
     只把 box-sizing 改成 content-box：让那 1px 边框算在尺寸之外，
     42px 内容 + 上下边框 = 44px 边框盒，达标且图片不被拉伸变形。 */
  #loginCaptchaImg {
    box-sizing: content-box;
  }

  /* ------------------------------------------------------------------
     ⚠️ 重要：本文件只给「需要承载 ::after 热区」的元素加 position: relative。
        绝不能给 .m-tabbar / .m-topbar 等**固定定位**的容器加 relative ——
        那会把 position: fixed 覆盖成 relative，把固定栏拉回文档流
        （实测会让每页文档高度凭空 +50px，底部 tab 栏不再吸底）。
     一句话：加 relative 前先确认该选择器当前不是 fixed/absolute。
     ------------------------------------------------------------------ */
}

/* 无障碍：尊重"减少动态效果"偏好（本项目动画较多，热区本身不含动画，
   此处仅为与其它样式文件保持一致的声明位置，避免误加 transition） */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .m-topbar-btn::after,
  .m-topbar-brand::after,
  .m-topbar-login::after,
  .m-topbar-avatar::after,
  .m-tab::after,
  .m-tab-logout::after,
  .m-tab-icon-wrapper::after,
  .page-item::after,
  .pagination a::after,
  .pagination button::after,
  .community-tab::after,
  .auth-tab::after,
  .sidebar-widget-more::after,
  .sidebar-hot-column-item::after,
  .hot-post-link::after,
  .lc-resources-cat::after,
  .hb-toc-list a::after,
  .ds-toast__close::after,
  .ds-tag::after,
  .auth-link::after,
  .card-author-link::after,
  .back-to-top::after,
  .hero-cta .btn-primary::after,
  .hero-cta .btn-secondary::after,
  .hero-cta .btn-ghost::after,
  .card-avatar-link::after,
  .lc-search-btn::after,
  .ds-btn::after {
    transition: none;
  }
}

/* ==========================================================================
   A1 收口（2026-09-24 第三次复测）
   --------------------------------------------------------------------------
   上一轮用 ::after 铺透明热区，但对下面这些元素**无效**，原因有两类：
     ① 祖先有 overflow（hidden / auto / clip）—— 热区外扩出去的部分被裁掉
     ② 相邻同类元素密排 —— 后渲染兄弟的**元素盒**盖住了先渲染者的伪元素
   360px 逐像素 elementFromPoint 扫描实测：
     .m-topbar-btn / -brand / -login     41px  ← @media(max-width:360px) 把
                                                 --m-topbar-height 降到了 42px
     .sidebar-widget-more                38px  ← .sidebar-widget{overflow:hidden}
     .hot-post-link                      42px  ← 相邻 .hot-post-item 的元素盒
     .community-tab                      36px  ← .community-tabs{overflow-x:auto}
     .lc-courses-cat                     42px  ← .lc-courses-cats{overflow-x:auto}
     .lc-resources-cat                   38px  ← .lc-resources-cats{overflow-x:auto}
     .hb-toc-list a                      40px  ← 单列密排，相邻 a 互相盖
   结论：**容器内有 overflow、或相邻元素密排时，::after 外扩不成立**，
        必须让元素（或其容器）本身达到 44px。下面逐条处理。
   ========================================================================== */
@media (max-width: 768px) {

  /* --- ① 顶栏：把 360px 档的令牌恢复到 44px ---
     design-tokens.css 定义 --m-topbar-height: 44px，但 @media(max-width:360px)
     里被降到 42px，于是 44px 的伪元素热区被 header.m-topbar{overflow:hidden}
     裁到 41px。body 的占位 padding-top 用的也是这个令牌，会同步跟随，不会错位。 */
  :root {
    --m-topbar-height: 44px;
  }

  /* --- ② 侧栏「更多」链接（33.5x18）---
     祖先 .sidebar-widget{overflow:hidden}（为了裁圆角）把伪元素热区裁掉，
     该元素又不在密排兄弟链上，直接给足自身高度即可。 */
  .sidebar-widget-more {
    min-height: 44px;
  }

  /* --- ③ 热门帖子链接（314x35.6）---
     .hot-post-item 是 flex 行、相邻项只差 2px，伪元素热区被下一项的元素盒
     盖住。链接本身是纵向 flex，拉高后让内容垂直居中，文字位置不变。 */
  .hot-post-link {
    min-height: 44px;
    justify-content: center;
  }

  /* --- ④ 手册目录链接（294x38）---
     移动端 .hb-toc-list 是单列 grid、gap 仅 2px，8 条 a 紧密相邻，
     每个 a 的伪元素都会被下一条 a 的元素盒覆盖。只能加高元素本身。 */
  .hb-toc-list a {
    min-height: 44px;
  }

  /* --- ⑤ 横向滚动容器里的胶囊与页签 ---
     .lc-courses-cats / .lc-resources-cats / .community-tabs 都是
     overflow-x:auto —— 纵向溢出同样会被裁掉（auto 是双向生效），
     所以元素自身再高也会被削。让元素在容器内垂直居中，容器高度
     随内容自适应，就不会再裁。 */
  .lc-courses-cats,
  .lc-resources-cats,
  .community-tabs {
    align-items: center;
  }

  .lc-courses-cat,
  .lc-resources-cat,
  .community-tab {
    min-height: 44px;
  }
}

/* ==========================================================================
   A1 第二轮精修（边界 1px）
   --------------------------------------------------------------------------
   第一轮收口后仍有 8 项差 1~2px。逐像素复测确认：元素自身已经 44px，
   但**紧贴容器边界**，边界那一像素落在容器（裁剪盒）之外，于是点不到。
   ①  顶栏 header 高度 44px 是 border-box，定义里带 0.5px border-bottom，
       于是 content box 只剩 43.5px，44px 的伪元素热区被 overflow:hidden
       削掉 1px（实测 43）。顶栏内部是单行 flex，本来就永远不会溢出，
       所以直接放开裁剪即可 —— **视觉高度完全不变**。
   ②  .lc-courses-cats / .lc-resources-cats / .community-tabs 都是
       overflow-x:auto 的滚动容器，元素顶部贴着容器 content 边界；
       给容器留 2px 上内边距，元素就不再贴边（下边原本已有 padding-bottom）。
   ③  .card-avatar-link 与紧随其后的 .card-author-link 指向**同一个 URL**
       （column 类型卡片的头像与作者名），伪元素右半被后者的元素盒盖住。
       把头像伪元素抬到作者名之上即可（两者同层级，抬高后头像胜）。
   ========================================================================== */
@media (max-width: 768px) {

  /* ① 放开顶栏裁剪（视觉高度不变，仅让 0.5px 的边界不再吃掉热区） */
  header.m-topbar {
    overflow: visible;
  }

  /* ② 滚动容器内元素不贴边 */
  .lc-courses-cats,
  .lc-resources-cats,
  .community-tabs {
    padding-top: 2px;
  }

  /* ③ 头像热区抬到作者名元素盒之上（同 URL，谁胜都去同一处） */
  .card-avatar-link::after {
    z-index: 1;
  }
}

/* ==========================================================================
   A1 第三轮精修（顶栏专项）
   --------------------------------------------------------------------------
   逐像素复测把顶栏的两个问题彻底拆开了：
     · 高度只有 43px —— header 高 44px 是 border-box，其中 0.5px 给了
       border-bottom，content box 只剩 43.5px，44px 热区被削掉 1px。
     · 宽度只有 36px —— 这不是被裁，而是 .m-topbar-actions{gap:2px} 太密：
       按钮本身 34px，中心距 34+2=36px，44px 的热区必然互相重叠，
       同层级下 DOM 靠后者胜，于是每个按钮实际只能拿到 36px。
   对策：高度靠加大令牌（+2px 余量），宽度靠把按钮组间距放到 10px
   （34+10=44，热区刚好首尾相接，不再互相抢）。顶栏横向本来就有富余。
   ========================================================================== */
@media (max-width: 768px) {

  /* 顶栏高度：44 → 46px（content 45.5px，44px 热区完整容纳） */
  :root {
    --m-topbar-height: 46px;
  }

  /* 顶栏按钮组：间距 2 → 10px，使相邻按钮中心距达到 44px。
     这样每个图标按钮的 44x44 热区不再被邻居覆盖。 */
  .m-topbar-actions {
    gap: 10px;
  }
}