/* ============================================================
   瓷脉 · 站点主导航（全站唯一真源）
   ------------------------------------------------------------
   规则：
   1. 这段是全站导航样式唯一定义处，页面内不得再写 .site-nav / .sn-* 规则。
   2. 颜色一律带 fallback 值，页面 :root 变量命名不同也能一致渲染。
   3. 断点规则写在文件末尾（同权重后者胜，写前面会被基础规则覆盖）。
   4. 链接条永不换行，窄屏改为横向滚动；品牌固定不收缩。
   5. 底部菜单（.mbn）也在这里定义，由 site.js 统一注入，页面无需写标记。
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 245, 240, .94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line, #e0dbce);
}

.site-nav .sn-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 18px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* —— 品牌：logo + 中文名 + 拉丁名，整块不参与压缩 —— */
.site-nav .sn-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink, #1a201d);
  text-decoration: none;
}

.site-nav .sn-brand svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: block;
}

.site-nav .sn-brand em {
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.3px;
  color: var(--ink3, #666d69);
  white-space: nowrap;
}

/* —— 链接条：一行到底，可横向滚动，滚动条隐藏 —— */
.site-nav .sn-lnks {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  min-width: 0;
  flex-shrink: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.site-nav .sn-lnks::-webkit-scrollbar { display: none; }

.site-nav .sn-lnks a {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink2, #4a544f);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}

.site-nav .sn-lnks a:hover {
  background: #eae5da;
  color: var(--ink, #1a201d);
}

/* 当前页：底色块，不靠内联 style，避免各页写法不一 */
.site-nav .sn-lnks a[aria-current="page"] {
  background: #e3ddcd;
  color: var(--ink, #1a201d);
  font-weight: 600;
}

.site-nav .sn-lnks a:focus-visible {
  outline: 2px solid var(--jade, #2c6a5b);
  outline-offset: 1px;
}


/* ============================================================
   下拉项（区域专藏 / 更多）—— 2026-11-02 第 52 轮
   ------------------------------------------------------------
   两个都是 <button>：点开是菜单，不是跳转。区域专藏的总览入口放在
   菜单第一行，页脚也有一条，所以按钮不做成链接不会丢入口。

   面板为什么挂在 .site-nav 下而不是按钮里：.sn-lnks 有 overflow-x:auto，
   面板放在里面会被裁掉；而 .site-nav 是 sticky（positioned），
   absolute 子元素正好相对它定位。
   ============================================================ */

.site-nav .sn-lnks button {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink2, #4a544f);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}

.site-nav .sn-lnks button:hover { background: #eae5da; color: var(--ink, #1a201d); }

.site-nav .sn-lnks button.on,
.site-nav .sn-lnks button[aria-expanded="true"] {
  background: #e3ddcd;
  color: var(--ink, #1a201d);
  font-weight: 600;
}

.site-nav .sn-lnks button:focus-visible {
  outline: 2px solid var(--jade, #2c6a5b);
  outline-offset: 1px;
}

.site-nav .sn-lnks button .ar {
  width: 12px; height: 12px; flex: 0 0 12px;
  opacity: .5;
  transition: transform .18s ease;
}
.site-nav .sn-lnks button[aria-expanded="true"] .ar { transform: rotate(180deg); }

/* 当前区域名：按钮上直接显示，用户不用点开就知道自己落在哪条线 */
.sn-area .cu {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.35;
  color: var(--jade-tx, #2c6a5b);
  background: rgba(44, 106, 91, .10);
  padding: 2px 6px;
  border-radius: 5px;
  max-width: 6.4em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* —— 面板 —— */
.sn-menu {
  position: absolute;
  z-index: 95;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e0dbce);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(18, 28, 24, .20), 0 2px 8px rgba(18, 28, 24, .07);
  padding: 12px 14px 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 14px;
  animation: sn-drop .16s cubic-bezier(.22, .8, .3, 1);
}

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

@keyframes sn-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.sn-menu.one { grid-template-columns: 1fr; width: 196px; padding: 10px; }

.sn-mg { min-width: 0; }

.sn-mgl {
  font-size: 10.5px;
  letter-spacing: 1.5px;
  color: var(--ink3, #666d69);
  font-weight: 600;
  padding: 4px 10px 7px;
  border-bottom: 1px solid var(--line, #e0dbce);
  margin-bottom: 5px;
}

.sn-menu a {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 29px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink2, #4a544f);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.sn-menu a:hover { background: #eae5da; color: var(--ink, #1a201d); }
.sn-menu a.on { background: #e3ddcd; color: var(--ink, #1a201d); font-weight: 600; }

.sn-menu a em {
  font-style: normal;
  margin-left: auto;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--ink3, #666d69);
  flex: 0 0 auto;
}

.sn-mf {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line, #e0dbce);
  margin-top: 7px;
  padding: 8px 4px 2px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--ink3, #666d69);
}

.sn-mf a { height: auto; padding: 0; color: var(--jade-tx, #2c6a5b); font-weight: 600; font-size: 12.5px; }
.sn-mf a:hover { background: none; text-decoration: underline; }

/* 夜间：nav.css 的 var() 已带 fallback，但面板底色必须显式给，
   否则页面没定义 --card 时会变成白底深字 */
:root[data-night="1"] .sn-menu { background: #1c2320; border-color: #2b3a34; }
:root[data-night="1"] .sn-menu a { color: #b3bdb7; }
:root[data-night="1"] .sn-menu a:hover { background: #26302b; color: #e8eae6; }
:root[data-night="1"] .sn-menu a.on { background: #2b3a34; color: #e8eae6; }
:root[data-night="1"] .sn-lnks button:hover { background: #26302b; color: #e8eae6; }
:root[data-night="1"] .sn-lnks button.on,
:root[data-night="1"] .sn-lnks button[aria-expanded="true"] { background: #2b3a34; color: #e8eae6; }
:root[data-night="1"] .sn-area .cu { background: rgba(143, 208, 185, .14); color: #8fd0b9; }

/* —— 断点（必须留在文件末尾）—— */
@media (max-width: 900px) {
  .site-nav .sn-in { gap: 12px; }
  .site-nav .sn-lnks a { padding: 0 9px; font-size: 13px; }
}

@media (max-width: 720px) {
  /* 窄屏：链接条变成整条高的可滑动标签条，命中区等于导航条高度 */
  .site-nav .sn-in { height: 50px; gap: 8px; }
  .site-nav .sn-brand { font-size: 15px; gap: 7px; min-height: 44px; }
  .site-nav .sn-brand svg { flex-basis: 24px; width: 24px; height: 24px; }
  .site-nav .sn-brand em { display: none; }
  .site-nav .sn-lnks { gap: 0; height: 100%; }
  .site-nav .sn-lnks a {
    height: 100%;
    padding: 0 11px;
    border-radius: 0;
    font-size: 13px;
  }
  /* 六项在 390 宽放不下，靠横滑。右缘渐隐提示「后面还有」，
     否则最后一项被切一半，看着像布局坏了。 */
  .site-nav .sn-lnks {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  /* 已滚到最右，右边没有更多内容，渐隐会误伤当前项，取消掉 */
  .sn-lnks.at-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   底部菜单（移动端专用）
   ------------------------------------------------------------
   1. 只在 ≤720px 出现；桌面靠顶部导航，不重复给入口。
   2. 默认 display:none，避免桌面端白占 DOM 影响打印与选择器。
   3. 图标全部 stroke=currentColor，选中态只改颜色与线宽，不换图。
   4. 高度写死 56px，body 同步留出等高内边距，否则页脚最后一行被压在栏下。
   ============================================================ */

.mbn {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(247, 245, 240, .96);
  -webkit-backdrop-filter: saturate(170%) blur(12px);
  backdrop-filter: saturate(170%) blur(12px);
  border-top: 1px solid var(--line, #e0dbce);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mbn .mbn-in {
  display: flex;
  height: 56px;
  max-width: 560px;
  margin: 0 auto;
}

.mbn a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink2, #4a544f);
  text-decoration: none;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .2px;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s;
}

.mbn a svg {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 1.8;
}

.mbn a span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mbn a[aria-current="page"] {
  color: var(--jade-tx, #2c6a5b);
  font-weight: 700;
}

.mbn a[aria-current="page"] svg { stroke-width: 2.2; }

.mbn a:active { background: rgba(44, 106, 91, .09); }

.mbn a:focus-visible {
  outline: 2px solid var(--jade-tx, #2c6a5b);
  outline-offset: -3px;
}

/* 夜间：与顶部导航同一套底色，避免出现「上深下浅」的断层 */
:root[data-night="1"] .mbn {
  background: rgba(20, 26, 24, .96);
  border-top-color: #2a3530;
}
:root[data-night="1"] .mbn a { color: #a9b6b0; }
:root[data-night="1"] .mbn a[aria-current="page"] { color: #8fd0b9; }
:root[data-night="1"] .mbn a:active { background: rgba(143, 208, 185, .12); }
:root[data-night="1"] .mbn a:focus-visible { outline-color: #8fd0b9; }

/* —— 断点（必须留在文件末尾）—— */
@media (max-width: 720px) {
  /* 下拉在窄屏由 site.js 挂到 body 上并加 .mb —— 与设置面板同一个道理：
     .site-nav 的 backdrop-filter 是包含块，留在导航里定位会算成「相对导航条」，
     整块飞出屏幕。 */
  html .sn-menu.mb {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 68vh;
    overflow-y: auto;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    border-radius: 16px;
    z-index: 950;
    animation: mbn-up .18s cubic-bezier(.22, .8, .3, 1);
  }
  html .sn-menu.mb.one { grid-template-columns: 1fr; }
  html .sn-menu.mb .sn-mgl { padding-top: 8px; }
  .site-nav .sn-lnks button { height: 100%; padding: 0 9px; border-radius: 0; font-size: 13px; }
  .sn-area .cu { max-width: 4.6em; font-size: 10.5px; padding: 1px 4px; }

  /* 2026-11-02：390 宽塞不下「6 个主导航项 + 品牌 + 3 个图标」，
     实测把「配方库」挤成了半个「库」字（截图可见），像布局坏了。
     页面级入口全部由底部导航承担（首页/配方/器物/缺陷/文献/配釉/3D/验真），
     顶部只留两个下拉 + 工具图标；「区域专藏」缩成「专藏 · 德化」以保宽度。
     宽屏不受影响，≥721 仍显示完整主导航。 */
  html.js-nav .site-nav .sn-lnks a { display: none; }
  .site-nav .sn-in { gap: 6px; }
  .sn-area .lb { font-size: 0; }
  .sn-area .lb::after { content: '专藏'; font-size: 13px; }
  .site-nav .sn-acct span { display: none; }
  .site-nav .sn-acct { width: 42px; padding: 0; justify-content: center; }

  .mbn { display: block; }
  /* 60px = 底栏 56 + 4 余量，留余量是因为栏有 1px 上边框，
     只留 56 时页脚最后一行会紧贴甚至被压掉 1px。
     提升到 html body 才压得动页面内 body 的 padding 简写 */
  html body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }

  /* 设置面板：窄屏由 site.js 挂到 body 上并加 .mb。
     .site-nav 的 backdrop-filter 是包含块，留在导航里 fixed 会被算成
     「相对导航条」定位，整块飞出屏幕。挂 body 后才真正贴视口底。 */
  html .st-pop.mb {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: 74vh;
    overflow-y: auto;
    border-radius: 16px;
    z-index: 950;
    animation: mbn-up .18s cubic-bezier(.22, .8, .3, 1);
  }
}

/* 底部抽屉从下往上起，比默认的「从上往下」顺 */
@keyframes mbn-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media print {
  .mbn { display: none !important; }
  html body { padding-bottom: 0 !important; }
}