/* 卷舒 — 页面外框（首页与各级列表页共用）
   页面四边 --page-margin，1px 朱丝描边，右侧 --spine-width 书脊。
   颜色、间距、字号一律用 type.css 的 token。 */

/* ── 页面 ───────────────────────────────────────────── */
body {
  box-sizing: border-box;
  padding: var(--page-margin);
}

.home {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 100%;
  border: var(--rule-width) solid var(--rule-color);
  overflow: hidden;
}

/* ── 书脊 ───────────────────────────────────────────── */
/* 卷舒 / 短线 / 中華典籍匯刻，整组垂直居中 */
.spine {
  flex: 0 0 var(--spine-width);
  box-sizing: border-box;
  width: var(--spine-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: var(--rule-width) solid var(--rule-color);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1;
}

.spine-name {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: var(--size-title);
  letter-spacing: 0.2em;
}

.spine-rule {
  width: var(--rule-tick);
  height: var(--rule-width);
  margin: var(--space-s) 0;
  background: var(--rule-color);
}

.spine-sub {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-size: var(--size-note);
  letter-spacing: 0.25em;
}


/* ── 视图容器 ───────────────────────────────────────── */
/* 壳常驻：外框与书脊不动，只有 #view 的内容换 */
#view {
  flex: 1;
  display: flex;
  min-width: 0;
  overflow: hidden;
  view-transition-name: view;
}

/* ── 转场 ───────────────────────────────────────────── */
/* 只动 transform / opacity；方向服从阅读方向：深入一级自右向左推进 */
::view-transition-old(view),
::view-transition-new(view) {
  animation-duration: var(--dur-base);
  animation-timing-function: var(--ease-out);
  mix-blend-mode: normal;
}

html[data-vt="in"]::view-transition-new(view) {
  animation-name: vt-in-new;
}

html[data-vt="in"]::view-transition-old(view) {
  animation-name: vt-in-old;
}

html[data-vt="back"]::view-transition-new(view) {
  animation-name: vt-back-new;
}

html[data-vt="back"]::view-transition-old(view) {
  animation-name: vt-back-old;
}

@keyframes vt-in-new {
  from { transform: translateX(40px); opacity: 0.4; }
}

@keyframes vt-in-old {
  to { transform: translateX(-40px); opacity: 0; }
}

@keyframes vt-back-new {
  from { transform: translateX(-40px); opacity: 0.4; }
}

@keyframes vt-back-old {
  to { transform: translateX(40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(view),
  ::view-transition-new(view) {
    animation: none;
  }
}