/* ============================================================
   anime / depth.css  —  深度页专用
   ------------------------------------------------------------
   落地页是杂志的排行内页（前六名，一行一部）。
   这一页是杂志中间那张跨页图表：一条横贯版面的条形场，
   标题压在上面，边注排在栏沟里，底下跟一整季的索引。

   四个深度页刻意各长各的：
     game/charts     终端 —— 等宽、零圆角、一百行贴着行
     fortune/bazi    历书 —— 衬线、居中、大留白
     body/calculator 仪表 —— 暖炭黑、左右分栏、一次一条线在动
     这里            图表跨页 —— 纯白、硬黑粗线、玫红整块灌、直接拖那条切线

   只用 skin.css 已经定好的 token，不新增颜色。
   ============================================================ */

/* 顶栏：做成报头上沿那条细线，不是导航条 */
.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em;
}
.top a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.top a:hover { color: var(--accent); }
.top .clock { color: var(--faint); }
.top .clock b { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.doc {
  max-width: 76rem; margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-7);
}
.head { display: grid; gap: var(--sp-4); border-bottom: 6px solid var(--ink); padding-bottom: var(--sp-4); }
.head .lede { max-width: var(--measure); font-size: var(--step-1); color: var(--muted); }
/* 标题里那两个数是 JS 填的，用 > 限死在直接子元素上：
   别的地方（.lede、.method）也有 <b>，写成 .head b 会把它们一起放大。 */
.head > .hero-title > b { color: var(--accent); font-variant-numeric: tabular-nums; }
.head > .hero-title > em > b { color: inherit; font-variant-numeric: tabular-nums; }
/* 两句话必须各占一行。engine.css 给 h1 开了 text-wrap: balance，
   靠它换行等于把版式交给浏览器按当前宽度猜 —— 宽度一变就断在别处。 */
.head > .hero-title > em { display: block; }
/* 落地页的 hero 用 --step-5，因为那一屏除了标题没别的。这一页标题底下
   紧跟着读数条和整块条形场，5.8rem 两句话要三行，把交互整个压出首屏。 */
.head > .hero-title { font-size: var(--step-4); }

.block { display: grid; gap: var(--sp-4); }
.sec-title { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700;
             letter-spacing: -.01em; border-bottom: 3px solid var(--ink); padding-bottom: var(--sp-2); }
.sec-title.small { font-size: var(--step-1); border-bottom-width: 1px; }

/* ---- 切线区：这一页的全部交互都在这儿 ---------------------- */
/* 读数条直接吊在标题那条 6px 黑线底下。原来这里 .head 底一条 6px、
   .cutread 顶又一条 6px，中间隔着 --sp-7 的空白 —— 两条重线夹一段空
   看着像排版事故，不像有意为之。粗线只留标题那条。 */
.head + .cutting { margin-top: calc(var(--sp-7) * -1); }
.cutting { display: grid; gap: var(--sp-4); }

/* 四格读数，横排贴着黑线 —— 杂志的数据条 */
.cutread {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-bottom: 1px solid var(--rule);
}
.cutread > div {
  padding: var(--sp-3) var(--sp-4);
  display: grid; gap: var(--sp-1); align-content: start;
  border-right: 1px solid var(--rule);
}
/* 头一格贴版心左边缘对齐标题，别的格要让开左边那条分隔线 */
.cutread > div:first-child { padding-left: 0; }
.cutread > div:last-child { border-right: 0; padding-right: 0; }
.cutread > div.hot > b { color: var(--accent); }
.cutread > div > b {
  font-family: var(--font-display); font-weight: 700; line-height: .92;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cutread > div > span { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }

/* ---- 条形场 -------------------------------------------------
   一部一根，按收录人数从高到低。高度取平方根，理由写在页面的方法一节里：
   照真值画，第一名比后面一百根加起来还高，尾巴是一条直线，什么也看不出来。
   页面上所有百分比都从真值算，没有一个是从条高读出来的。 */
.field {
  position: relative; height: 232px;
  border: 1px solid var(--rule); border-top: 0;
  padding: var(--sp-4) var(--sp-4) 2.6rem;
  background: var(--raise);
  touch-action: pan-y;               /* 竖向还能滚页，横向让给拖动 */
}
/* 底部留出 2.6rem 是给坐标标签的整条带子。留窄了最高的那几根粉条会压在
   "MOST LISTED" 上面 —— 条形是 flex-end 对齐的，容器给多少它就贴多低。 */
.bars { position: absolute; inset: var(--sp-4) var(--sp-4) 2.6rem;
        display: flex; align-items: flex-end; gap: 1px; }
.bars i {
  flex: 1 1 0; min-width: 0; display: block;
  background: var(--sink);
  transition: background var(--dur) var(--ease);
}
.bars i.in { background: var(--accent); }
.bars i.edge { background: var(--accent-soft); }

/* 切线本体：一条压在场上的黑竖线，顶端挂名次。
   位置来自 --_c（0-1），JS 只改这一个变量。 */
.cut {
  position: absolute; top: 0; bottom: 0;
  left: clamp(0%, calc(var(--_c, .1) * 100%), 100%);
  width: 0; border-left: 2px solid var(--ink);
  pointer-events: none;
  transition: left 120ms var(--ease);
}
.cut > b {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .06em; padding: .18em .55em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* 键盘焦点要看得见 —— 这条线就是控件本身，光标不在它身上时没有别的提示 */
.field:focus-within .cut { border-left-color: var(--accent); }
.field:focus-within .cut > b { background: var(--accent); }

/* 真 range 覆盖整块场：键盘、触屏、无障碍语义全是浏览器给的，不自己实现。
   视觉上完全透明，看到的那条线是上面的 .cut。 */
.field > input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.field > input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 100%; }
.field > input[type="range"]::-moz-range-thumb { width: 28px; height: 232px; border: 0; opacity: 0; }

.field .axis {
  position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: .6rem;
  display: flex; justify-content: space-between;
  padding-top: .45rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--faint);
  text-transform: uppercase; letter-spacing: .14em;
}

.edge { font-size: var(--step--1); color: var(--muted); }
.edge b { color: var(--ink); font-weight: 600; }

.presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.presets > span { font-size: var(--step--1); color: var(--faint);
                  text-transform: uppercase; letter-spacing: .14em; }
.presets button {
  font: inherit; font-size: var(--step--1); font-family: var(--font-display); font-weight: 700;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: .35em .9em; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.presets button:hover, .presets button:focus-visible { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---- 构成：这一季到底由什么组成 ---------------------------- */
.mix { display: grid; gap: var(--sp-2); }
.mix > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: var(--sp-3);
             align-items: center; font-size: var(--step--1); }
.mix .k { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.mix .track { position: relative; height: .7rem; background: var(--sink); }
.mix .track > i { display: block; height: 100%; background: var(--accent); }
.mix .track > i.thin { background: var(--faint); }
/* 部数份额的刻度。条长画的是注意力，这根竖线画的是「这一格其实有多少部」，
   两者差多远就是这一节的全部内容。 */
.mix .track > b { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px;
                  background: var(--ink); transform: translateX(-1px); }
.mix .v { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- 整季索引：三栏小字，杂志正文那种密度 ------------------ */
.roll { list-style: none; margin: 0; padding: 0;
        columns: 3; column-gap: var(--sp-6); column-rule: 1px solid var(--rule); }
.roll > li {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: var(--sp-2);
  align-items: baseline; break-inside: avoid;
  padding: .3rem 0; border-bottom: 1px solid var(--sink);
  font-size: var(--step--1); line-height: 1.35;
  transition: opacity var(--dur) var(--ease);
}
.roll > li > b { font-family: var(--font-display); font-weight: 700; color: var(--accent);
                 font-variant-numeric: tabular-nums; text-align: right; }
.roll > li > span { color: var(--ink); overflow-wrap: anywhere; }
.roll > li > em { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }
.roll > li.out { opacity: .38; }
.roll > li.out > b { color: var(--faint); }

.method { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-3); max-width: var(--measure); }
.method li { font-size: var(--step--1); color: var(--muted); line-height: 1.7; }
.method b { color: var(--ink); font-weight: 700; font-family: var(--font-display); }

@media (max-width: 900px) { .roll { columns: 2; } }
@media (max-width: 720px) {
  .doc { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-6); }
  .cutread { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cutread > div:nth-child(2) { border-right: 0; }
  .cutread > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  /* 换成两列后，"贴左边缘 / 让开分隔线" 要按新的行首行尾重排 */
  .cutread > div:nth-child(odd) { padding-left: 0; }
  .cutread > div:nth-child(even) { padding-right: 0; }
  .field { height: 180px; }
  .bars { inset: var(--sp-4) var(--sp-4) 2.6rem; }
  .field > input[type="range"]::-moz-range-thumb { height: 180px; }
  .roll { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cut, .bars i, .roll > li { transition: none; }
}

/* ============================================================
   /anime/scores/ —— 空白普查 + 那条窄带
   同一个站共用这份 depth.css：季度页是「一条横贯版面的条形场」，
   这一页是「一排小刻度 + 一张画满 0–100 的直方图」。
   纯白、硬黑粗线、玫红整块灌的底子不变。
   ============================================================ */

/* .head .lede 已经在上面定过；这一页正文里还有好几段 lede，
   得有一条不带 .head 前缀的通用规则，不然那几段会掉回默认样式。 */
.lede { max-width: var(--measure); font-size: var(--step-0); color: var(--muted); line-height: 1.65; }
.lede b { color: var(--ink); font-weight: 700; }

/* ---- 空白普查：一部一根刻度 --------------------------------
   有分的灌实，没分的留浅色。这一节的论点就是「大部分是空的」，
   所以必须是一眼看过去的密度差，不是一句「71% 没有评分」。
   刻度按名次从左到右排 —— 实心的集中在左边，本身就是一条信息。

   必须是不换行的一整条。原来写的是 flex-wrap + 固定 6px + flex-grow:1，
   144 根排不下就折到第二行，而第二行只剩十几根，每根被 grow 拉成一个大方块 ——
   同一张图里两种宽度的"刻度"，密度差当场没了，看着还像排版坏了。
   改成 flex: 1 1 0 均分一行：几根都排得下，每根永远一样宽。 */
.census {
  display: flex; gap: 2px;
  padding: var(--sp-4); border: 2px solid var(--ink); background: var(--paper);
}
.census i {
  flex: 1 1 0; min-width: 0; display: block;
  height: 2.6rem; background: var(--sink);
}
/* 不用描边区分：一根窄到 1px 多的时候，描边会把它本身吃掉。只用填充色说话。 */
.census i.has { background: var(--accent); }

/* ---- 直方图：画满 0–100 ------------------------------------
   横轴不裁到数据所在那一段。裁了图会被数据填满，十八分的跨度看起来
   就成了整条量程 —— 数还是真的，图已经在骗人了。 */
.band { margin: 0; border: 2px solid var(--ink); background: var(--paper); padding: var(--sp-4); }
.band svg { display: block; width: 100%; height: auto; }
.band .ax { fill: var(--faint); font-size: 13px; text-anchor: middle; letter-spacing: .08em; }
.band .axline { stroke: var(--ink); stroke-width: 2; }
.band .tickline { stroke: var(--rule); stroke-width: 1; }
.band .col { fill: var(--accent); }
/* 没过线的柱子用第二油墨（墨蓝），不用 --sink —— 底下那块带注也是 --sink，
   灰柱子压在灰块上等于没画。两种油墨是这个皮本来就有的语汇。 */
.band .col.under { fill: var(--accent-soft); }
.band .barline { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 8 5; }
.band .barlab { fill: var(--ink); font-size: 14px; font-weight: 700; text-anchor: middle; }
/* 带注只是「数据占了这一段」的底色，得让柱子压在它上面，不能盖过柱子。
   --accent-soft 在这个皮里是墨蓝（#1c2c8c），是第二油墨不是浅色调 ——
   拿它当底色会灌出一整块深蓝，把图变成蓝底上的几根柱子。 */
.band .zone { fill: var(--sink); }
.band .zonelab { fill: var(--muted); font-size: 13px; text-anchor: middle; letter-spacing: .1em; }

/* ---- 设杆器：整页唯一的可点件 ------------------------------
   季度页那条是拖的，这里用两个真按钮加减 —— 同一个站里再来一条
   拖动条就成了同一页做两遍。按钮还自带键盘和焦点，拖动条得自己补。 */
.setter {
  display: flex; align-items: stretch; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-4) 0;
}
.step {
  font: inherit; cursor: pointer; width: 4rem;
  font-size: var(--step-2); font-weight: 700; line-height: 1;
  color: var(--paper); background: var(--ink); border: 2px solid var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.step:hover, .step:focus-visible { background: var(--accent); border-color: var(--accent); }
.step[disabled] { background: var(--paper); color: var(--faint); border-color: var(--rule); cursor: not-allowed; }
.bar-now {
  margin: 0; display: grid; gap: var(--sp-1); justify-items: center; align-content: center;
  min-width: 9rem; padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--ink); background: var(--paper);
}
.bar-now > b {
  font-family: var(--font-display); font-size: var(--step-4); font-weight: 700;
  line-height: .9; font-variant-numeric: tabular-nums; color: var(--accent);
}
.bar-now > span {
  /* 用 --muted 不用 --faint：这行小字是整页唯一那个控件的标签。
     --faint (#9a978f) 压在纸色上只有 2.8:1，当装饰性刻度可以，当控件标签不行。 */
  font-size: var(--step--1); color: var(--muted);
  text-transform: uppercase; letter-spacing: .12em;
}

/* ---- 两个分母：这一页的整个论点就压在这两格上 ------------------
   「41 部里有 11 部过线」和「144 部里有 11 部过线」都是真的，
   读起来完全是两件事。只报前一句就是这类数字最常见的注水方式。 */
.readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.readout > div {
  display: grid; gap: var(--sp-2); align-content: start;
  /* 上留白要把规线的粗细补回去：强调那格的规线是 8px，别的格是 3px，
     不补的话那一格的内容整体往下掉 5px，三格并排就看得出来没对齐。 */
  padding: calc(var(--sp-4) + 5px) var(--sp-4) var(--sp-4);
  border-top: 3px solid var(--ink);
}
/* 强调那一格不灌底色。--accent-soft 是第二油墨（深墨蓝），灌上去之后
   标题和正文还是深色的，整格读不出来。杂志强调一栏本来也不是换底色，
   是把上面那条规线加粗、把数字换成另一种油墨。 */
.readout > div.big { border-top: 8px solid var(--accent); padding-top: var(--sp-4); }
.readout > div.big > b { color: var(--accent); }
.readout b {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 700;
  line-height: .95; font-variant-numeric: tabular-nums;
}
.readout dfn { font-style: normal; font-weight: 700; font-size: var(--step-0); }
.readout span { font-size: var(--step--1); color: var(--muted); line-height: 1.5; }

/* ---- 有分的那些：按分数排，不是按人数排 --------------------
   季度页那张全季名单是按收录人数排的。这里换成按分数排，正好回答
   那张表回答不了的那个问题：分数最高的到底是谁。 */
.ladder { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sp-6); }
.ladder > li {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-3);
  align-items: baseline; break-inside: avoid;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule);
  font-size: var(--step--1); line-height: 1.4;
}
.ladder > li > b {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums; text-align: right;
}
.ladder > li > span { color: var(--ink); overflow-wrap: anywhere; }
.ladder > li > span > em { font-style: normal; color: var(--faint); }

@media (max-width: 720px) {
  .readout { grid-template-columns: minmax(0, 1fr); }
  .ladder { columns: 1; }
  /* 窄屏上 144 根还是挤在一行里，间距收到 1px，不然 gap 会把刻度本身挤没。 */
  .census { gap: 1px; padding: var(--sp-3); }
  .census i { height: 2rem; }
}