/* The website's nav and footer on the zh account center's signed-out pages (site-chrome.tsx).
   Ported from the website repo, site/src/styles/global.css (导航 / 语言切换 / 页脚 / 主题按钮 / 全站搜索
   and the ≤767px block). Loaded only on those pages; tokens come from tokens.css (the same package). */

/* The website's page frame: the footer sits at the bottom of short pages (global.css body / main). */
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;width:100%}

/* ---------- 导航 ---------- */
.nav{display:flex;align-items:center;gap:28px;height:64px;font-size:14px}
.nav a{color:var(--mute);text-decoration:none;white-space:nowrap}
.nav a:visited{color:var(--mute)}
.nav a:hover{color:var(--fg)}
.nav .logo{font-weight:700;letter-spacing:.02em;color:var(--fg);font-family:var(--font-serif)}
.nav .logo:visited{color:var(--fg)}
.nav .items{display:flex;align-items:center;gap:28px}
.nav .items a{display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:var(--s35)}
/* 「登录」(owner 2026-10-08: text only, no colour fill): the same mute text link as RSS / 联系, darker on hover;
   44px touch target. Same rule as the website (global.css .nav a.nav-signin). */
.nav a.nav-signin{display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none}
/* No border in any state: keyboard focus shows darker text + underline instead of the outline. */
.nav a.nav-signin:focus-visible{outline:none;color:var(--fg);text-decoration:underline;text-underline-offset:3px}

/* ---------- 语言切换：导航里是菜单（≥768），页脚里是「中文 · English」（≤767） ---------- */
.lang-pair{display:none}
.lang-menu{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--mute);cursor:pointer;list-style:none;white-space:nowrap;transition:color var(--dur) var(--ease)}
.lang-trigger::-webkit-details-marker{display:none}
.lang-trigger:hover,.lang-menu[open] .lang-trigger{color:var(--fg)}
.lang-menu[open] .lang-trigger .caret{transform:rotate(180deg)}
.lang-pop{position:absolute;top:calc(100% + var(--s1));right:0;z-index:20;min-width:148px;display:flex;flex-direction:column;padding:var(--s1) 0;background:var(--surface);border:1px solid var(--line)}
.lang-pop>*{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;padding:0 var(--s3);white-space:nowrap}
.nav .lang-pop a{color:var(--mute)}
.nav .lang-pop a:hover{color:var(--fg);background:var(--surface-2)}
.lang-cur{color:var(--fg)}
.lang-pop .lang-cur::after{content:"✓";color:var(--accent);font-size:13px}

/* ---------- 搜索（一个链接，回网站首页打开搜索框）与主题按钮 ---------- */
.nav .search-btn{margin-left:var(--s3);flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid transparent;border-radius:4px;background:none;color:var(--mute);cursor:pointer;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.nav .search-btn:hover{color:var(--fg);border-color:var(--line)}
.nav .theme{margin-left:var(--s3)}
.nav .search-btn~.theme{margin-left:calc(-1 * var(--s35))}

/* ---------- 页脚 ----------
   `footer.foot`, not `.foot`: the invite card has its own <p class="foot"> (console.css .inv .foot). */
footer.foot{border-top:1px solid var(--line);margin-top:var(--s6);padding:28px 0 40px;font-size:13px;line-height:1.7;color:var(--mute)}
/* Full-bleed pages (sign-in, invite) end in their own background: no gap of page colour above the rule. */
main.full+footer.foot{margin-top:0}
footer.foot .inner{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
footer.foot a,footer.foot a:visited{color:var(--mute);text-decoration:none}
footer.foot a:hover{color:var(--accent)}
/* QR codes keep a white ground in both themes: most scanners can't read a dark one. */
footer.foot .follow{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
footer.foot .follow-h{font-size:13px;color:var(--mute)}
footer.foot .foot-qr{margin:0;text-align:center}
footer.foot .foot-qr img{display:block;box-sizing:content-box;width:104px;height:104px;padding:6px;background:#fff;border:1px solid var(--line)}
footer.foot .foot-qr figcaption{margin-top:var(--s2);font-size:12px;color:var(--mute)}

/* ---------- 手机（≤767）：导航项横滚，右侧 RSS / 联系与语言菜单让位（页脚里有），登录、搜索、主题钉住 ---------- */
@media (max-width:767px){
  .nav{gap:var(--s3)}
  .nav .items{gap:var(--s35);flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .nav .items::-webkit-scrollbar{display:none}
  .nav .items a{flex:none}
  .nav .right{display:none}
  .nav a.nav-signin{min-width:44px}
  .nav .lang-menu{display:none}
  .lang-pair{display:inline-flex;align-items:center;gap:var(--s2)}
  .lang-pair .lang-cur{color:var(--fg)}
  .lang-pair .lang-cur+a::before,.lang-pair a+.lang-cur::before{content:"·";margin-right:var(--s2);color:var(--mute)}
  .lang-pair .lang-cur+a{padding-left:0}
  .lang-pair a:first-child{padding-right:0}
  .nav .items a,.nav .right a,footer.foot a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;box-sizing:border-box}
  .nav .items a,.nav .right a{padding:0 var(--s2)}
  .nav .logo{display:inline-flex;align-items:center;min-height:44px}
  footer.foot .inner{row-gap:0}
  footer.foot a{padding:0 var(--s2)}
  footer.foot .follow{flex-basis:100%;flex-wrap:wrap;margin-left:0;margin-top:var(--s3);gap:var(--s3) var(--s4)}
  footer.foot .follow-h{flex-basis:100%}
}