/* Nexus｜泊 · 语言切换控件
   视觉直接沿用导航既有分段控件（.nav-links / .nav-links a）的口径：
   外框 radius 14、内段 radius 10、激活态 ink #0A3135 + 暖纸字、字重 820。
   不引入新的设计语言，也不给切换控件单独造颜色。 */

.lang-switch{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:2px;
  order:2;
  padding:4px;
  border:1px solid rgba(10,49,53,.08);
  border-radius:14px;
  background:rgba(244,248,247,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

.lang-opt{
  appearance:none;
  -webkit-appearance:none;
  min-width:30px;
  min-height:34px;
  padding:0 9px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#5B6870;
  cursor:pointer;
  font-family:var(--sans);
  font-size:13px;
  font-weight:820;
  line-height:1;
  letter-spacing:0;
  transition:color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}

.lang-opt:hover{
  background:rgba(255,255,255,.62);
  color:#0A3135;
  transform:translateY(-1px);
}

.lang-opt.on{
  background:#0A3135;
  color:#FFFDF7;
  box-shadow:0 10px 22px -18px rgba(10,49,53,.72);
}

.lang-opt:focus-visible{
  outline:2px solid rgba(10,49,53,.42);
  outline-offset:1px;
}

/* ≤980px 时 .nav-links 折到第二行（order:3），语言切换留在第一行最右 */
@media(max-width:980px){
  .nav .wrap > .auth{ margin-left:auto; }
  .nav .wrap > .lang-switch{ margin-left:0; }
}

/* ── 导航宽度收口 ─────────────────────────────────────────────────────
   navrail 里 .brand-lockup 是可压缩的 flex 项，.nav-links 是 flex:0 1 auto。
   ① 品牌区不许被压缩：英文标签更长，1100px 视口下原样式会把品牌区压到 0 宽，
      logo 直接消失。
   ② 多了一组语言切换（112px）之后，第一行能容纳的宽度变小：1000–1080px 这段
      中文标签也会溢出视口右侧。把中文站 ≤980px 已有的多行导航提前到 1080px，
      不新造版式。
   ③ 英文标签本来就更长（导航区 727px vs 中文 517px），1240px 以下就得折行。 */
.nav .wrap > .brand-lockup{ flex:0 0 auto; }

@media(min-width:681px) and (max-width:1080px){
  .nav .wrap{ flex-wrap:wrap; gap:10px; }
  .nav-links{
    order:3;
    width:100%;
    justify-content:flex-start;
    margin-left:0;
    overflow:auto;
    padding-bottom:2px;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
}

@media(min-width:681px) and (max-width:1240px){
  html[data-nexus-lang="en"] .nav .wrap{ flex-wrap:wrap; gap:10px; }
  html[data-nexus-lang="en"] .nav-links{
    order:3;
    width:100%;
    justify-content:flex-start;
    margin-left:0;
    overflow:auto;
    padding-bottom:2px;
  }
  html[data-nexus-lang="en"] .nav-links::-webkit-scrollbar{ display:none; }
  html[data-nexus-lang="en"] .nav-links a{ white-space:nowrap; }
}

@media(max-width:680px){
  .lang-switch{
    gap:1px;
    padding:3px;
    border-radius:12px;
  }
  .lang-opt{
    min-width:27px;
    min-height:30px;
    padding:0 7px;
    border-radius:9px;
    font-size:12px;
  }
}

/* 首页（home-atlas）导航更紧凑，切换控件同步收一档 */
body:has(.home-atlas) .lang-opt{
  min-height:31px;
  padding:0 8px;
  font-size:12.5px;
}

/* ── 首页大标题：中文按「一行 8 字」写死 nowrap，英文整句会冲出视口 ──────
   .title-line 是 display:block + white-space:nowrap，为中文两行标题设计。
   英文的一行是整句（moored into a chart you can read.），768–980px 下
   会横向溢出 48–170px。中文站 ≤680px 已经允许换行（同一条规则），
   这里只是把「允许换行 + 收一档字号」提前到英文的所有宽度。 */
html[data-nexus-lang="en"] .home-atlas h1 .title-line{ white-space:normal; }
html[data-nexus-lang="en"] .home-atlas h1{
  font-size:clamp(30px,4.6vw,58px);
  line-height:1.05;
}

/* ── 笔记页顶栏（.salon-article-topbar：无 .nav 的另一种视觉语言）
   那套顶栏是 mono 字、直角、11px 边框 rgba(26,26,26,.13)，切换控件跟随它，
   否则会在同一行里同时出现两套圆角口径。
   布局上 .salon-top-me 用 margin-left:auto 把右侧动作组顶到右边，
   切换控件追加为最后一个子元素即可落在最右，不影响既有三项的位置。 */
.salon-article-topbar > .lang-switch{
  margin-left:0;
  padding:2px;
  border-color:rgba(26,26,26,.13);
  border-radius:0;
  background:rgba(255,253,247,.74);
  box-shadow:none;
}
.salon-article-topbar .lang-opt{
  min-width:26px;
  min-height:30px;
  padding:0 8px;
  border-radius:0;
  color:rgba(26,26,26,.68);
  font-family:var(--mono);
  font-size:11px;
  font-weight:760;
  letter-spacing:.8px;
}
.salon-article-topbar .lang-opt:hover{
  background:#FFFFFF;
  color:var(--salon-accent,#0B8F6B);
  transform:none;
}
.salon-article-topbar .lang-opt.on{
  background:var(--salon-accent,#0B8F6B);
  color:#FFFDF7;
  box-shadow:none;
}
/* 窄屏：只收紧间距与内距，不隐藏任何既有动作（分享/登录都保留）。
   .salon-article-back 本身 min-width:0 + 省略号，可自由收缩让位。 */
@media(max-width:680px){
  .salon-article-topbar{ padding:0 14px; gap:10px; }
  .salon-article-topbar .lang-opt{
    min-width:24px;
    padding:0 6px;
  }
  .salon-article-topbar > .salon-top-share{ padding:0 10px; }
}