/*! TokModel i18n · 语言切换器样式（依赖 tokens.css 的变量） */

.tm-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* ---------- 触发器：幽灵胶囊 + 裸线条翻译图标 ----------
   r87 版问题（老大反馈「图标和边框不合适」）：
   ① 地球套 20px 紫色圆底，导航里唯一一个「圆里套图标」的控件，视觉过重；
   ② 展开态用紫色 ring 包住按钮，和下方中性白卡菜单不搭。
   r88 改法：图标改为裸线条 translate 图形（文+A），随文字同色、hover 转紫；
   hover 用中性灰底，展开态边框与菜单同为中性 1px。菜单样式不动。 */
.tm-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px 0 8px;
  margin: 0;
  border: 0;
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.tm-lang-btn:hover {
  color: var(--ink);
  background: rgba(12, 14, 20, .05);
}

.tm-lang-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(108, 59, 250, .18);
}

/* 展开态：白底 + 与菜单一致的中性描边，不再用紫色 ring */
.tm-lang.is-open .tm-lang-btn {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(12, 14, 20, .08), 0 8px 22px -14px rgba(12, 14, 20, .45);
}

/* 图标：17px 裸线条，无圆底、无描边框；hover/展开时转品牌紫 */
.tm-lang-globe {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: var(--ink-2);
  transition: color .18s ease;
}

.tm-lang-btn:hover .tm-lang-globe,
.tm-lang.is-open .tm-lang-globe { color: var(--brand); }

.tm-lang-code {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  /* 固定宽度：中文/EN/JA/VI 切换时按钮不跳宽，导航位置保持稳定 */
  min-width: 26px;
  text-align: left;
}

.tm-lang-caret {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  color: var(--ink-3);
  opacity: .8;
  transition: transform .2s ease, opacity .18s ease;
}

.tm-lang-btn:hover .tm-lang-caret { opacity: 1; }

.tm-lang.is-open .tm-lang-caret {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--brand);
}

/* ---------- 下拉 ---------- */
.tm-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 196px;
  padding: 7px;
  background: #fff;
  border: 1px solid rgba(12, 14, 20, .07);
  border-radius: 14px;
  box-shadow: 0 24px 52px -26px rgba(12, 14, 20, .46), 0 2px 6px -2px rgba(12, 14, 20, .05);
  z-index: 60;
}

.tm-lang-menu[hidden] { display: none; }

.tm-lang-menu:not([hidden]) {
  animation: tmLangIn .16s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes tmLangIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-lang-menu:not([hidden]) { animation: none; }
  .tm-lang-caret { transition: none; }
}

.tm-lang-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.tm-lang-item:hover {
  background: rgba(108, 59, 250, .07);
  color: var(--ink);
}

.tm-lang-item:focus-visible {
  outline: none;
  background: rgba(108, 59, 250, .1);
  box-shadow: inset 0 0 0 1px rgba(108, 59, 250, .35);
}

/* 选中项：整行淡紫底 + 代码徽标实心紫，不再是只换字色 */
.tm-lang-item[aria-selected="true"] {
  background: rgba(108, 59, 250, .075);
  color: var(--ink);
  font-weight: 600;
}

/* 语言代码徽标（原为裸文字，现做成 26px 圆角方块，四语文宽度天然一致） */
.tm-lang-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(12, 14, 20, .05);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-3);
  min-width: 0;
  transition: background .15s ease, color .15s ease;
}

.tm-lang-item:hover .tm-lang-name {
  background: rgba(108, 59, 250, .12);
  color: var(--brand);
}

.tm-lang-item[aria-selected="true"] .tm-lang-name {
  background: var(--brand);
  color: #fff;
}

.tm-lang-native {
  flex: 1 1 auto;
  white-space: nowrap;
}

.tm-lang-tick {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 右侧容器（保证加按钮后导航布局不变） ---------- */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.nav-right .logo,
.nav-right .back,
.nav-right .top-link { min-height: 34px; }

/* ---------- 首帧防闪：字典未就绪前藏正文 ---------- */
html.tm-i18n body {
  visibility: hidden;
}

/* ---------- 窄屏：只留地球图标，把宽度让给 logo / 汉堡 / 登录 ---------- */
@media (max-width: 640px) {
  /* 40×40 方形按钮：与 44px 的汉堡 / 登录按钮尺寸接近，三个控件视觉等重 */
  .tm-lang-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }
  .tm-lang-code,
  .tm-lang-caret { display: none; }
  /* 只剩图标时放大线条图形撑满按钮中心（r88 已无圆底，无需去底规则） */
  .tm-lang-globe {
    width: 20px;
    height: 20px;
  }
  .tm-lang-btn:hover { background: rgba(12, 14, 20, .05); }
  .tm-lang-menu {
    min-width: 168px;
    right: -4px;
  }
  .nav-right { gap: 8px; }
  /* 汉堡按钮不得被压缩：空间不足时它曾从 44px 被挤到 20px（图标变形） */
  .mobile-nav-toggle { flex: 0 0 auto; }
}

/* ---------- 极窄屏（≤380px）：四项并排时的宽度再分配 ----------
   320px 实测：原 22px 内边距 + 141px logo + 44px 汉堡 + 31px 语言 + 76px 登录
   合计已超出可用宽度，只能靠压扁汉堡来"凑"，故按比例回收：
   内边距 22→14（省 16）、logo 26→23 高（省 17）、登录左右内边距 24→16（省 16）
   合计省 49px，320px 下仍有约 25px 余量留给 space-between 的间隙。 */
@media (max-width: 380px) {
  .nav-inner {
    padding: 0 14px;
    gap: 8px;
  }
  .logo-img { height: 23px; }
  .btn-login { padding: 10px 16px; }
  /* 展开菜单与 logo 左边界保持对齐（随内边距一起收窄） */
  .mobile-nav-label { left: 14px; right: 14px; }
}

/* ---------- 极窄屏（≤340px）：320px 机型的最后 4px ----------
   英文 "Sign in" / 越南语 "Đăng nhập" 比中文「登录」宽约 18px，
   实测 320px 下 nav-right 会顶到 324 > 320（整页横向滚动 4px）。
   这里把 logo、登录按钮内边距与最小间距再收一档。 */
@media (max-width: 352px) {
  .nav-inner { gap: 6px; }
  .logo-img { height: 19px; }
  .tm-lang-btn { width: 36px; height: 36px; }
  .btn-login { padding: 10px 8px; font-size: 13px; }
}

/* 数字 + 小字号后缀的间距补偿
   .cell b 是 26px，里面的 <i> 只有 15.6px，原文只有一个空格（约 2px），
   拉丁字母与日文假名贴上去会看成「0hidden fees」。中文因汉字自带字面留白不明显，
   所以只在非中文态补。 */
html[data-tm-lang] .cell b i { margin-left: .18em; }

/* 上面这条只管「数字 + 文字后缀」。百分号是数字的一部分，必须紧跟：
   55% off 不能变成 55 % off。 */
html[data-tm-lang] .cell b#discountRatio i { margin-left: 0; }

/* 最低价卡有两种语序，间距方向相反：
   后置（中文「起」/ 日文「〜」）跟在数字后 → 留左距；
   前置（英文 from / 越南语 từ）在数字前 → 左距归零、给右距。
   注意必须用明确的 lang 值选择器：上面 `.cell b i` 的 .18em 是通用规则，
   若这里仍写通配就会把日文的「¥0.44〜」压成「¥0.44~」。 */
html[data-tm-lang="ja"] .cell b#minimumPrice i { margin-left: .18em; margin-right: 0; }
html[data-tm-lang="en"] .cell b#minimumPrice i,
html[data-tm-lang="vi"] .cell b#minimumPrice i { margin-left: 0; margin-right: .45em; }

/* 说明：hero 主标题的逗号在 en/vi 字典里已并进前半句的整块 HTML（见 b 层「前沿⟦0⟧⟦1⟧」），
   不再经过 .cm 节点 —— 否则逗号会被当成独立行内元素，在窄屏掉到下一行开头。 */

/* 窄屏断词：hero 标题后半段是独立 inline 元素，390px 下会被从词中间折断
   （日文「手の届 / く価格で」、英文「at a fair / price」）。设为 inline-block
   让它整体换行，短语保持完整；桌面宽度足够时行为不变。 */
html[data-tm-lang] .hero h1 .fill-blue { display: inline-block; }

/* hero 主标题在外文里主动分成两段（字典 b 层带 <br>，行尾无标点），中文仍是单行。
   .hero h1 原本 line-height:.98 是给单行大字收紧字身的；一旦分两行，
   拉丁字母的降部（p / g）会贴住下一行的升部，读起来黏在一起。
   r76: 1.04 仍偏挤（老大反馈两行贴太近），放宽到 1.12 —— 两行大字的
   舒适区间在 1.1~1.15，再大会松散失去展示字的紧凑感。中文单行视觉不变。 */
html[data-tm-lang="en"] .hero h1,
html[data-tm-lang="ja"] .hero h1,
html[data-tm-lang="vi"] .hero h1 { line-height: 1.12; }

/* 英文 hero 的字母横向间距单独放松，避免粗体短语 "at a fair price" 过于拥挤；垂直行高保持 1.12。 */
html[data-tm-lang="en"] .hero h1 { letter-spacing: -0.02em; }


/* r78: keep the longer English hero on two lines across viewport sizes. */
html[data-tm-lang="en"] .hero h1 { font-size: clamp(26px, min(8.2vw, 10.5vh), 132px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* r79：水印独占标题上方留白带；仅调整装饰字，不挤压或缩小主标题。 */
.hero .hero-giant {
  top: 24px;
  font-size: clamp(38px, 8vw, 104px);
}

/* r81：英文首行改为 "Frontier models" 后，四种语言的标题起点重新对齐，
   水印恢复为**同一尺寸**，不再按语种分别取值（r79 的分语种规则作废）。
   放大上限由两行标题的顶部决定：水印底边必须留在标题上方。
   主公式用 vh 兜底，避免 1366x768 / 1440x900 这类"宽但不高"的屏幕压到标题。 */
.hero .hero-giant {
  top: 10px;
  font-size: clamp(46px, min(10.4vw, 13.8vh), 148px);
}

/* 矮视口（≤660 高）：标题字号同步变小、内容整体居中，
   垂直余量反而比 900 高的屏幕更多，不必跟着 vh 一起缩。 */
@media (max-height: 660px) {
  .hero .hero-giant { font-size: clamp(46px, 10.4vw, 100px); }
}

/* 4:3 宽屏（1024x768 等）：标题两行且居中后起点最高，是全站最紧的一组，
   单独收紧；不影响 16:10 / 16:9。 */
@media (min-width: 900px) and (max-aspect-ratio: 7/5) {
  .hero .hero-giant { top: 4px; font-size: clamp(46px, 7.6vw, 74px); }
}

/* r82：老大反馈水印最右侧的 D/E/L 看不清。实测桌面下水印元素本身没有被裁
   （与 .hero 右边界仍有 69~139px 余量），消失完全是 r79 定下的遮罩造成的 ——
   它从元素自身 44% 处就开始淡出、88% 处已全透明，等于把后三个字母抹掉了。
   处理两步：
   ① 桌面把水印中心由 66% 右移到 71%，让整词重心落在画面右侧；
      手机/平板不动（62%），避免窄屏右端被 .hero 的 overflow:hidden 硬裁。
   ② 不透明段 44% → 66%、淡出终点 88% → 100%，使 TOKMODEL 全词可辨，
      而淡出终点正好落在元素右端，不产生硬切边。四语共用，尺寸仍完全一致。 */
.hero .hero-giant {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 66%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 1025px) {
  .hero .hero-giant { left: 71%; }
}

/* 320px 极窄屏（iPhone SE 一代等）：水印右端原本就超出 .hero 边界 12px，
   以前被 88% 就全透明的旧遮罩掩盖着；遮罩放宽到 100% 后这段会露出硬切。
   这里把中心收到 58%，让整词留在容器内，视觉上仍是居中偏右。 */
@media (max-width: 360px) {
  .hero .hero-giant { left: 58%; }
}

/* r83：老大要求水印往下移。原来 top:10px 让水印上缘距导航只余约 24px，看着贴顶。
   主规则下移到 16px，落在「导航底 → 标题顶」这条留白带的垂直中心附近：
   1440x900 实测该带高 147px、水印字高 112px，居中约需 17.5px；
   取 16 而非 18，是因为 1280x800 / 1600x900 的日文标题起点最高，
   18px 时只余 4px 行框间距，16px 留到 6px 更稳。 */
.hero .hero-giant { top: 16px; }

@media (min-width: 900px) and (max-aspect-ratio: 7/5) {
  .hero .hero-giant { top: 4px; }
}