/* 卷舒 — 版式
   只消费 measure.js / render.js 写入的 CSS 变量。
   竖线与封口横线都是 .strip 的背景，不是逐格生成的 DOM。

   基础层：页面只有横向一个滚动轴。html/body 必须吃掉 UA 的 8px margin
   并锁死高度，否则文档比视口高 16px，整页会上下滚。 */

@font-face {
  font-family: 'NanoOldSong';
  /* 全字库直接上：NanoOldSongA 42,743 字，不做子集。本地由 dev.js 映射到 ../Fonts */
  src: url('fonts/NanoOldSongA-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --font: 'NanoOldSong', serif;

  /* 唯一 token 来源，见 DESIGN.md */
  --paper: #f1f0e7;
  --ink: #1a1917;
  --rule-width: 1px;
  --rule-color: rgba(170, 52, 44, 0.40);
  --accent: #aa342c;

  /* 间距阶：只有这五档，见 DESIGN.md */
  --space-xs: 12px;
  --space-s: 20px;
  --space-m: 32px;
  --space-l: 40px;
  --space-xl: 48px;
  --space-xxl: 80px;
  --page-margin: 64px;

  /* 部件尺寸 */
  --spine-width: 96px;
  --rule-short: 40px;
  --rule-klass: 32px;
  --rule-tick: 24px;
  --klass-min: 48px;
  --klass-max: 50%;
  --piece-w: 64px;
  --icon-back: 32px;

  /* 字距三档 */
  --track-tight: 0.05em;
  --track: 0.1em;
  --track-loose: 0.2em;
  --icon-size: 40px;

  /* 字号阶：四档，见 DESIGN.md */
  --size-display: 64px;
  --size-title: 32px;
  --size-body: 20px;
  --size-note: 14px;
  --size-count: 16px;

  /* 动效：时长与曲线只有这一套 */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

/* 阅读窗：竖排、右起、唯一滚动轴是横向。
   writing-mode 必须挂在这个滚动容器上——挂到外层会丢掉右起原点。 */
#leaf {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#leaf::-webkit-scrollbar {
  display: none;
}

/* 占位条：宽 = 列数 × 64 + 左右各 36，高 = 格子高（由 render.js 写入）。
   格子是线的结果：竖线按 64px 重复，顶底横线连住首尾两条竖线。 */
.strip {
  position: relative;
  box-sizing: border-box;
  background-image: linear-gradient(to left, var(--rule-color) 0 var(--rule-width), transparent var(--rule-width));
  background-size: var(--cell-w) 100%;
  background-repeat: repeat-x;
  background-position: right var(--gap) top;
}

.strip::before {
  content: '';
  position: absolute;
  top: 0;
  right: var(--gap);
  left: calc(var(--gap) - 1px);
  height: var(--rule-width);
  background: var(--rule-color);
}

.strip::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: var(--gap);
  left: calc(var(--gap) - 1px);
  height: var(--rule-width);
  background: var(--rule-color);
}

/* 一列 = 一个行槽，宽 64px。只挂可见窗口的列。 */
.col {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  color: var(--ink);
}

/* 文字从顶部 var(--text-inset) = 64px 起排，底部留 64px；
   width = line-height = var(--sub-w) = 64px，浏览器把字形水平居中。
   white-space: pre 保证不折行不裁切。 */
.ink {
  position: absolute;
  top: var(--text-inset);
  right: 0;
  box-sizing: border-box;
  width: var(--sub-w);
  height: calc(100% - 2 * var(--text-inset));
  line-height: var(--sub-w);
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-family: var(--font);
  font-size: var(--fs);
  letter-spacing: var(--track);
  white-space: pre;
  overflow: visible;
  font-weight: 400;
}

.notice {
  position: absolute;
  top: 50%;
  right: 50%;
  margin: 0;
  transform: translate(50%, -50%);
  writing-mode: vertical-rl;
  font-family: var(--font);
  font-size: var(--size-count);
  letter-spacing: var(--track-loose);
}

/* 阅读视图容器：与旧 #leaf 同一套滚动规则 */
.reader {
  flex: 1;
  min-width: 0;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

/* 阅读页：只保留界行（竖线），外层页面框负责四边，不再画第二道封口线、不留额外边距 */
.strip--bare {
  /* 线画在格子的左缘：贴右边缘那格不再出线，避免与页面框重合
     （方向反过来画，repeat 时最右一格就没有线） */
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(to right, var(--rule-color) 0 var(--rule-width), transparent var(--rule-width));
  background-size: var(--rule-width) 100%, var(--cell-w) 100%;
  background-position: left 0 top, right 0 top;
  background-repeat: no-repeat, repeat-x;
  /* 内容不满屏时，界行继续铺满，不留白板 */
  min-width: 100%;
}

.strip--bare::before,
.strip--bare::after {
  display: none;
}