/* ==========================================================================
   base/layout.css — 页面骨架
   比例与线上一致：内容宽 1180px · 左右留白 12px · 侧栏 296px
   糖果粗野：纯色面板 + 深色硬描边 + 实心硬影
   ========================================================================== */

#app {
  position: relative;
  /* 抬到粒子层（z-index 0）之上，保证环境粒子永远在内容底下 */
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 主内容容器（线上：min(calc(100% - 24px), 1180px)，margin 28px auto 70px） */
.view {
  flex: 1;
  width: min(calc(100% - 24px), var(--page-max));
  margin: 28px auto 70px;
  /* ⚠️ 填充模式必须是 backwards，不能用 both。
     both 会把结束帧永久保留，而结束帧的 transform 会被固化成
     matrix(1,0,0,1,0,0)（identity，但**不等于 none**）→ .view 于是成为
     position: fixed 的包含块。窄屏下的侧栏抽屉正是 fixed 定位，会被
     拽到 .view 的 padding box 里错位（实测 left 偏 8px、top 偏 180px）。
     backwards 只在动画开始前应用起始帧，结束后元素回到自身样式
     （transform: none），视觉完全一致但不再制造包含块。 */
  animation: fadeUp var(--t-slow) var(--ease-out) backwards;
}

/* 文档类板块：侧栏 + 内容双列（线上 gap 24px） */
.layout-a {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.sidebar-slot {
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  align-self: start;
}

.content-slot {
  min-width: 0;
  display: grid;
  gap: 22px;
}

/* 轻量板块单列（线上 gap 18px） */
.light-layout {
  display: grid;
  gap: 18px;
}

.companion-layout {
  display: grid;
  gap: 18px;
}

/* ==========================================================================
   区块标题条（线上原版的 .section-bar）
   颜色部分见 tokens.css；这里只负责几何：整条通到容器两侧、顶部不留白
   ========================================================================== */

/* 通到容器左右边缘（容器本身 padding 左右 = clamp(14px,4vw,28px)） */
.section-bar {
  width: calc(100% + clamp(28px, 8vw, 56px));
  margin: 0 calc(clamp(14px, 4vw, 28px) * -1) clamp(18px, 4vw, 26px);
  padding: 13px 18px;
}

/* 已经在窄容器里、左右没有 padding 的，用通栏版本 */
.section-bar.bar-full {
  width: 100%;
  margin: 0 0 clamp(18px, 4vw, 26px);
}

/* 承载 section-bar 的面板：顶部不留 padding，圆角裁切 */
.panel-barred {
  padding-top: 0;
  padding-left: clamp(14px, 4vw, 28px);
  padding-right: clamp(14px, 4vw, 28px);
  padding-bottom: clamp(18px, 4vw, 26px);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   页头（板块页 / 文档页）
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 0 0 18px;
  border-bottom: var(--stroke-thin) solid var(--ink);
}

.page-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

/* ⚠️ 以下 .page-head / .page-title / .page-count 只用于各板块"单子"页
   （陪陪展示 / 内容页 / 预存福利 / 礼物单…），主页不使用，
   所以这里的字号放大不会影响主页。 */
.page-title {
  font-size: clamp(30px, 6vw, 46px);
  font-weight: var(--fw-blackest);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  color: var(--ink);
}

.page-count {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wide);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-bottom: 4px;
}

.page-count strong {
  font-size: 26px;
  color: var(--accent);
  font-weight: var(--fw-blackest);
  padding: 0 2px;
}

/* --------------------------------------------------------------------------
   区块标题（居中，尺寸对齐线上 section-bar h2 = clamp(20px, 4.5vw, 28px)）
   -------------------------------------------------------------------------- */

.block-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 24px;
  text-align: center;
}

.block-title {
  font-size: clamp(22px, 4.8vw, 31px);
  font-weight: var(--fw-blackest);
  letter-spacing: var(--ls-wide);
  line-height: 1.2;
  color: var(--ink);
}

.block-sub {
  color: var(--muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  max-width: 48ch;
}

.block-head.is-left {
  justify-items: start;
  text-align: left;
}

/* --------------------------------------------------------------------------
   底部
   -------------------------------------------------------------------------- */

.site-foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: var(--stroke-thin) solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--muted);
}

.foot-mark {
  font-size: var(--fs-micro);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--faint);
}

/* --------------------------------------------------------------------------
   空状态
   -------------------------------------------------------------------------- */

.empty {
  padding: 20px;
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  background: var(--panel-flat);
  border: var(--stroke) dashed var(--ink-3);
  box-shadow: var(--hard-sm);
}

.empty-dot {
  display: none;
}

.hidden {
  display: none !important;
}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .layout-a {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 侧栏在窄屏改成左侧抽屉（见 components/sidebar.css），
     它是 fixed 定位、脱离文档流，所以 .sidebar-slot 自然不再占位。 */
  .sidebar-slot {
    position: static;
  }

  /* 双保险：窄屏下把入场动画的位移动画彻底禁掉。
     author 的 !important 声明优先级高于 CSS 动画，能确保 .view 的
     computed transform 恒为 none —— 抽屉（fixed）不会因祖先带 transform
     而错位。手机上少一点位移观感，换来定位绝对可靠。 */
  .view {
    transform: none !important;
  }
}

@media (max-width: 620px) {
  .view {
    width: calc(100% - 16px);
    margin-top: 18px;
  }

  .page-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .content-slot,
  .light-layout {
    gap: 16px;
  }

  .block-head {
    margin-bottom: 18px;
  }
}

/* --------------------------------------------------------------------------
   阅读进度条（由 motion.js 注入）—— 糖果六色实心条 + ink 下边
   -------------------------------------------------------------------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 5px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    var(--candy-pink) 0%,
    var(--candy-orange) 28%,
    var(--candy-yellow) 48%,
    var(--candy-mint) 68%,
    var(--candy-blue) 84%,
    var(--candy-purple) 100%
  );
  border-bottom: var(--stroke-thin) solid var(--ink);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   返回顶部（由 motion.js 注入）—— 糖果圆钮（粗野版）
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 22px;
  font-weight: var(--fw-blackest);
  line-height: 1;
  color: var(--ink);
  background: var(--candy-pink);
  border: var(--stroke-thin) solid var(--ink);
  border-radius: 50%;
  box-shadow: var(--hard);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.9);
  cursor: pointer;
  transition:
    opacity var(--t-base) var(--ease),
    visibility var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-pop),
    box-shadow var(--t-base) var(--ease-pop),
    background-color var(--t-fast) var(--ease);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: var(--candy-yellow);
  transform: translate(-2px, -2px) scale(1.04);
  box-shadow: var(--hard-hover);
}

.back-to-top:active {
  transform: var(--press-flat);
  box-shadow: var(--hard-none);
}

@media (max-width: 620px) {
  .back-to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}