/* navtools.css — 导航右上工具簇：语言 / 地区 / 授权入口。全站五页共用。
   为什么独立成文件：导航样式散在各页自有 css 里，而这簇控件必须五页一致，
   放进任何一页都会被其余四页抄漏；vendor 是只读模板包，进不去。
   形态：细线玻璃胶囊 + 玻璃下拉面板，随 .vx-nav 的滚动收起一起走。
   行为（面板开合 / 语言填充 / 地区记忆）在 js/lang.js。 */

.nav-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  margin-left: auto;
}

/* 品牌标不许参与 flex 压缩：一旦被挤，logo 的 max-width:100% 会把它连锁压成 0 宽
   （2026-07-30 实测：390 视口下 brand w=0，logo 直接消失） */
.vx-nav .vx-nav__brand { flex: none; }

/* ── 胶囊（两个下拉按钮 + 授权入口共用一副身材） ── */
.nav-pick { position: relative; }

.pick-btn,
.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: var(--stroke-thin) solid var(--line-subtle);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-hi);
  font: inherit;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.pick-btn:hover,
.nav-auth:hover {
  background: var(--glass-hover);
  border-color: color-mix(in srgb, var(--text-hi) 28%, transparent);
}
.nav-pick.open .pick-btn {
  background: var(--glass);
  border-color: color-mix(in srgb, var(--sync-accent, var(--accent)) 55%, transparent);
}

.pick-ico {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.pick-caret {
  width: 9px; height: 6px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
  opacity: .6;
  transition: transform var(--dur-fast) var(--ease-standard);
}
.nav-pick.open .pick-caret { transform: rotate(180deg); }

.picker-val,
.auth-txt { max-width: 11em; overflow: hidden; text-overflow: ellipsis; }

/* 授权入口是三件里唯一的「去处」，给一圈主题色把它抬出来。
   用 --sync-accent：滚过分区交界时连续插值，不跟着分区"啪"地换色（同 vendor 导航下划线） */
.nav-auth { border-color: color-mix(in srgb, var(--sync-accent, var(--accent)) 46%, transparent); }
.nav-auth:hover {
  border-color: var(--sync-accent, var(--accent));
  background: color-mix(in srgb, var(--sync-accent, var(--accent)) 14%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--sync-accent, var(--accent)) 28%, transparent);
}

/* ── 下拉面板 ── */
.pick-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 5;
  min-width: 168px;
  max-width: min(260px, calc(100vw - 28px));
  padding: 6px;
  border: var(--stroke-thin) solid var(--line-subtle);
  border-radius: var(--radius-150);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: 0 18px 44px rgb(0 0 0 / .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast);
}
.nav-pick.open .pick-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.pick-menu button,
.pick-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-100);
  background: none;
  color: var(--text-mid);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.pick-menu button:hover,
.pick-menu a:hover { background: var(--glass-hover); color: var(--text-hi); }

/* 当前项：主题色圆点；未选中的留同宽空位，文字左缘对齐 */
.pick-menu button::before {
  content: "";
  width: 5px; height: 5px; flex: none;
  border-radius: 50%;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-standard);
}
.pick-menu button.on { color: var(--text-hi); }
.pick-menu button.on::before {
  background: var(--sync-accent, var(--accent));
  box-shadow: 0 0 8px var(--sync-accent, var(--accent));
}

/* 地区菜单尾部的「查看代理 →」：与选项隔一道细线，缩进对齐圆点后的文字 */
.pick-menu a.region-go {
  margin-top: 5px;
  padding-top: 9px;
  padding-left: 23px;
  border-top: var(--stroke-thin) solid var(--line-subtle);
  border-radius: 0 0 var(--radius-100) var(--radius-100);
  color: var(--sync-accent, var(--accent));
}
.pick-menu a.region-go:hover { color: var(--text-hi); }

/* 面板开着时导航抬一层：回访 chip（回到 Ember/Plum）与导航同在 --z-nav 且 DOM 在后，
   不抬会盖住展开菜单的右上角 */
.vx-nav:has(.nav-pick.open) { z-index: var(--z-nav-top, 115); }

/* ── 窄屏：胶囊收成纯图标（值与文字进面板里看），授权保图标 ──
   断点定在 900：catalog 四链 + 英文全字胶囊在 768–840 实测溢出右缘（Partnership 被切），
   900 以上最挤组合实测富余 ~70px */
@media (max-width: 899.98px) {
  .nav-tools { gap: var(--sp-50); }
  .pick-btn .picker-val,
  .nav-auth .auth-txt { display: none; }
  .pick-btn, .nav-auth { padding: 0 9px; gap: 5px; }
}

/* 更窄一档：去掉小箭头、压 nav 间距——390 视口实测预算：
   brand 34 + 玄关三链 ~176 + 三胶囊 ~104 + 间隙与页边 ~64 ≈ 378 / 390 */
@media (max-width: 620px) {
  .vx-nav { gap: clamp(8px, 2.5vw, 16px); }
  .pick-caret { display: none; }
  .pick-btn, .nav-auth { padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pick-menu, .pick-caret, .pick-btn, .nav-auth { transition: none; }
}

/* ── 页脚署名 ──
   这里放在 navtools.css 而不是各页自己的样式表，只有一个理由：八个页面里
   navtools.css 是唯一一份**全都加载**的站体样式（vendor 三件不许改）。
   排版刻意与 .ph 一致——页脚同时有已填的署名和未填的法务占位，
   两者字号/颜色不一致会让人以为占位是另一种东西。 */
.foot-brand {
  display: block;
  color: var(--text-low);
  font-size: calc(12px * var(--ratio, 1));
  letter-spacing: .04em;
}
.foot-brand + .ph { display: block; margin-top: 6px; }
/* 2026-08-07：品牌方给了营业执照上的公司全称，页脚从「品牌名 + 一条合并占位」
   拆成「品牌名 / 公司全称 / 法务条款占位」三行。必须拆——那条合并占位问的两件事
   现在只剩一件没答，继续合并写等于让已经填好的公司名一直顶着红占位。
   字号与 .foot-brand 一致：这三行是同一层级的署名信息，不分主次。 */
.foot-entity {
  display: block;
  margin-top: 4px;
  color: var(--text-low);
  font-size: calc(12px * var(--ratio, 1));
  letter-spacing: .04em;
}
.foot-entity + .ph { display: block; margin-top: 6px; }

/* 2026-08-10：这里曾有 .foot-wipe / .foot-wipe-btn / .foot-wipe-hint 三组规则，
   配页脚那个「清除本站数据」按钮。品牌方当天先答「你们看着办」（做了）、
   再答「撤掉」（撤了），所以整块移走。
   原样存在 _build/attic/wipe-button-20260810/，要装回来对照那里的 README。
   ⚠ 装回来必须同时改回隐私政策第七节——政策里写了什么，站上就得真有什么。 */

/* ── .world-foot 的左右留白 ──
   2026-08-07 截图查出：六个页面（目录 / 商详 / 对比 / 询单 / 两个世界页）用的
   .world-foot **一条 CSS 规则都没有**，vendor 的 .vx-footer 只给了 padding-block，
   于是署名整块贴在视口 x=0，第一个字紧挨屏幕边。
   以前只有一行「© HimeKingDoll」，不细看看不出来；这次拆成三行、又多了一行中文公司名，
   一眼就是排版坏了。数值照抄 partner.css 的 .pt-foot，两处页脚从此对齐。 */
.world-foot {
  max-width: var(--content-max, 90rem);
  margin: 0 auto;
  padding-inline: var(--page-gutter, clamp(1.25rem, 5vw, 6rem));
}