/* ============================================================
   ds-nav-v2.css · 导航与子页顶条（方案 A 定稿）
   ------------------------------------------------------------
   覆盖范围（只覆盖，不改既有文件）：
   1) 首页四个 Tab：极简文字 + 滑动短下划线
      覆盖 ds-shell.css:38-64（胶囊槽 / 白胶囊激活态 / content:none）
      覆盖 ds-gather-v2.css:37-39（只有 background、无 content 的下划线）
   2) 子页顶条：隐形顶条 + 顶部行龙纹带
      覆盖 ds-shell.css:145-179（半透明毛玻璃 / border-bottom 横线 / 胶囊按钮）
   引入位置：index.html 中 ds-refine-social.css 之后（最后引入，靠顺序取胜）
   本轮不改 DOM 契约、不改 data-* 属性、不改任何 .js、不动 --wine / tokens.css
   ============================================================ */

/* ---- 自带中国风变量（--cn-*）：浅色/深色两套，不污染既有体系 ---- */
:root {
  --cn-nav-ink: var(--ink, #302B29);                       /* 激活文字 */
  --cn-nav-muted: var(--muted, #8B827C);                   /* 未激活文字 */
  --cn-nav-accent: var(--brand, var(--wine, #773F45));     /* 下划线 / 分享 */
  --cn-nav-ring: color-mix(in srgb, var(--brand, var(--wine, #773F45)) 45%, transparent);
  --cn-nav-hover: color-mix(in srgb, var(--muted, #8B827C) 35%, var(--ink, #302B29));

  /* 行龙纹带（mask + background-color，外部 SVG 不继承 currentColor） */
  --cn-band-ink: #302B29;
  --cn-band-opacity: .22;
  --cn-band-height: 8px;
  --cn-band-inset: 10px;
}

/* 深色：底更沉，纹样更淡（浅色纹在深底上视觉增益约 2 倍，故 opacity 减半） */
html[data-theme="dark"] {
  --cn-nav-accent: var(--brand, var(--wine, #E8A34A));
  --cn-nav-ring: color-mix(in srgb, var(--brand, var(--wine, #E8A34A)) 55%, transparent);
  --cn-band-ink: #F0E2C8;
  --cn-band-opacity: .12;
}

/* ============================================================
   一、首页 Tab：极简文字 + 滑动短下划线
   ============================================================ */
.home-tabs {
  display: flex;
  align-items: stretch;
  margin: 0 var(--home-pad-x, 10px);
  padding: 4px 0 7px;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-tab {
  position: relative;          /* 下划线定位基准 */
  display: block;
  flex: 1 1 0;                 /* 四等分，文字居中，靠 gap:0 的紧凑排布 */
  min-width: 0;
  min-height: 0;
  padding: 5px 1px 9px;        /* 底部留出 9px 给下划线 */
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--cn-nav-muted);
  transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-tab:hover { color: var(--cn-nav-hover); background: none; box-shadow: none; }

.home-tab.active {
  background: none;
  box-shadow: none;
  color: var(--cn-nav-ink);
  font-weight: 650;
}

/* 短下划线：必须显式写 content:'' 才能覆盖 ds-shell.css:63 的 content:none */
.home-tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -9px;           /* 18px 宽居中 */
  bottom: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--cn-nav-accent);
  transform: scaleX(.4);
  transform-origin: center;
  opacity: 0;
  animation: cn-tab-underline .22s ease-out forwards;
}
@keyframes cn-tab-underline {
  from { transform: scaleX(.4); opacity: 0; }
  to   { transform: scaleX(1);  opacity: 1; }
}

/* 键盘可见反馈：用 ring，不用浏览器默认蓝框 */
.home-tab:focus-visible {
  outline: 2px solid var(--cn-nav-ring);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: none;
}

/* ============================================================
   二、子页顶条：隐形顶条 + 顶部回纹云头分隔带（替代原 1px 横线）
   ============================================================ */
.page-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 10px 0;
  background: transparent;                 /* 去掉半透明毛玻璃 */
  border: 0;
  border-bottom: 0;                        /* 去掉用户嫌的横线 */
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 分隔纹带：改用回纹云头分隔线 ornament-divider（160×14，专为水平分隔设计，可安全平铺）。
   注：pattern-dragon-running 是 240×80「整条行龙」，不可平铺 —— 在 7~8px 高时单幅仅约 21px 宽，
   repeat-x 会把一条龙切成碎片反复平铺，故顶条不再使用它（整龙只在 ≥48px 高、no-repeat 场合用）。 */
.page-topbar::after {
  content: '';
  position: absolute;
  left: var(--cn-band-inset);
  right: var(--cn-band-inset);
  bottom: 0;
  height: var(--cn-band-height);                 /* 8px */
  pointer-events: none;
  background-color: var(--cn-band-ink);
  opacity: var(--cn-band-opacity);               /* 浅 .22 / 深 .12，沿用 --cn-band-* */
  -webkit-mask-image: url("./assets/chinese/ornament-divider.svg");
  mask-image: url("./assets/chinese/ornament-divider.svg");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: 91px 8px;                   /* 160×14 等比缩放 → 91×8 */
  mask-size: 91px 8px;
}

/* ---- 返回键：无边框无背景 ---- */
.page-topbar .page-back,
.page-back {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--cn-nav-ink);
  font-weight: 600;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.page-topbar .page-back:hover,
.page-back:hover {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--cn-nav-accent);
}
.page-topbar .page-back:focus-visible,
.page-back:focus-visible {
  outline: 2px solid var(--cn-nav-ring);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: none;
}
.page-back-glyph {
  font-size: 20px;
  line-height: 20px;
  width: 20px;
  height: 20px;
}
.page-back-glyph svg,
.page-back-glyph img { width: 20px; height: 20px; display: block; }

/* ---- 分享键：无边框无背景，主色文字 ---- */
.page-topbar .page-share {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 2px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--cn-nav-accent);
  font-size: 13px;
  font-weight: 600;
}
.page-topbar .page-share:hover {
  background: none;
  color: var(--cn-nav-hover);
}
.page-topbar .page-share:focus-visible {
  outline: 2px solid var(--cn-nav-ring);
  outline-offset: 2px;
  border-radius: 8px;
  box-shadow: none;
}

/* ============================================================
   动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .home-tab,
  .page-back,
  .page-topbar .page-share { transition: none; }
  .home-tab.active::after {
    animation: none;
    transform: scaleX(1);
    opacity: 1;
  }
}