/* ============================================================
   拼豆鸭 · 全站公共顶部栏样式
   视觉基准：beads/index.html 首页顶部栏。
   使用页面：首页、docs/{about,privacy,terms}.html、构建期静态收录页、
   后端运行时收录页（/library/*、/user/*）。

   色值统一写成 var(--token, 默认主题色)：首页与 SPA 引入 design token
   后会自动跟随主题换装；协议页与收录页没有 token 时回落到默认主题色，
   不再各写一套，避免 logo 大小、页头高度、间距逐页漂移。

   站内 logo 用矢量 logo.svg，浏览器按当前尺寸实时栅格化，任意 DPI 都不发虚；
   位图图标（favicon-*、apple-touch-icon、og-image）由 generate-favicons.mjs 生成，
   图案铺满画布，源文件 favicon.png 只是 12×12 像素稿、不在页面里引用。
   本文件只负责顶部栏，不干预页面其它布局。
   ============================================================ */

.skip-link{position:absolute;left:-9999px;top:0;z-index:99}
.skip-link:focus{
  left:16px;top:12px;z-index:99;padding:8px 14px;border-radius:8px;
  background:var(--surface,#fffdf9);
  box-shadow:var(--shadow-md,0 2px 6px rgba(63,50,41,.07),0 18px 42px rgba(63,50,41,.11));
  font-size:14px;
}

/* 页面内 logo 统一用矢量 logo.svg：viewBox 0 0 12 12 + crispEdges，
   26/34/36px 都是实时栅格化，不需要 image-rendering（那是位图缩放才需要的），
   也不存在「放大插值发虚 / 降采样丢细节」的问题。 */
.site-logo{display:block;object-fit:contain}

.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--color-surface,#fefaf5);
  background:color-mix(in srgb,var(--color-surface,#fefaf5) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--ink-100,#eddcd2);
}
.header-inner{
  max-width:var(--max,1180px);margin:0 auto;
  padding:0 clamp(18px,4vw,40px);height:72px;
  display:flex;align-items:center;gap:18px;
}
.brand{
  display:flex;align-items:center;gap:11px;
  font-size:18px;font-weight:700;letter-spacing:.01em;
  color:var(--ink-900,#3f3229);text-decoration:none;
}
.brand:hover{text-decoration:none}
.brand img{
  width:36px;height:36px;border-radius:10px;background:#fff;object-fit:contain;
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink-900,#3f3229) 16%,transparent);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{
  font-family:var(--font-display,"PingFang SC","HarmonyOS Sans SC","MiSans","Noto Sans SC","Microsoft YaHei",sans-serif);
  font-size:18px;font-weight:700;letter-spacing:.01em;
}
.brand-text small{
  margin-top:1px;
  font-family:var(--font-mono,ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace);
  font-size:10.5px;font-weight:500;letter-spacing:.12em;
  color:var(--ink-500,#8a6f5c);text-transform:lowercase;
}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.site-nav a{
  padding:7px 13px;border-radius:999px;font-size:14px;
  color:var(--ink-500,#8a6f5c);white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.site-nav a:hover{
  background:var(--color-surface-alt,#f5f0eb);
  color:var(--ink-700,#5e4b3c);text-decoration:none;
}
.site-nav a[aria-current="page"]{
  background:var(--color-primary-soft,#fdf3e7);
  color:var(--color-primary,#b45f4c);font-weight:600;
}

/* 与首页一致的响应式收缩：窄屏先压缩导航，再隐藏导航，最后收小品牌文字 */
@media (max-width:1040px){
  .site-nav a{padding:7px 10px;font-size:13.5px}
}
@media (max-width:820px){
  .site-nav{display:none}
  .header-inner{justify-content:space-between;height:66px}
}
@media (max-width:560px){
  .brand-text small{font-size:10px;letter-spacing:.08em}
}