/* 卷舒 — 类列表页（/jing 等）
   沿用首页的格子语言：每类一格、格间界行、内容居中，
   自上而下是 类名 → 短分割线 → 书数。 */

.classes {
  flex: 1;
  display: flex;
  /* 右起：数据倒序渲染 + 初始滚到最右，避免 row-reverse 的溢出不可滚动 */
  flex-direction: row;
  /* 不用 justify-content：溢出时会把内容推到左侧不可滚动的区域。
     改用首格 margin-left:auto——有富余时贴右，溢出时自动失效、可正常滚动。 */
  align-items: stretch;
  min-width: 0;
  /* 窄屏放不下时横向滚动，和阅读方向一致；宽屏不会溢出 */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.classes::-webkit-scrollbar {
  display: none;
}

.klass {
  /* 宽度 = ³√计数 × 单位宽；单位宽由视图按容器实测后写入 --unit */
  flex: 0 0 auto;
  width: calc(var(--w, 1) * var(--unit, 32px));
  min-width: var(--klass-min);
  max-width: var(--klass-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: var(--space-xxl) 0;
  box-sizing: border-box;
  container-type: size;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* 格与格之间的界行：数据倒序渲染后，最右一格是 DOM 末项，
   所以除 DOM 首项（最左）之外的每格左边一条线 */
/* 内容不满一屏时整排贴右 */
.classes .klass:first-child {
  margin-left: auto;
}

.klass:not(:first-child) {
  border-left: var(--rule-width) solid var(--rule-color);
}

/* 内容不满一屏时，最左一格补一条左界行，让格子的起点有边界 */
.classes.is-inset .klass:first-child {
  border-left: var(--rule-width) solid var(--rule-color);
}

.klass-name {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  /* 名字不能被 flex 压缩，否则四字类名会折成两列 */
  flex: 0 0 auto;
  font-size: var(--size-title);
  letter-spacing: var(--track-tight);
}

/* 类名下的短分割线，与首页同一规格 */
.klass-rule {
  width: var(--rule-klass);
  height: var(--rule-width);
  margin: var(--space-m) 0 0;
  background: var(--rule-color);
}

.klass-intro {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  /* 吃掉中间剩余高度，字数多时自动分列（列向左排） */
  flex: 1 1 auto;
  min-height: 0;
  margin-top: var(--space-m);
  font-size: var(--size-note);
  letter-spacing: var(--track-tight);
  line-height: 1.8;
}

.klass-count {
  writing-mode: vertical-rl;
  flex: 0 0 auto;
  -webkit-writing-mode: vertical-rl;
  /* 竖排里数字默认横躺，这里立起来 */
  text-orientation: upright;
  font-size: var(--size-count);
  letter-spacing: var(--track);
  /* 贴格子底部对齐 */
  margin-top: auto;
}

.klass:hover,
.klass:focus-visible,
.klass:active {
  color: var(--accent);
  outline: none;
}

/* 窄屏：按比例分太挤，回退等宽 */
@media (max-width: 900px) {
  .klass {
    flex: 1 1 0;
  }
}

/* 书脊：部名在上、返回箭头在下 */
.spine--nav {
  /* 内边距交给整条链接 */
  padding: 0;
}

/* 整条书脊可点：标题顶对齐、箭头底对齐都在链接内部完成 */
.spine-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--space-xxl) 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.spine-link:hover,
.spine-link:focus-visible {
  color: var(--accent);
  outline: none;
}

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

.spine-back {
  display: block;
  width: var(--icon-back);
  height: var(--icon-back);
  /* 颜色跟随整条书脊链接，hover 时一起变朱 */
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.spine-back svg {
  display: block;
  width: 100%;
  height: 100%;
}



/* 书格：作者朝代与篇数 */
.klass-meta {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  margin-top: var(--space-m);
  font-size: var(--size-note);
  letter-spacing: var(--track-tight);
}

.klass-pieces {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  margin-top: auto;
  font-size: var(--size-count);
  letter-spacing: var(--track);
}

/* 书格同样按 ³√篇数分宽，从右往左排 */
/* 书脊底部：返回 */
.spine-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
}

/* 篇目：一篇一列，宽度对齐界行 */
.classes--pieces .klass {
  width: var(--piece-w);
  min-width: var(--piece-w);
}

.spine-back-label {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-family: var(--font);
  font-size: var(--size-count);
  letter-spacing: var(--track);
  /* 同上：继承书脊链接的颜色 */
}

/* 书脊底部：全站统计 */
.spine-total {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-family: var(--font);
  font-size: var(--size-count);
  letter-spacing: var(--track);
  color: var(--ink);
}