/* \u8bf4\u660e\uff1a\u9876\u680f\u91c7\u7528\u73bb\u7483\u62df\u6001\u80cc\u666f\uff0c\u914d\u5408\u6a21\u7cca\u4e0e\u63cf\u8fb9\u4fdd\u6301\u5c42\u6b21\u611f\u3002 */
.app-header {
  /* 说明：顶栏吸顶，滚动页面时保持可见（不随内容一起滚走）。 */
  position: sticky;
  top: 0;
  z-index: 240;
  /* 说明：表面质感由 .app-glass/.app-card 提供，这里只做“顶栏语义”的必要覆盖。
   * - 顶栏不需要四边框与圆角；仅保留底边分隔线。
   */
  --app-glass-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--app-glass-border-color);
}

.app-bar {
  margin: 0 auto;
  padding: 1rem 1.5rem;
  max-width: 72rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.app-title {
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: 600;
  letter-spacing: 0.01em;
  /* 说明：允许标题在 flex 容器中收缩，配合移动端省略号避免挤压按钮。 */
  min-width: 0;
}

.app-title--accent {
  color: var(--md-sys-color-on-surface);
}

/* 说明：移动端右侧菜单按钮（桌面端隐藏），用于展开全屏菜单面板。 */
.app-mobile-menu__toggle {
  display: none;
  --app-icon-button-color: var(--md-sys-color-on-surface);
  --app-icon-button-hover-color: var(--md-sys-color-primary);
}

/* 说明：顶栏右侧操作区容器，包裹搜索按钮 + 移动端菜单按钮。 */
.app-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* 说明：搜索入口按钮，始终可见于顶栏最右侧。
 * 样式与移动端菜单按钮一致（图标按钮、无背景、圆角胶囊形），便于视觉统一。 */
.app-search__toggle {
  --app-icon-button-color: var(--md-sys-color-on-surface);
  --app-icon-button-hover-color: var(--md-sys-color-primary);
  --app-icon-button-hover-bg: var(--md-sys-color-surface-container-highest);
}

/* \u8bf4\u660e\uff1a\u5bfc\u822a\u6761\u540c\u6b65\u73bb\u7483\u5e95\u8272\uff0c\u786e\u4fdd\u4eae/\u6697\u6a21\u5f0f\u90fd\u6709\u67d4\u548c\u5bf9\u6bd4\u3002 */
.app-nav {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  /* 说明：将导航菜单推到顶栏右侧，标题居左，actions 紧挨其后。 */
  margin-inline-start: auto;
  padding: 0.35rem 0.5rem;
  /* 说明：表面质感由 .app-glass/.app-card 提供；导航条为胶囊形圆角。 */
  --app-glass-radius: var(--app-radius-pill);
}

.app-nav__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: var(--app-radius-pill);
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  line-height: var(--md-sys-typescale-label-large-line-height);
  /* 说明：导航项同时可能是 <a>/<button>，显式指定字重避免表单控件默认字重与链接不一致。 */
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.app-nav__item:hover,
.app-nav__item:focus-visible {
  background-color: var(--md-sys-color-primary-container);
  border-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.app-nav__item.is-active {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

/* 说明：Pages 下拉面板容器，使用相对定位承载弹层。 */
.app-nav__item-wrapper {
  position: relative;
  display: inline-flex;
}

/* 说明：将按钮样式对齐导航链接，避免浏览器默认按钮外观干扰。 */
.app-nav__item--toggle {
  font-family: inherit;
  cursor: pointer;
}

/* 说明：Pages 弹出面板使用更“厚实”的亚克力表面，避免在浅色/高对比背景下显得过于通透。 */
.app-nav__panel {
  /* 说明：弹层以 fixed “portal” 方式展示到 header 之外，避免 backdrop-filter 的 backdrop root 裁剪导致无模糊。 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  min-inline-size: 8rem;
  /* 说明：限制弹层高度并允许内部滚动，避免内容过长时被视口底部裁切。 */
  max-block-size: min(70vh, 24rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.65rem;
  /* 说明：表面质感由 .app-glass/.app-card 提供；圆角走全局 token。 */
  --app-glass-radius: var(--app-radius-panel);
  --app-card-shadow: var(--md-sys-elevation-level2);
  /* 说明：为动画保持元素可测量（避免 display: none 导致无法获取尺寸），用 opacity/visibility 控制显隐。 */
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.98);
  transform-origin: top center;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 0s linear 160ms;
}

.app-nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.2, 0, 0, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .app-nav__panel {
    /* 说明：尊重系统“减少动态效果”设置，避免不适。 */
    transition: none;
    transform: none;
  }
}

.app-nav__panel-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* 说明：弹层内条目文本居中对齐，适合“菜单面板”类场景。 */
  align-items: center;
}

.app-nav__panel-item {
  padding: 0.55rem 0.75rem;
  border-radius: var(--app-radius-section);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  /* 说明：确保链接文本在自身区域内居中。 */
  text-align: center;
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-nav__panel-item:hover,
.app-nav__panel-item:focus-visible {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* 说明：空状态提示使用次要文字色，保持信息层级。 */
.app-nav__panel-empty {
  margin: 0;
  padding: 0.55rem 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
  /* 说明：空状态文案与菜单条目一致，保持居中。 */
  text-align: center;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

/* 说明：移动端全屏菜单面板，由 mobile-menu.js 控制 .is-open，并在打开时锁定页面滚动。 */
:root[data-mobile-menu-open="true"],
:root[data-mobile-menu-open="true"] body {
  overflow: hidden;
}

.app-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  /* 说明：面板本体不再内缩；内边距交由 header/nav 各自控制，确保顶栏背景可覆盖全宽。 */
  gap: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 说明：全屏覆盖不使用圆角，避免露出页面角落。 */
  --app-glass-radius: 0;
  /* 说明：全屏模糊成本较高，适当降低强度以平衡性能与质感。 */
  --app-glass-blur: calc(var(--app-glass-blur-radius) * 0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 0s linear 180ms;
}

.app-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 200ms ease,
    transform 200ms cubic-bezier(0.2, 0, 0, 1),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .app-mobile-menu {
    /* 说明：尊重系统“减少动态效果”设置，避免不适。 */
    transition: none;
    transform: none;
  }
}

@media (min-width: 48rem) {
  /* 说明：桌面端不展示全屏菜单，避免与顶栏导航重复。 */
  .app-mobile-menu {
    display: none;
  }
}

.app-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* 说明：移动端全屏菜单展开后，标题与关闭按钮以“顶栏”形式固定，滚动时不消失。 */
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block-start: calc(env(safe-area-inset-top, 0px) + 1rem);
  padding-block-end: 0.75rem;
  padding-inline:
    calc(env(safe-area-inset-left, 0px) + 1rem)
    calc(env(safe-area-inset-right, 0px) + 1rem);
  background-color: var(--app-glass-bg-color);
  -webkit-backdrop-filter: blur(var(--app-glass-blur));
  backdrop-filter: blur(var(--app-glass-blur));
  border-bottom: 1px solid var(--app-glass-border-color);
}

.app-mobile-menu__title {
  margin: 0;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: 600;
}

.app-mobile-menu__close {
  --app-icon-button-hover-color: var(--md-sys-color-primary);
}

.app-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block-start: 1rem;
  padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  padding-inline:
    calc(env(safe-area-inset-left, 0px) + 1rem)
    calc(env(safe-area-inset-right, 0px) + 1rem);
}

/* 说明：Pages 分组（顶部是 /pages/ 列表页入口，下方默认展开全部页面链接）。 */
.app-mobile-menu__pages {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-mobile-menu__pages-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-inline-start: 0.5rem;
}

.app-mobile-menu__subitem {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.7rem 0.85rem;
  border-radius: var(--app-radius-pill);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-mobile-menu__subitem:hover,
.app-mobile-menu__subitem:focus-visible {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  text-decoration: none;
}

.app-mobile-menu__subitem.is-active {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.app-mobile-menu__subempty {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: var(--app-radius-pill);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
}

.app-mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.9rem 1rem;
  /* 说明：条目表面由 .app-glass 提供；这里仅指定为胶囊圆角。 */
  --app-glass-radius: var(--app-radius-pill);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.app-mobile-menu__item:hover,
.app-mobile-menu__item:focus-visible {
  border-color: var(--md-sys-color-outline-variant);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  text-decoration: none;
}

.app-mobile-menu__item.is-active {
  border-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

@media (max-width: 48rem) {
  /* 说明：移动端顶栏仅保留站点名称 + 菜单按钮，导航入口改为全屏菜单。 */
  .app-bar {
    padding: 0.85rem 1rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  .app-title {
    font-size: var(--md-sys-typescale-title-large-size);
    line-height: var(--md-sys-typescale-title-large-line-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-nav {
    display: none;
  }

  .app-mobile-menu__toggle {
    display: inline-flex;
  }
}