/* ============================================================
   anime / lifetime.css  —  /anime/lifetime/ 专用
   ------------------------------------------------------------
   这一页自带：两格输入条、一个反白的主读数块、两张 SVG
   （季数对每周小时数的直线 / 每十年一格的条）。
   其余（.presets .cutread .cross .method .more .lede）全部复用
   skin/depth。全部 lft- 前缀，SVG 里的类关在 .lft-fig 下面。

   和 /anime/catchup/ 的区别是故意的：那页主读数是玫红竖条，
   这页是整块墨底反白 —— 同一个站里两页不能长一个样。
   ============================================================ */

/* ---- 输入条：两格，和 .cutread 同一种装订 -------------------- */
.lft-set {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--ink); background: var(--raise);
}
.lft-f {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-3); border-left: 1px solid var(--rule); min-width: 0;
}
.lft-f:first-child { border-left: 0; }
/* nowrap 同 catchup：换行会把这一格的输入框顶低，两格就不齐了。
   两格比三格宽（390 上净宽 ~160px），但也只够放十二三个字符，
   「HOURS A WEEK」已经是上限，再长就溢进隔壁格。探针盯着这个。 */
.lft-f > span {
  font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.lft-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);
}
.lft-f input:focus-visible { outline: 0; border-bottom-color: var(--accent); }
@media (min-width: 600px) {
  .lft-f { padding: var(--sp-4); }
  .lft-f input { font-size: var(--step-2); }
}

/* ---- 横杆按钮：depth.css 的 .presets 没有选中态 --------------- */
.lft-when button.on {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}

/* ---- 主读数：整块墨底 ----------------------------------------
   玫红 #d81b60 压在墨底上是 4.0:1，够不上正文的 4.5 —— 所以只给
   --step-5 的那个数字用（大字 3:1 达标），说明文字一律 --paper。
   why 那段话不进这个块，留在纸上，省掉一整套反白下的正文配色。 */
.lft-hero {
  display: grid; gap: var(--sp-2);
  background: var(--ink); padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.lft-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;
}
.lft-hero > span {
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper);
}
.lft-why {
  max-width: var(--measure); font-size: var(--step-0);
  color: var(--muted); line-height: 1.65; margin: 0;
}
.lft-why b, .lft-said b { color: var(--ink); font-weight: 700; }
.lft-why em, .lft-said em { font-style: normal; color: var(--accent); font-weight: 700; }
.lft-said { margin: 0; }
/* 正文里的站内链接：engine/skin 都没给 <a> 兜底样式，不写这条就是
   浏览器默认的蓝紫下划线，在这套纸墨配色里是全页唯一一处跑调的颜色。 */
.lft-said a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lft-said a:hover, .lft-said a:focus-visible { color: var(--accent); }

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

/* viewBox 由 lifetime.js 按容器像素宽 1:1 设，所以下面的 font-size
   就是屏幕上的真实像素，不需要按屏宽再分档。 */
.lft-fig .ax { stroke: var(--ink); stroke-width: 2; }
.lft-fig .grid { stroke: var(--rule); stroke-width: 1; opacity: .2; }
.lft-fig .line { fill: none; stroke: var(--accent-soft); stroke-width: 2.5; }
.lft-fig .drop { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 4 4; }
.lft-fig .dot { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
/* 十年条：满十年的一律同一个填充，不满的那格留白描边 ——
   靠填充而不是靠深浅区分，缩到 390 的截图上也还认得出。 */
.lft-fig .bar { fill: var(--accent-soft); }
.lft-fig .bar.part { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.lft-fig .bar.now { fill: var(--accent); }
.lft-fig .lab { fill: var(--muted); font-size: 11px; letter-spacing: .06em; }
.lft-fig .lab.on { fill: var(--ink); font-weight: 700; }
.lft-fig .lab.hot { fill: var(--accent); font-weight: 700; }
.lft-fig .lab.soft { fill: var(--accent-soft); font-weight: 700; }
.lft-fig .lab.r { text-anchor: end; }
.lft-fig .lab.m { text-anchor: middle; }
.lft-fig .val { fill: var(--ink); font-size: 12px; font-weight: 700;
                font-variant-numeric: tabular-nums; }
/* 右对齐和居中各要一条自己的 text-anchor：少了 .val.r，画布右侧的
   读数会以左对齐画出去被裁掉半个词（2026-09-21 catchup 踩过）。 */
.lft-fig .val.r { text-anchor: end; }
.lft-fig .val.m { text-anchor: middle; }

/* ---- 表 ------------------------------------------------------
   depth.css:350 的 `.cross .c-n` 把数字列写死了 nowrap，(0,2,0) 和
   :346 给表头开的 white-space:normal 同权重、写在后面，于是连表头
   一起管住了：390 上「At your pace」这种两词表头会把表顶出屏幕，而
   body 是 overflow-x:hidden，顶出去那截横拖也拖不回来。只放开表头，
   正文数字列一个字都不换行 —— 选择器凑到 (0,3,1) 才压得住。 */
@media (max-width: 40rem) {
  .cross.lft-tab thead th.c-n { white-space: normal; }
}
.lft-tab tbody th { color: var(--ink); }
.lft-tab .c-hot { color: var(--accent); font-weight: 700; }
.lft-tab .c-nil { color: var(--faint); }
.lft-tab tr.you { background: var(--sink); }
.lft-tab tr.you th::before { content: '\203A\00a0'; color: var(--accent); font-weight: 700; }

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