/* =========================================================
   清洗行业知识平台 · 移动端导航修复与美化（第四轮 Workstream C）
   mobile-nav.css（独立文件，加载于 site.css / skins.css / authority.css 之后）
   ---------------------------------------------------------
   作用范围（严格）：
     · 桌面 >960px：只隐藏「抽屉专用区块 / 底部导航」，不改动任何现有布局；
     · 移动 ≤960px：
       1) 顶栏：汉堡按钮为 .top-actions 最右元素（44×44 毛玻璃圆形，body.nav-open 时三条线变 X）、
          搜索按钮图标化（隐藏文字）、访客登录/注册 CTA 移入抽屉、登录用户保留小头像；
       2) 抽屉 .nav：顶部品牌区 + 关闭按钮、图标导航 + active 药丸、分隔线后权威服务快捷入口、
          底部账号区（访客：登录/免费注册/发布信息；登录：个人中心/我的信息/发布信息/后台管理/退出登录）；
       3) 底部快捷导航 .qx-bnav：5 项 + 中心凸起发布 FAB，毛玻璃 + 上边框 + 安全区，
          body.nav-open / body.qx-so-open 时隐藏，z-index 70 < 抽屉遮罩 80；
       4) 内容防遮挡：页脚 padding-bottom、toast 上移；
       5) 三皮肤全部走语义令牌（deepblue / verdant / dark），prefers-reduced-motion 关闭动画。
   说明：抽屉开合（.nav.open / body.nav-open / #navScrim.show）与 aria-expanded 仍由 site.js 控制，
        本文件不新增 JS，纯 CSS 实现，避免改动现有脚本顺序。
   ========================================================= */

:root {
  /* 顶栏实际高度（用于抽屉顶部留白，与 site.css 的 .topbar .wrap 高度保持一致） */
  --qx-topbar-h: 66px;
}
@media (max-width: 640px) {
  :root { --qx-topbar-h: 58px; }
}

/* ---------- 桌面端守卫：抽屉专用区块 / 底部导航只在移动端出现 ---------- */
.nav-brand,
.nav-label,
.nav-sep,
.nav-quick,
.nav-auth { display: none; }
.nav-scroll { display: contents; } /* 桌面：展开为 .nav 的直接 flex 项，保持原有横向导航 */
.qx-bnav { display: none; }

/* =========================================================
   1) 汉堡按钮：三条线（span）绘制，body.nav-open 时变 X
   ========================================================= */
.qx-burger { position: relative; display: block; width: 20px; height: 14px; pointer-events: none; }
.qx-burger > span {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: top var(--t) var(--ease), transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}
.qx-burger > span:nth-child(1) { top: 0; }
.qx-burger > span:nth-child(2) { top: 6px; }
.qx-burger > span:nth-child(3) { top: 12px; }
body.nav-open .menu-btn .qx-burger > span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.nav-open .menu-btn .qx-burger > span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
body.nav-open .menu-btn .qx-burger > span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* =========================================================
   2) 移动端（≤960px）：顶栏
   ========================================================= */
@media (max-width: 960px) {
  /* 右侧留 14px：保证汉堡右缘距视口 <16px，同时不改变左侧安全边距 */
  .topbar .wrap { gap: 10px; padding-right: 14px; }
  .top-actions { margin-left: auto; gap: 8px; }

  /* 访客的登录/注册 CTA 移入抽屉；积分 pill 移动端收起（保留小头像） */
  .top-actions .qx-auth-cta,
  .top-actions .points-pill { display: none; }
  /* 移动端头像点击直接进入个人中心，隐藏 hover/focus 下拉，避免遮挡 */
  .user-menu .dropdown { display: none !important; }
  .user-menu .avatar { width: 36px; height: 36px; font-size: 15px; }

  /* 汉堡：44×44 圆形半透明毛玻璃 + 细描边
     （选择器需高于 .btn.sm 的 height/min-height/border-radius，故用 .top-actions 前缀） */
  .top-actions .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: none;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--ink);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    backdrop-filter: saturate(1.6) blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px -12px rgba(var(--brand-rgb), .55);
    transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  }
  .top-actions .menu-btn:hover,
  .top-actions .menu-btn:active { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, var(--hairline)); }
  .top-actions .menu-btn:active { transform: scale(.94); }
  body.nav-open .top-actions .menu-btn {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 46%, var(--hairline));
    background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  }

  /* 搜索按钮图标化（汉堡左侧） */
  .top-actions .top-search {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    flex: none;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
  }
  .top-actions .top-search .ico { width: 21px; height: 21px; }
  .top-actions .top-search .top-search-label { display: none; }
  .top-actions .top-search:hover,
  .top-actions .top-search:focus-visible { background: color-mix(in srgb, var(--brand) 9%, transparent); }

  /* 抽屉打开时收起顶栏品牌 Logo（抽屉顶部已展示品牌区，避免同屏重复；汉堡 X 仍可见） */
  body.nav-open .topbar .wrap > .logo { opacity: 0; visibility: hidden; }

  /* =======================================================
     3) 移动端抽屉 .nav：从顶栏下方滑出（顶栏保持可见，汉堡 X 可关闭）
     ======================================================= */
  .nav {
    top: var(--qx-topbar-h);
    width: min(88vw, 336px);
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    gap: 2px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--hairline);
    box-shadow: -32px 0 80px -44px rgba(8, 22, 34, .6);
    /* 打开时 visibility 立即变为 visible（否则打开瞬间焦点无法进入抽屉）；关闭时延后到滑出结束 */
    transition: clip-path var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
  }
  .nav.open { transition: clip-path var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease), visibility 0s; }

  /* 中部可滚动区：主导航 + 权威服务；品牌区固定在顶部、账号区固定在底部 */
  .nav-scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -14px;
    padding: 0 14px 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .nav-scroll::-webkit-scrollbar { width: 6px; }
  .nav-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }

  /* 关闭按钮：抽屉品牌区右侧（顶栏 X 之外的显式关闭入口，js 已绑定 [data-act=menu]）
     视觉上弱化为幽灵圆钮，避免与顶栏汉堡 X 形成两个同色双按钮 */
  .nav .nav-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  }
  .nav .nav-close .ico { width: 20px; height: 20px; }
  .nav .nav-close:hover {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
  }

  /* —— 品牌区 —— */
  .nav-brand {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 4px;
    padding: 4px 82px 10px 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line-2);
  }
  .nav .nav-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .2px;
  }
  .nav .nav-brand .logo:hover { background: none; color: var(--brand-700); }
  .nav-brand-tip { font-size: 11px; color: var(--ink-3); letter-spacing: .6px; }

  /* —— 分组小标题 —— */
  .nav-label {
    display: block;
    padding: 12px 12px 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: var(--ink-3);
    text-transform: uppercase;
  }
  .nav-auth .nav-label { padding: 0 6px 2px; }

  /* —— 主导航项：图标 + 文案 + active 药丸 —— */
  .nav .nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-2);
  }
  .nav .nav-link .nav-i { width: 19px; height: 19px; color: var(--brand-300); margin: 0; }
  .nav .nav-link:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); color: var(--brand-700); }
  .nav .nav-link.active {
    background: color-mix(in srgb, var(--brand) 11%, var(--surface));
    color: var(--brand-700);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 16%, transparent);
  }
  .nav .nav-link.active .nav-i { color: var(--brand); }

  /* —— 分隔线 —— */
  .nav .nav-sep {
    display: block;
    height: 1px;
    margin: 10px 12px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
  }

  /* —— 权威服务快捷入口 —— */
  .nav-quick { display: flex; flex-direction: column; gap: 2px; }
  .nav .nav-quick .nav-quick-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 6px 10px;
    border-radius: 14px;
    color: var(--ink-2);
  }
  .nav .nav-quick .nav-quick-link:hover {
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    color: var(--brand-700);
  }
  .nq-ico {
    width: 32px;
    height: 32px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  }
  .nq-ico .ico { width: 17px; height: 17px; }
  .nq-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
  .nq-txt b { font-size: 14px; font-weight: 700; color: var(--ink); }
  .nq-txt small { font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nq-go { width: 15px; height: 15px; margin-left: auto; color: var(--ink-4); flex: none; }

  /* —— 底部账号区（固定在抽屉底部，不随中部滚动） —— */
  .nav-auth {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 6px 2px;
    border-top: 1px solid var(--line-2);
  }
  .nav-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line));
  }
  .nav-user-avatar { width: 40px; height: 40px; flex: none; font-size: 16px; }
  .nav-user-info { min-width: 0; line-height: 1.35; }
  .nav-user-info b { display: block; font-size: 14.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-user-info span { font-size: 11.5px; color: var(--ink-3); }

  .nav-auth-links { display: flex; flex-direction: column; gap: 2px; }
  .nav .nav-auth-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-2);
  }
  .nav .nav-auth-links a .ico { width: 17px; height: 17px; color: var(--ink-3); }
  .nav .nav-auth-links a:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); color: var(--brand-700); }
  .nav .nav-auth-links a:hover .ico { color: var(--brand); }

  .nav-logout { margin: 2px 0 0; }
  .nav-logout button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .nav-logout button .ico { width: 17px; height: 17px; }
  .nav-logout button:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }

  .nav-auth-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nav .nav-auth .nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
  }
  .nav .nav-auth .nav-publish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--brand) 34%, var(--line));
    color: var(--brand-700);
    font-size: 14px;
    font-weight: 700;
  }
  .nav .nav-auth .nav-publish .ico { width: 17px; height: 17px; }
  .nav .nav-auth .nav-publish:hover { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); color: var(--brand-700); }

  /* =======================================================
     4) 底部快捷导航（5 项，中心发布 FAB）
     ======================================================= */
  .qx-bnav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70; /* < 抽屉遮罩 80 / 抽屉 90，> 普通内容 */
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--glass-strong);
    -webkit-backdrop-filter: saturate(1.7) blur(18px);
    backdrop-filter: saturate(1.7) blur(18px);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -16px 40px -30px rgba(var(--brand-rgb), .5);
    transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease), visibility var(--t-slow) var(--ease);
  }
  .qx-bnav-inner {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 2px;
    max-width: 600px;
    margin: 0 auto;
  }
  .qx-bnav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    min-height: 50px;
    padding: 5px 2px 3px;
    border-radius: 14px;
    color: var(--ink-3);
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--t-fast) var(--ease);
  }
  .qx-bnav-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 26px;
    border-radius: 10px;
    transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .qx-bnav-ico .ico { width: 21px; height: 21px; }
  .qx-bnav-txt { display: block; }
  .qx-bnav-item.active { color: var(--brand-700); font-weight: 700; }
  .qx-bnav-item.active .qx-bnav-ico { background: color-mix(in srgb, var(--brand) 12%, transparent); }
  .qx-bnav-item:active .qx-bnav-ico { transform: scale(.92); }

  /* 中心发布 FAB：凸起、渐变、白描边环 */
  .qx-bnav-fab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: -26px;
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
  }
  .qx-bnav-fab-btn {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: #fff;
    background: var(--grad-brand-strong);
    border: 4px solid var(--surface);
    box-shadow: 0 14px 26px -13px rgba(var(--brand-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  }
  .qx-bnav-fab-btn .ico { width: 24px; height: 24px; stroke-width: 2.2; }
  .qx-bnav-fab:active .qx-bnav-fab-btn { transform: scale(.94); }
  .qx-bnav-item:focus-visible,
  .qx-bnav-fab:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

  /* 抽屉 / 搜索面板打开时隐藏底部导航 */
  body.nav-open .qx-bnav,
  body.qx-so-open .qx-bnav {
    opacity: 0;
    visibility: hidden;
    transform: translateY(110%);
    pointer-events: none;
  }

  /* —— 内容防遮挡：页脚底部留白 + toast 上移 —— */
  body.has-bnav .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.has-bnav .toast { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ---------- 更窄屏（≤380px）微调 ---------- */
@media (max-width: 380px) {
  .qx-bnav-item, .qx-bnav-fab { font-size: 10px; }
  .qx-bnav-ico { width: 34px; }
  .qx-bnav-ico .ico { width: 20px; height: 20px; }
  .qx-bnav-fab-btn { width: 50px; height: 50px; }
  .nav { width: min(88vw, 336px); }
  .nav .nav-link { min-height: 46px; font-size: 15px; }
}

/* =========================================================
   5) 三皮肤适配（浅色皮肤全部走语义令牌；dark 补硬编码场景）
   ========================================================= */
[data-skin="dark"] .menu-btn {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px -12px rgba(0, 0, 0, .8);
}
[data-skin="dark"] .nav .nav-close { background: rgba(255, 255, 255, .06); }
[data-skin="dark"] .nq-ico {
  color: var(--brand-300);
  background: rgba(var(--brand-rgb), .14);
  border-color: rgba(142, 200, 228, .22);
}
[data-skin="dark"] .nav-quick .nav-quick-link:hover,
[data-skin="dark"] .nav .nav-link:hover,
[data-skin="dark"] .nav .nav-auth-links a:hover { background: rgba(var(--brand-rgb), .14); }
[data-skin="dark"] .nav .nav-link.active { background: rgba(var(--brand-rgb), .18); color: var(--brand-300); }
[data-skin="dark"] .nav .nav-link.active .nav-i { color: var(--brand-300); }
[data-skin="dark"] .nav-user { background: rgba(var(--brand-rgb), .12); border-color: rgba(142, 200, 228, .2); }
[data-skin="dark"] .nav .nav-auth .nav-publish { color: var(--brand-300); border-color: rgba(142, 200, 228, .3); }
[data-skin="dark"] .qx-bnav {
  background: rgba(15, 28, 41, .88);
  border-top-color: rgba(255, 255, 255, .08);
  box-shadow: 0 -18px 44px -26px rgba(0, 0, 0, .85);
}
[data-skin="dark"] .qx-bnav-item.active { color: var(--brand-300); }
[data-skin="dark"] .qx-bnav-item.active .qx-bnav-ico { background: rgba(var(--brand-rgb), .18); }
[data-skin="dark"] .qx-bnav-fab { color: var(--brand-300); }
[data-skin="dark"] .qx-bnav-fab-btn {
  background: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-800) 100%);
  border-color: var(--surface);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* verdant：品牌绿 + 琥珀渐变由 --grad-brand-strong 自动跟随，仅补 FAB 阴影色相 */
[data-skin="verdant"] .qx-bnav-fab-btn { box-shadow: 0 14px 26px -13px rgba(var(--brand-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* =========================================================
   6) prefers-reduced-motion：关闭开合 / 汉堡 X 过渡（保留最终状态）
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .qx-burger > span,
  .menu-btn,
  .qx-bnav,
  .qx-bnav-ico,
  .qx-bnav-fab-btn,
  .nav .nav-close { transition: none !important; }
}