/* ============================================================
   anime / catchup.css  —  /anime/catchup/ 专用
   ------------------------------------------------------------
   这一页自带：三格输入条、一个 --step-5 的周数读数、两张 SVG
   （赛跑折线 / 两段跨度条）。其余（.presets .cutread .cross
   .method .more .lede）全部复用 skin/depth，一行都不重写。
   全部 ctc- 前缀；SVG 里的类关在 .ctc-fig 下面，不外泄。
   ============================================================ */

/* ---- 输入条：黑框、零圆角、竖线分栏，跟 .cutread 是一家人 ---- */
.ctc-set {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--ink); background: var(--raise);
}
.ctc-f {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-3); border-left: 1px solid var(--rule); min-width: 0;
}
.ctc-f:first-child { border-left: 0; }
/* 标签必须短到能在 390 的三分之一格（净宽 ~94px）里一行放下。
   nowrap 是故意的 —— 换行只会把这一格的输入框顶低，三格就不齐了；
   代价是字一长就溢进隔壁格，2026-09-21 截图上「EPISODES OUT」正好
   和「IT WILL RUN」连成了一个词。探针里有一条断言盯着这个。 */
.ctc-f > span {
  font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* 390 上三格平分不到 115px，--step-2 的四位数会把 number 的上下箭头
   顶出格子，所以窄屏降一档；600 以上再回到读得舒服的字号。 */
.ctc-f input {
  font: inherit; font-size: var(--step-1); line-height: 1.15;
  width: 100%; min-width: 0;
  background: var(--paper); color: var(--accent);
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  padding: var(--sp-1) 0;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease);
}
.ctc-f input:focus-visible { outline: 0; border-bottom-color: var(--accent); }
@media (min-width: 600px) {
  .ctc-f { padding: var(--sp-4); }
  .ctc-f input { font-size: var(--step-2); }
}

/* ---- 节奏按钮：depth.css 的 .presets 没有选中态 ---------------- */
.ctc-pace button.on {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}

/* ---- 主读数：整页最大的东西 ---------------------------------- */
.ctc-hero {
  display: grid; gap: var(--sp-2);
  border-left: 6px solid var(--accent); padding-left: var(--sp-5);
}
/* 必须是直接子元素：.ctc-why 那段话里也有 <b> 放动态数字，
   写成 .ctc-hero b 会把半句正文顶成 --step-5。 */
.ctc-hero > b {
  font-family: var(--font-display);
  font-size: var(--step-5); font-weight: 700; line-height: .86;
  letter-spacing: -.03em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ctc-hero > span {
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.ctc-why {
  max-width: var(--measure); font-size: var(--step-0);
  color: var(--muted); line-height: 1.65; margin-top: var(--sp-2);
}
.ctc-why b, .ctc-said b { color: var(--ink); font-weight: 700; }
.ctc-why em, .ctc-said em { font-style: normal; color: var(--accent); font-weight: 700; }
.ctc-said { margin: 0; }

/* ---- 图版：黑框，和 .band 同一种装订 -------------------------- */
.ctc-fig {
  margin: 0; border: 2px solid var(--ink); background: var(--paper);
  padding: var(--sp-4);
}
.ctc-fig svg { display: block; width: 100%; height: auto; }

/* SVG 的 viewBox 由 catchup.js 按容器像素宽 1:1 设，所以下面的
   font-size 就是屏幕上的真实像素，不需要按屏宽再分档。 */
.ctc-fig .ax { stroke: var(--ink); stroke-width: 2; }
.ctc-fig .grid { stroke: var(--rule); stroke-width: 1; opacity: .2; }
.ctc-fig .line { fill: none; stroke-width: 2.5; }
.ctc-fig .line.out { stroke: var(--accent-soft); }
.ctc-fig .line.seen { stroke: var(--accent); }
.ctc-fig .gapfill { fill: var(--sink); }
.ctc-fig .meet { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; }
.ctc-fig .dot { fill: var(--ink); }
.ctc-fig .lab { fill: var(--muted); font-size: 11px; letter-spacing: .06em; }
.ctc-fig .lab.on { fill: var(--ink); font-weight: 700; }
.ctc-fig .lab.hot { fill: var(--accent); font-weight: 700; }
.ctc-fig .lab.r { text-anchor: end; }
.ctc-fig .lab.m { text-anchor: middle; }
.ctc-fig .lab.soft { fill: var(--accent-soft); font-weight: 700; }
.ctc-fig .val { fill: var(--ink); font-size: 12px; font-weight: 700;
                font-variant-numeric: tabular-nums; }
.ctc-fig .val.m { text-anchor: middle; }
/* .val 也要有右对齐档：少了这一条，交点读数在画布右侧就会以左对齐
   画出去，「week 100」被裁成「wee」（2026-09-21 净追 0 那张截图）。 */
.ctc-fig .val.r { text-anchor: end; }
/* 跨度条：追平前涂实，追平后留白只描边 —— 两段一样长的时候，
   靠填充而不是靠颜色深浅区分，截图缩到 390 也还认得出。 */
.ctc-fig .seg { fill: var(--accent); }
.ctc-fig .seg.after { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.ctc-fig .tickline { stroke: var(--ink); stroke-width: 1; }

/* ---- 表 ------------------------------------------------------
   depth.css:350 的 `.cross .c-n` 把数字列写死了 nowrap，(0,2,0) 和
   :346 给表头开的 white-space:normal 同权重、写在后面，于是连表头
   一起管到了：390 上「Backlog by then」这类词组会把表顶出屏幕，而
   body 是 overflow-x:hidden，顶出去那截横拖也拖不回来。只放开表头，
   正文数字列一个字都不换行 —— 选择器凑到 (0,3,1) 才压得住。 */
@media (max-width: 40rem) {
  .cross.ctc-tab thead th.c-n { white-space: normal; }
}
.ctc-tab tbody th { color: var(--ink); }
.ctc-tab .c-hot { color: var(--accent); font-weight: 700; }
.ctc-tab .c-nil { color: var(--faint); }
.ctc-tab tr.you { background: var(--sink); }
.ctc-tab tr.you th::before { content: '\203A\00a0'; color: var(--accent); font-weight: 700; }
/* 合计行：加粗上边框当横线，不靠颜色 —— 颜色已经被 .c-hot 占了 */
.ctc-tab tr.tot th, .ctc-tab tr.tot td {
  border-top: 2px solid var(--ink); border-bottom: 0;
  font-weight: 700; color: var(--ink);
}

@media (max-width: 560px) {
  .ctc-hero { padding-left: var(--sp-4); border-left-width: 4px; }
  .ctc-fig { padding: var(--sp-3); }
}