/* ============================================================
   移动端导航（≤700px 汉堡 + 下拉面板）
   —— 面板与汉堡按钮由 `mnav.js` 注入；**这一张表是那两个元素的唯一样式来源**。

   🔴 为什么单独成表：原来这些规则躺在 upgrade.css 里，而 `mnav.js` 被所有带导航的页面
   引用。六个产品页只引 products.css 不引 upgrade.css ⇒ 脚本注入的面板**没有任何样式**，
   `nav.mnav{display:none}` 那条兜底也跟着没有，于是桌面宽度下整个导航链接被原样铺在页头
   下方（2026-10-22 用户截图：/pdfword 页头下面一坨"首页产品ID 数往图来…"）。
   判据本体在 tests/test_mnav_assets_20261022.py：引了 mnav.js 就必须引 mnav.css。
   ============================================================ */
.nav-burger{ display:none; }
nav.mnav{ display:none; }

/* 🔴 断点 1000px 是**量出来的**（2026-10-23）：桌面导航一行需要
   品牌 244px + 导航 624px + 左右内边距 56px ≈ 924px，而 header 是 fixed、overflow:visible
   ⇒ 窗口窄于这个数时导航换行、顶出自己的高度、压住下面的 hero（页头 72px 高，导航 57px 两行）。
   原来断点在 700px，于是 700–930px 这一段是坏的。取 1000 留出余量；
   这个数只许出现在这里——mnav.js 判"要不要收起面板"是看汉堡自己是不是被 CSS 藏了，
   不再写死宽度（两处各写一个数，改一处漏一处）。 */
@media (max-width:1000px){
  nav.links{ display:none !important; }
  .nav-burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:7px; width:42px; height:42px; margin-left:auto;
    background:transparent; border:none; padding:0; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger span{
    display:block; width:22px; height:2px; border-radius:1px;
    background:var(--paper, #1c1a17);
    transition:transform .35s var(--ease-out-quart, ease);
    transform-origin:center;
  }
  .nav-burger.open span:nth-child(1){ transform:translateY(4.5px) rotate(45deg); }
  .nav-burger.open span:nth-child(2){ transform:translateY(-4.5px) rotate(-45deg); }

  nav.mnav{
    display:block; position:absolute; top:100%; left:0; right:0;
    max-height:calc(100vh - 76px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:rgba(247,243,238,0.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line, #dcd6d1);
    box-shadow:var(--elev-4, 0 16px 40px rgba(28,20,18,0.12));
    opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .28s ease, transform .35s var(--ease-out-expo, ease);
  }
  nav.mnav.open{ opacity:1; transform:none; pointer-events:auto; }
  nav.mnav a{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:0 16px; padding:14px 8px; font-size:15px; letter-spacing:.02em;
    color:var(--paper-dim, #3a362f); text-decoration:none;
    border-bottom:1px solid var(--line-soft, #e8e4df);
    transition:color .25s;
    -webkit-tap-highlight-color:transparent;
  }
  nav.mnav a:last-child{ border-bottom:none; }
  nav.mnav a:hover{ color:var(--paper, #1c1a17); }
  nav.mnav a.active{ color:var(--vermillion, #cb2b2d); }
  /* 下拉面板里的次级说明（"脚注 / 表格 / 扫描件还原"）在移动端换行显示，
     不跟主名抢同一行的右半边 */
  nav.mnav a span{ display:block; margin-left:auto; font-size:11px; color:var(--paper-mute, #6b6558); }
  /* 图标类链接在面板里补出文字（aria-label 中英页各自原生）；
     页面级 .acct-ic 是 30px 图标钮小盒，此处整体重置为常规行 */
  nav.mnav a.acct-ic{
    display:flex; width:auto; height:auto; align-self:stretch;
    border:none; padding:14px 8px;
  }
  nav.mnav a.acct-ic::after{ content:attr(aria-label); font-size:14px; }
  nav.mnav a.acct-ic svg{ width:16px; height:16px; flex:none; }
  /* 语言切换保持胶囊样式 */
  nav.mnav a.lang-switch{
    display:block; margin:12px 16px 16px; padding:9px 0; text-align:center;
    font-family:var(--ff-mono, monospace); font-size:12px; letter-spacing:.14em;
    color:var(--paper-mute, #6b6558);
    border:1px solid var(--line, #dcd6d1); border-radius:4px;
  }
}
@media (prefers-reduced-motion: reduce){
  nav.mnav{ transition:none; }
}

/* ---------- 「产品」悬浮下拉（2026-10-21 建，2026-10-23 收进这张表） ----------
   🔴 为什么住 mnav.css 而不是 products.css 或页面内联：这张表是**所有带导航的页面共同引**
   的那一份。规则原先抄在 index.html、index_en.html、products.css 三处，于是导航镜像把
   「产品」那一格铺到 25 页时，另外 21 页拿到的是"有元素、没规则"——面板 `visibility`
   没人设 hidden，桌面宽度下整个产品菜单原样摊在页头下面。这与 2026-10-22 那条
   「注入的面板没有样式」是同一个错的第二回，只是这次没注入、是镜像铺出来的。
   取值一律 `var(--名, #字面量)`：这 25 页里有的引 upgrade.css、有的引 products.css，
   两条路径都定义了这套变量，但兜底字面量保证"某页没定义"时也不会退化成透明底。 */
.nav-drop{ position:relative; display:inline-flex; align-items:center; }
.nav-drop > a{ display:inline-flex; align-items:center; gap:6px; }
.nav-drop > a::before{ content:""; width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid currentColor; opacity:.55; order:2; margin-top:2px; }
.nav-drop-menu{
  position:absolute; top:100%; left:-16px; min-width:252px;
  padding:8px; background:#fdfbf9; border:1px solid var(--line, #c9c2be); border-radius:9px;
  box-shadow:0 20px 44px rgba(28,20,18,.16), 0 4px 12px rgba(28,20,18,.06);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s, transform .18s, visibility .18s; z-index:60;
}
/* 🔴 触发器与面板**不留缝**：面板 `top:100%` 就贴着触发器底边，所以不需要任何"桥接"。
   2026-10-21 修"看得见点不着"时这里加过一根 `.nav-drop-menu::before{left:0;right:0}` 的桥，
   那是把 12px 的缝接进面板自己——可面板宽 252px、还往左探 16px，于是这根桥**横跨了
   「订阅计划 / 在线体验 / 客户端下载」的命中区**（实测命中带 x202..454 · y33..45，
   三条链接各被压住 12px 高）：鼠标移到那几项上等于移进 `.nav-drop` 里，下拉当场打开并
   粘住（2026-10-22 用户报"三个 tab 快速左右移动就这样"）。桥要留也只能挂在
   `.nav-drop::after`（那就是触发器自己的宽度），绝不许挂在面板上。尺子在
   tests/test_idtools_sale_20261021.py（它现在只读这一处——三处抄本已合并）。 */
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{ opacity:1; visibility:visible; transform:none; }
.nav-drop-menu a{ display:block; padding:10px 12px; border-radius:6px; font-size:14px; color:var(--paper, #17100e); }
.nav-drop-menu a:hover{ background:rgba(203,43,45,.07); }
.nav-drop-menu a::after{ display:none; }
.nav-drop-menu a span{ display:block; font-size:11px; color:var(--paper-mute, #6a615f); margin-top:2px; letter-spacing:.02em; }
.nav-drop-more{ display:block; padding:10px 12px 8px; margin-top:6px; border-top:1px solid var(--line-soft, #dcd6d2); font-size:12px; color:var(--paper-mute, #6a615f); }
.nav-drop-menu a.nav-drop-more{ font-size:12px; color:var(--paper-mute, #6a615f); }
.nav-drop-menu a.nav-drop-more:hover{ color:var(--vermillion, #cb2b2d); }

/* 页头品牌标记（2026-10-23）：产品页左上角换成这件产品自己的名字与印记。
   有真图标就在 shared/nav.json 的 brand.products.<key>.logo 填路径（渲染成 <img>）；
   没图标时用这三条画一枚朱砂方印 + 标记字——这是占位，不是成品图标。 */
/* 通用的产品"方印"：页头用、产品矩阵的 tab 也用（2026-10-23 从 `.brand .mark` 抬成
   `.mark` 本身——只在 .brand 里定义时，矩阵页那枚是透明的，因为背景/圆角都挂在那条上）。
   🔴 flex:none 不是保险，是必需：`.brand` 是 flex 容器，页头窄的时候这枚方印会被压成
   一个字宽（实测 28px → 15.9px，字直接溢出）。 */
.mark{
  flex:none; width:28px; height:28px; border-radius:6px; background:var(--vermillion, #cb2b2d);
  color:#fff; display:inline-grid; place-items:center; align-self:center;
  font-family:var(--ff-serif, serif); font-weight:900; font-size:15px; line-height:1;
}

/* 页头品牌不许被压缩、也不许把产品名拆成三行（2026-10-23 实测 1000px 宽时
   「PDF转Word」被拆成 PDF / 转 / Word 三行并把页头顶出容器、压住 hero）。
   让品牌占住自己的自然宽度，压缩让给导航——导航本来就会换行。 */
.brand{ flex:none; }
.brand .cn, .brand .en{ white-space:nowrap; }