/* ==========================================================================
   底栏唯一真源 v3（2026-10-24）
   --------------------------------------------------------------------------
   为什么单独一个文件：底栏此前有 6 处定义 —— styles.css / ds-shell.css /
   ds-theme-dark.css / ds-a11y.css 的 button 体系（DOM 早已改成 <a>，全是死代码），
   以及 ds-cyber-v5.css 内部的 data-skin 4 列与 body[data-cyber-nav] 5 列两套。
   结果只有圈子页吃到皮肤作用域的 5 列样式，其余页面底栏实际无样式 → 四页不一致。
   本次：旧的全部删除，只留本文件。

   DOM 契约（app.js renderShell 生成，不得改）：
     <nav id="mobile-nav" class="mobile-nav">
       <a class="on?" data-nav="home|follow|album|me">点阵 svg + <span>标签</span></a>

   视觉：60 高 · 4 等分 · 点阵图标 18×18 · 标签 9px/字距 .1em
        选中态＝橙字 + 顶部 2px 橙方块串（与圈子页 Tabs 同一语言）
   ========================================================================== */

html.force-mobile .mobile-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: 60px;
  flex:0 0 auto;             /* 三段式布局里不可分割的一行（mobile-shell 测试钉住，勿加空格） */
  position: static;          /* 外壳内流式常驻，禁止 fixed / absolute */
  z-index: 15;
  padding: 8px 1px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--cs-line, rgba(255, 255, 255, .09));
  background: rgba(6, 6, 6, .92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  html.force-mobile .mobile-nav { background: #060606; }
}

html.force-mobile .mobile-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--ds-touch-target, 44px);   /* 热区 ≥44px（step13 测试钉住） */
  padding: 6px 2px;
  text-decoration: none;
  color: inherit;
}
html.force-mobile .mobile-nav a:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }

html.force-mobile .mobile-nav span {
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--cs-muted, #8A8A8A);
}
html.force-mobile .mobile-nav a.on span { color: var(--cs-accent, #FF4D00); }

/* 选中上边线：2px 橙方块串（4px 方块 / 4px 间隔），不用整条实线 */
html.force-mobile .mobile-nav a.on::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--cs-accent, #FF4D00) 0 4px, transparent 4px 8px);
}

@media (prefers-reduced-motion: reduce) {
  html.force-mobile .mobile-nav a { transition: none; }
}