/* pages.css — 小多绘本 V2 页面级布局
 * 仅引用 tokens.css / components.css 变量，禁止硬编码颜色。
 */

/* ================= 通用视图容器 ================= */
.view { min-height: 100vh; }
.view-body { padding-bottom: calc(var(--footer-h) + var(--safe-bottom) + 24px); }

/* ================= 极简头部（书架） ================= */
.shelf-head {
  position: relative;
  padding: calc(var(--safe-top) + var(--sp-5)) var(--sp-5) var(--sp-2);
}
.shelf-head h1 {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: 800;
  line-height: var(--lh-tight);
}
.shelf-head h1 b { color: var(--coral); }
.shelf-head .sh-sub { margin-top: 4px; color: var(--muted); font-size: var(--fs-tiny); }
.sh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.sh-dino { flex: 0 0 auto; animation: dino-bob 3s ease-in-out infinite; margin-top: -6px; }
@keyframes dino-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.sh-stats { display: flex; gap: 10px; margin-top: 14px; }
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-flat);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--ink);
}
.stat-chip .s-ico { font-size: 15px; }
.stat-chip .s-num { color: var(--coral); font-weight: 800; }

/* ================= 集合分区 ================= */
.col-sec { margin-top: var(--sp-3); }
.sec-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: 800;
  color: var(--ink);
}
.sec-title .sec-emoji { font-size: 0.9em; }
.sec-title .sec-count { font-size: var(--fs-tiny); color: var(--muted); font-family: var(--font-body); font-weight: 600; }

/* ================= 继续阅读 · 横滚 ================= */
.book-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px var(--sp-5) var(--sp-3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.book-rail::-webkit-scrollbar { display: none; }
.rail-end {
  flex: 0 0 26px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.55;
}

/* ================= 海报墙网格 ================= */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  padding: 4px var(--sp-5) var(--sp-3);
}
.poster-card { min-width: 0; cursor: pointer; }
.poster-card:active { transform: var(--press-scale); }
.pc-cover {
  position: relative;
  border-radius: var(--radius-sm);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.pc-cover img,
.pc-cover .bc-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pc-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
  box-shadow: var(--shadow-flat);
}
.pc-badge.done { color: var(--leaf); }
.pc-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: 6px;
  padding: 0 2px;
}
.pc-title {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-num { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-weight: 600; }

/* ================= 读完的绘本 · 小封面网格 ================= */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 12px;
  padding: 4px var(--sp-5) var(--sp-3);
}
.mini-card { min-width: 0; cursor: pointer; }
.mini-card:active { transform: var(--press-scale); }
.mini-cover {
  position: relative;
  border-radius: var(--radius-sm);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--card);
}
.mini-cover img,
.mini-cover .bc-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-meta { margin-top: 5px; padding: 0 2px; }
.mini-title {
  font-family: var(--font-display);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.mini-perfect { color: var(--leaf); font-weight: 800; }

/* ================= 占位页（词汇/听力/我的） ================= */
.placeholder-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: var(--sp-6);
  color: var(--muted);
}
.placeholder-view .pv-dino { animation: dino-bob 3s ease-in-out infinite; }
.placeholder-view h2 { font-family: var(--font-display); color: var(--ink); font-size: var(--fs-title); }
.placeholder-view p { font-size: var(--fs-small); max-width: 300px; line-height: var(--lh-body); }