/* ==========================================================================
   layout.css — 页面骨架布局
   适用范围：全站所有页面（页头、主内容容器、页脚、返回顶部、调试角标）
   加载顺序：base.css 之后、components.css 之前
   布局策略：手机优先；≥768px 舒展内边距；容器最大宽度 960px
   ========================================================================== */

/* --------------------------------------------------------------------------
   容器：统一最大宽度与左右留白
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 960px;            /* 旧浏览器回退值 */
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;         /* 逻辑属性：仅新浏览器生效 */
  padding-left: 16px;
  padding-right: 16px;
}

/* --------------------------------------------------------------------------
   页头：粘性置顶，保证动画开关与站名随时可达
   旧浏览器不支持 sticky 时自动退化为普通文档流，不影响使用
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #ffffff;
  background: var(--color-surface);
  border-bottom: 1px solid #e2e6eb;
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  gap: var(--space-3);
  min-height: 60px;
  min-height: var(--header-height);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #111827;
  color: var(--color-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.site-brand:hover {
  color: #1d4ed8;
  color: var(--color-primary);
}

/* 页头右侧工具区：页面导航 + 动画开关 + 刷新按钮 */
.site-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
  gap: var(--space-3);
}

/* 页面导航：当前页高亮；窄屏换行到第二行（见下方媒体查询） */
.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav__link {
  padding: 6px 10px;
  border-radius: 6px;
  border-radius: var(--radius-sm);
  color: #5b6675;
  color: var(--color-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
  transition: background-color var(--motion-fast) var(--easing-standard),
    color var(--motion-fast) var(--easing-standard);
}
.site-nav__link:hover {
  background: #f8fafc;
  background: var(--color-surface-2);
  color: #1f2937;
  color: var(--color-text);
}
.site-nav__link[aria-current="page"] {
  color: #111827;
  color: var(--color-heading);
  font-weight: 600;
}
/* 窄屏：页头换为两行（品牌 + 工具按钮 / 导航），保证导航入口在手机端仍可用 */
@media (max-width: 640px) {
  .site-header__inner {
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .site-header__tools {
    display: contents; /* 导航与开关直接参与页头换行布局 */
  }
  .anim-toggle {
    margin-left: auto; /* 动画与刷新按钮保持相邻、整组靠右（与桌面端一致） */
  }
  .site-nav {
    order: 2;
    width: 100%;
    justify-content: flex-end;
  }
  .site-nav__link {
    padding: 4px 8px;
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   主内容区
   -------------------------------------------------------------------------- */
.site-main {
  padding-top: 24px;
  padding-top: var(--space-5);
  padding-bottom: 64px;
  /* 页脚贴底：内容不足一屏时由 main 撑满剩余高度 */
  flex: 1 0 auto;
  min-height: 60vh; /* 内容较少时避免页脚上浮，视觉稳定 */
}

/* 页面标题行：标题 + 右侧操作 */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.page-head__title {
  margin: 0;
}

/* --------------------------------------------------------------------------
   页脚
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid #e2e6eb;
  border-top: 1px solid var(--color-border);
  background: #ffffff;
  background: var(--color-surface);
  padding: 20px 0;
  /* 刘海屏安全区：不支持 env() 的环境忽略本行，保留上面的 padding */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  color: #5b6675;
  color: var(--color-muted);
  font-size: 0.875rem;
  font-size: var(--text-sm);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
}

/* 页脚单行说明（链接已移除，居中呈现） */
.site-footer__note {
  margin: 0;
}

/* --------------------------------------------------------------------------
   返回顶部按钮：滚动一定距离后出现（显隐由 JS 加 .is-visible 控制）
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e2e6eb;
  border: 1px solid var(--color-border);
  background: #ffffff;
  background: var(--color-surface);
  color: #1f2937;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms;
  transition: opacity var(--motion-base) var(--easing-standard),
    visibility var(--motion-base);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
/* 箭头图形用纯 CSS 画（无图标库、无外部资源） */
.back-to-top::after {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}

/* --------------------------------------------------------------------------
   动画调试角标（仅 ?animdebug=1 时由 JS 显示）
   -------------------------------------------------------------------------- */
.debug-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  max-width: 60vw;
  padding: 4px 10px;
  border-radius: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid #e2e6eb;
  border: 1px solid var(--color-border);
  background: #f8fafc;
  background: var(--color-surface-2);
  color: #5b6675;
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   断点：≥768px 增加留白，标题放大
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .site-main {
    padding-top: 32px;
    padding-bottom: 72px;
  }
  h1,
  .page-head__title {
    font-size: 1.625rem;
    font-size: var(--text-2xl);
  }
}

/* 大屏时调试角标稍大一点，避免阅读困难 */
@media (min-width: 1024px) {
  .debug-badge {
    font-size: 0.8125rem;
  }
}