/* NEXUS — 导航：侧栏（rail）与底部 tabbar（S3-P0）
   ---------------------------------------------------------------------------
   同一份数据渲染两次，哪个可见由断点决定：
     桌面 / 横屏   .rail 可见（横屏收成图标条）
     竖屏 / 手机   .tabbar 可见
   状态只有一种：aria-current="page"。高亮不靠新颜色，靠已有的 accent-tint。
   --------------------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: calc(22px + var(--safe-top)) calc(14px + var(--safe-right)) 18px
    calc(14px + var(--safe-left));
  border-right: 1px solid var(--color-line-soft);
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 2px 10px 0;
}

.rail__wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 品牌字标在侧栏里回到界面尺度：沿用字距 token，只收字号 */
.rail .brand__name {
  font-size: var(--text-brand);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-brand);
  line-height: 1.2;
}

.rail .brand__tagline {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-cn);
  color: var(--color-text-faint);
}

/* ------------------------------------------------------------- 导航项 */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-cn);
  color: var(--color-text-mute);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.nav__item:hover,
.nav__item:focus-visible {
  color: var(--color-text);
  background: var(--control-hover);
}

/* 当前页：底色 + 文字回正，图标才染强调色 —— 浅色下也读得清 */
.nav__item[aria-current="page"] {
  color: var(--color-text);
  background: var(--accent-tint);
}

.nav__item[aria-current="page"] .nav__icon { color: var(--color-ice); }

.nav__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__icon svg { width: 18px; height: 18px; }

.nav__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------- 页脚 */
.rail__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding: 0 10px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-faint);
}

.rail__foot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-ice);

}

/* ------------------------------------------------------ 底部 tabbar */
.tabbar {
  align-items: center;
  justify-content: space-around;
  gap: 2px;
  padding: 6px calc(8px + var(--safe-right)) 4px calc(8px + var(--safe-left));
  border-top: 1px solid var(--color-panel-border);
  background: var(--color-panel-strong);
}

.tabbar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  border-radius: var(--radius-control);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-cn);
  color: var(--color-text-faint);
  transition: color var(--dur-fast) var(--ease-out);
}

.tabbar__item[aria-current="page"] { color: var(--color-text); }

.tabbar__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: currentColor;
}

.tabbar__icon svg { width: 20px; height: 20px; }

.tabbar__item[aria-current="page"] .tabbar__icon { color: var(--color-ice); }

/* ==================================================== 横屏：图标条 */
@media (max-width: 1179px) {
  .rail {
    align-items: center;
    padding: 18px 12px 14px;
  }

  .rail__brand { justify-content: center; padding: 0; }
  .rail__wordmark { display: none; }
  .nav { width: 100%; }

  .nav__item {
    justify-content: center;
    height: 40px;
    padding: 0;
  }

  .nav__label { display: none; }
  .nav__icon { width: 20px; height: 20px; }

  .rail__foot { justify-content: center; padding: 0; }
  .rail__foot-text { display: none; }
}