/* Shared language entries; the registry and preference behaviour live in language.js, the markup in build_en.py.
   Header: [globe 中文 ▾] just left of the contact button, which stays the header's visual end; lighter than that button.
   Phones (≤980px): [中文 ▾] [联系我们] [☰], no globe; the phone menu starts with a language row; the footer line has one too. */
.language-picker{position:relative;z-index:21;flex:none;height:36px}
.language-picker [hidden]{display:none!important}
.language-picker .lang-switch{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;width:auto;min-width:44px;height:36px;margin:0;padding:0 11px 0 10px;border:1px solid var(--line,#e2e8f0);border-radius:6px;background:transparent;color:var(--ink-2,#475569);font:400 13px/1 var(--sans,system-ui,sans-serif);white-space:nowrap;cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;transition:color .15s,border-color .15s,background .15s}
.language-picker .lang-switch>svg{display:block;flex:none;pointer-events:none}
.language-picker .lang-switch[hidden]{display:none}
.language-picker .lang-globe{width:16px;height:16px}
.language-picker .lang-short{display:block;letter-spacing:.02em}
.language-picker .lang-chevron{width:7px;height:7px;opacity:.7;transition:transform .15s}
.language-picker .lang-switch:hover,.language-picker .lang-switch[aria-expanded="true"]{color:var(--ink,#0f172a);background:var(--line-2,#f1f5f9)}
.language-picker .lang-switch[aria-expanded="true"]>.lang-chevron{transform:rotate(180deg)}
.language-picker .lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:216px;max-width:calc(100vw - 32px);max-height:calc(100vh - 88px);max-height:min(400px,calc(100dvh - 88px));overflow-y:auto;overscroll-behavior:contain;margin:0;padding:6px;list-style:none;border:1px solid var(--line,#e2e8f0);border-radius:9px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.10);color:var(--ink,#0f172a)}
.language-picker .lang-menu[hidden]{display:none}
.language-picker .lang-menu:not([hidden]){animation:language-menu-in .15s ease-out}
.language-picker .lang-menu>li{margin:0;padding:0;list-style:none}
.language-picker .lang-option{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;margin:0;padding:9px 11px;border:0;border-radius:5px;background:transparent;color:var(--ink-2,#475569);font:400 13px/1.5 var(--sans,system-ui,sans-serif);text-align:left;text-decoration:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer;appearance:none;transition:color .15s,background .15s}
.language-picker .lang-native{flex:1;min-width:0}
.language-picker .lang-check{display:block;flex:none;width:16px;height:16px;margin-left:auto;opacity:0;color:var(--blue,#1d4ed8)}
.language-picker .lang-option[aria-checked="true"]{color:var(--blue,#1d4ed8);font-weight:500;background:var(--blue-soft,#eff6ff)}
.language-picker .lang-option[aria-checked="true"] .lang-check{opacity:1}
.language-picker .lang-option:hover{color:var(--ink,#0f172a);background:var(--line-2,#f1f5f9)}
.language-picker .lang-option[aria-checked="true"]:hover{color:var(--blue,#1d4ed8);background:var(--blue-soft,#eff6ff)}
.language-picker .lang-switch:focus-visible,.language-picker .lang-option:focus-visible{outline:2px solid var(--blue,#1d4ed8);outline-offset:2px}
.language-picker .lang-fallback>summary{list-style:none}
.language-picker .lang-fallback>summary::-webkit-details-marker{display:none}
.language-picker .lang-fallback[open]>summary{color:var(--ink,#0f172a);background:var(--line-2,#f1f5f9)}
.language-picker .lang-fallback[open]>summary>.lang-chevron{transform:rotate(180deg)}
.language-picker .lang-fallback .lang-menu>a{display:block;min-height:40px;padding:9px 11px;border-radius:5px;color:var(--ink-2,#475569);font:400 13px/1.5 var(--sans,system-ui,sans-serif);text-decoration:none}
.language-picker .lang-fallback .lang-menu>a:hover{background:var(--line-2,#f1f5f9);color:var(--ink,#0f172a)}
.language-picker .lang-fallback .lang-menu>a:focus-visible{outline:2px solid var(--blue,#1d4ed8);outline-offset:2px}
@keyframes language-menu-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
/* Wide screens: 12px between the picker and the contact button, whatever the header gap
   (site.css 32px; English locales/en/layout.css 20px, 12px at 981–1099px). */
@media(min-width:981px){
  .nav-in>.language-picker{margin-right:-20px}
  html[lang="en"] .nav-in>.language-picker{margin-right:-8px}
}
@media(min-width:981px) and (max-width:1099px){html[lang="en"] .nav-in>.language-picker{margin-right:0}}
/* Phones and tablets: the picker takes the free space (site.css gave it to the contact button), the globe hides,
   the 36px button gets a 44px-tall target, and the menu hangs from the header's right gutter. */
@media(max-width:980px){
  .nav>.nav-in:has(>.language-picker){gap:10px}
  .nav-in>.language-picker{position:static;margin-left:auto}
  .nav-in>.language-picker+.nav-cta{margin-left:0}
  .language-picker .lang-switch>.lang-globe{display:none}
  .language-picker .lang-switch{gap:5px;padding:0 10px}
  .language-picker .lang-switch::before{content:"";position:absolute;inset:-5px -2px}
  .language-picker .lang-menu{top:calc(100% - 2px);right:var(--gut,16px)}
}
/* Narrow Chinese headers keep the mark and Chinese name beside all actions (LINDOS returns at 390px). */
@media(max-width:389px){html[lang="zh-CN"] .nav-in:has(>.language-picker) .brand-en{display:none}}
@media(max-width:359px){
  .nav>.nav-in:has(>.language-picker){gap:8px}
  .language-picker .lang-switch{padding:0 8px}
}
/* Phone menu: the language row comes first (#navLinks > .nav-lang); wide screens keep the header picker only. */
.nav-lang{display:none}
@media(max-width:980px){
  .nav-links>.nav-lang{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 0 12px;border-bottom:1px solid var(--line-2,#f1f5f9)}
  .nav-lang>svg{display:block;flex:none;width:16px;height:16px;margin-right:2px;color:var(--ink-3,#64748b)}
  .nav-lang .lang-link{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line,#e2e8f0);border-radius:6px;color:var(--ink-2,#475569);font-size:14px;line-height:1.2;-webkit-tap-highlight-color:transparent;transition:color .15s,border-color .15s,background .15s}
  .nav-lang .lang-link:hover{color:var(--ink,#0f172a);background:var(--line-2,#f1f5f9)}
  .nav-lang .lang-link[aria-current="true"]{color:var(--blue,#1d4ed8);border-color:var(--blue,#1d4ed8);background:var(--blue-soft,#eff6ff);font-weight:500}
  .nav-lang .lang-link:focus-visible{outline:2px solid var(--blue,#1d4ed8);outline-offset:2px}
}
/* Footer line: legal name on the left; ICP/email then the language links on the right (stacked on phones, site.css ≤640px). */
.foot:has(>.foot-lang){justify-content:flex-start;column-gap:24px}
.foot:has(>.foot-lang)>:first-child{margin-right:auto}
.foot-lang{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.foot-lang>svg{display:block;flex:none;width:13px;height:13px}
.foot-lang .lang-link[aria-current="true"]{color:var(--ink,#0f172a);font-weight:500}
.foot-lang .lang-link:focus-visible{outline:2px solid var(--blue,#1d4ed8);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.language-picker .lang-switch,.language-picker .lang-chevron,.language-picker .lang-option,.nav-lang .lang-link{transition:none}.language-picker .lang-menu:not([hidden]){animation:none}}
/* Homepage language suggestion (language.js): overlays the hero, so it never shifts layout.
   It sits just under the hero copy (JS sets --lang-suggest-top): phones below the actions, wider
   screens below the lead; clear of the navigation, the title, the buttons and the scene's AI card. */
.lang-suggest{position:absolute;z-index:4;top:var(--lang-suggest-top,6px);left:calc(var(--bleed,0px) + var(--gut,16px));display:flex;align-items:center;gap:2px;box-sizing:border-box;width:max-content;max-width:min(560px,calc(100% - 2 * var(--gut,16px)));min-height:40px;max-height:56px;margin:0;padding:0 0 0 12px;border:1px solid var(--line,#e2e8f0);border-radius:8px;background:rgba(255,255,255,.97);box-shadow:0 6px 20px rgba(15,23,42,.08);color:var(--ink,#0f172a);font:400 13px/1.35 var(--sans,system-ui,sans-serif);text-align:left;animation:lang-suggest-in .2s ease-out both}
.lang-suggest.is-fixed{position:fixed;z-index:9;left:auto;right:max(var(--gut,16px),env(safe-area-inset-right))}
.lang-suggest-icon{display:block;flex:none;width:16px;height:16px;margin-right:6px;fill:none;stroke:var(--ink-3,#64748b);stroke-width:1.6}
.lang-suggest-text{flex:1 1 auto;min-width:0;margin:0 6px 0 0;color:var(--ink-2,#475569);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
.lang-suggest-view{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 10px;border-radius:6px;color:var(--blue,#1d4ed8);font-weight:500;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background-color .18s,color .18s}
.lang-suggest-view:hover{background:var(--blue-soft,#eff6ff);color:var(--blue-deep,#1e3a8a)}
.lang-suggest-dismiss{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-3,#64748b);cursor:pointer;appearance:none;-webkit-tap-highlight-color:transparent;transition:background-color .18s,color .18s}
.lang-suggest-dismiss:hover{background:var(--line-2,#f1f5f9);color:var(--ink,#0f172a)}
.lang-suggest-dismiss>svg{display:block;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;pointer-events:none}
.lang-suggest-view:focus-visible,.lang-suggest-dismiss:focus-visible{outline:2px solid var(--blue,#1d4ed8);outline-offset:-2px}
/* Touch and phone layouts: 44px targets, bar no taller than 56px. */
@media(pointer:coarse),(max-width:980px){
  .lang-suggest{min-height:48px}
  .lang-suggest-view{min-height:44px}
  .lang-suggest-dismiss{width:44px;height:44px}
}
@media(max-width:980px){
  .lang-suggest{left:calc(var(--bleed,0px) + max(var(--gut,16px),env(safe-area-inset-left)));max-width:calc(100% - var(--bleed,0px) * 2 - max(var(--gut,16px),env(safe-area-inset-left)) - max(var(--gut,16px),env(safe-area-inset-right)))}
}
@media(max-width:419px){.lang-suggest-icon{display:none}}
/* The open phone menu owns the screen. */
.nav.open~main .lang-suggest{display:none}
html:has(.nav.open) .lang-suggest{display:none}
@keyframes lang-suggest-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lang-suggest{animation:none}.lang-suggest-view,.lang-suggest-dismiss{transition:none}}
@media print{.lang-suggest{display:none}}