/* ============================================================
   anime / hours.css  —  /anime/hours/ 专用
   ------------------------------------------------------------
   复用 depth.css 的 .presets .cutread .roll .method .lede .edge
   .top .doc .head .block .sec-title，skin.css 的 .more .ad .eyebrow。
   这里只加三件：时间预算的输入条、一个 --step-5 的读数、
   一张按比例画的「同样的预算装两遍」的条形图。
   全部 hrs- 前缀；SVG 里的 pk- 类都关在 .hrs-pack 下面。
   ============================================================ */

/* ---- 预算输入：预设 + 自定义，中间一条黑线分开 ---------------- */
.hrs-set {
  display: grid; gap: var(--sp-4);
  border-bottom: 2px solid var(--rule); padding-bottom: var(--sp-4);
}
/* depth.css 的 .presets 只有 hover/focus 态，没有「选中」态 */
.hrs-shapes button.on {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
/* 杂志不给输入框画方框，画一条下划线 */
.hrs-own {
  display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--step--1); color: var(--faint);
  text-transform: uppercase; letter-spacing: .14em;
}
.hrs-own input {
  font: inherit; font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-2); letter-spacing: 0; text-transform: none;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 2px solid var(--ink); border-radius: 0;
  width: 5ch; min-width: 0; padding: 0 0 .1em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.hrs-own input:focus-visible { outline: 0; border-bottom-color: var(--accent); color: var(--accent); }

/* ---- 主读数 ---------------------------------------------------- */
.hrs-hero { display: grid; gap: var(--sp-2); }
/* 必须用 > ：.hrs-why 那段话里也有 <b> 放动态数字 */
.hrs-hero > b {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-5); line-height: .85; letter-spacing: -.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.hrs-hero > span {
  font-size: var(--step--1); color: var(--faint);
  text-transform: uppercase; letter-spacing: .14em;
}
.hrs-why {
  max-width: var(--measure); font-size: var(--step-0);
  color: var(--muted); line-height: 1.65; margin-top: var(--sp-2);
}
.hrs-why b, .hrs-said b { color: var(--ink); font-weight: 700; }
.hrs-why em, .hrs-said em { font-style: normal; color: var(--accent); font-weight: 700; }

/* ---- 装箱图：白纸 + 黑框，这个站的图都长这样 ------------------ */
.hrs-pack {
  margin: 0; border: 1px solid var(--rule); background: var(--raise);
  padding: var(--sp-4);
}
.hrs-pack svg { display: block; width: 100%; height: auto; }

/* SVG 里的字不能靠继承，fill 要写死。viewBox 由 hours.js 按容器
   像素宽 1:1 设定，所以这里的字号就是屏幕上的真实字号，不缩。 */
.hrs-pack .pk-lab { fill: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.hrs-pack .pk-n   { fill: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.hrs-pack .pk-tag { fill: var(--paper); font-size: 11px; font-weight: 700; }
.hrs-pack .pk-out { fill: var(--muted); font-size: 11px; }
/* 两根条共用一套填色：第二油墨蓝 = 装得下的番，交替深浅只为数得清 */
.hrs-pack .pk-seg  { fill: var(--accent-soft); }
.hrs-pack .pk-seg.b{ fill: #35459e; }
.hrs-pack .pk-rest { fill: var(--sink); }
.hrs-pack .pk-edge { fill: none; stroke: var(--ink); stroke-width: 1; }
.hrs-pack .pk-rule { stroke: var(--ink); stroke-width: 1; }
.hrs-pack .pk-hair { stroke: var(--faint); stroke-width: 1; }

/* ---- 名单：depth.css 的 .roll 是三栏，这里每行要印小时数，
        栏数减到两栏，右列宽度让给「12 ep · 4.6 h」这种串 ---- */
.hrs-roll { columns: 2; }
.hrs-roll > li { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
.hrs-roll > li > em { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrs-roll > li.fit > b { color: var(--accent-soft); }
.hrs-roll > li.fit > em { color: var(--ink); font-weight: 700; }
.hrs-said { margin-top: var(--sp-2); }

@media (max-width: 900px) { .hrs-roll { columns: 1; } }
@media (max-width: 720px) {
  .hrs-pack { padding: var(--sp-3); }
  .hrs-own input { font-size: var(--step-1); }
}