/* ============================================================================
   布局层 —— 顶栏 / 侧栏 / 正文 / 页脚
   ----------------------------------------------------------------------------
   只负责"骨架怎么摆"，不管组件长什么样（卡片、树、时间轴等在后面的文件里）。
   栅格用 minmax(0,1fr) 而不是 1fr —— 防止长内容把栅格撑破。
   ============================================================================ */

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--topbar-h);
  padding-inline: var(--sp-6);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--glass-line);
}

.topbar__brand { flex: 0 0 auto; }

.brand {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--text);
  white-space: nowrap;
}
.brand:hover { color: var(--accent-hover); text-decoration: none; }

/* 模块导航：横向，窄屏可滑动，滚动条隐藏 */
.topbar__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }

.navlink {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);              /* 图标与文字之间 */
  height: 32px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-3);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.navlink:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

/* 导航图标：描边跟着文字颜色走，默认略淡，悬停/选中时变实 */
.navlink__icon {
  flex: 0 0 auto;
  opacity: 0.65;
  transition: opacity var(--t-fast) var(--ease);
}
.navlink:hover .navlink__icon { opacity: 1; }

/* 当前所在模块 */
.navlink[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent-hover);
  font-weight: var(--fw-medium);
}
.navlink[aria-current="page"] .navlink__icon { opacity: 1; }

/* 内容模块与工具模块之间的分隔线 */
.nav-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin-inline: var(--sp-2);
  background: var(--line);
}

.topbar__tools { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); }

/* 图标按钮（顶栏里的工具按钮） */
.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 32px;
  min-width: 32px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  background: transparent;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); }

/* ---------- 主体 ---------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--sp-6);
}

.sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-6));
  max-height: calc(100dvh - var(--topbar-h) - var(--sp-12));
  overflow: auto;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* 侧栏整体去掉（没有目录的模块）：内容占满整行 */
.sidebar[hidden] { display: none; }
.shell--noside { grid-template-columns: minmax(0, 1fr); }

.sidebar__title {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wider);
  color: var(--text-4);
  margin-bottom: var(--sp-3);
}

.main { min-width: 0; }
/* main 用 tabindex="-1" 接收路由切换后的焦点，但不要画焦点框 */
.main:focus { outline: none; }

/* ---------- 页面头 ---------- */
.pagehead { margin-bottom: var(--sp-6); }
.pagehead__title {
  font-family: var(--font-ui);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}
.pagehead__desc { color: var(--text-3); font-size: var(--fs-md); max-width: var(--read-w); }

/* ---------- 未实现状态 ---------- */
.stub {
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
  border: 1px dashed var(--ph-line);
  border-radius: var(--r-lg);
  background: var(--ph-bg);
}
.stub__title { font-family: var(--font-ui); font-size: var(--fs-xl); font-weight: var(--fw-medium); margin-bottom: var(--sp-2); }
.stub__desc { color: var(--text-3); font-size: var(--fs-sm); }

/* ---------- 页脚 ---------- */
.footer {
  max-width: var(--page-max);
  margin: var(--sp-16) auto 0;
  padding: var(--sp-8) var(--sp-6) var(--sp-16);
  border-top: 1px solid var(--line);
  color: var(--text-4);
  font-size: var(--fs-sm);
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  /* 窄屏先直接隐藏侧栏。
     TODO(第15步)：改成可展开的抽屉，带一个汉堡按钮。 */
  .sidebar { display: none; }

  .topbar { padding-inline: var(--sp-4); gap: var(--sp-3); }
  .shell  { padding: var(--sp-4); gap: var(--sp-4); }
  .pagehead__title { font-size: var(--fs-2xl); }
}

/* ---------- 收起/展开侧栏 ---------- */
.topbar__sbtoggle { flex: 0 0 auto; }

/* 收起态：侧栏消失，正文占满 */
body.sidebar-collapsed .sidebar { display: none; }
body.sidebar-collapsed .shell { grid-template-columns: minmax(0, 1fr); }
body.sidebar-collapsed .topbar__sbtoggle {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* 窄屏下侧栏本来就是隐藏的，收起按钮不显示 */
@media (max-width: 960px) {
  .topbar__sbtoggle { display: none; }
}