/* ============================================================
   pick.css  —  /anime/pick/ 结果屏四节的样式
   ------------------------------------------------------------
   只给这一页用，所有类名带 pk- 前缀。理由是 fortune/dreams 那次
   踩过的坑：往共用皮肤里加没前缀的通用类，会把同站别的页面一起改掉。

   不要 link anime/depth.css —— pick 是投放落地页，只带 skin.css，
   skin.css 第 99 行那条注释写明了这件事。

   版式跟着 skin.css 的杂志语言：黑硬分隔线、零圆角、Arial Narrow
   标题、玫红整块灌、墨蓝做序号。移动优先，390px 下不许横向溢出。
   ============================================================ */

/* ---- 小节外框：6px 黑线，跟 .feature 一个调 ---- */
.pk-sec {
  display: grid;
  gap: var(--sp-4);
  border-top: 6px solid var(--ink);
  padding-top: var(--sp-5);
}
.pk-lede { color: var(--muted); margin: 0; }
/* 小标题跟 .sec-title.small 同号（--step-1）。
   之前给了 --step-2，比它上面那条 h3 还大，层级是倒的。
   分级靠线宽区分：小节 6px，小标题 2px。 */
.pk-sub {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: .98;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-4);
  border-top: 2px solid var(--rule);
}
.pk-foot {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}

/* ---- 表格容器：上下各一条线收口 ---- */
.pk-board, .pk-map, .pk-flip, .pk-funnel,
.pk-tally, .pk-cols, .pk-ties, .pk-alt {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

/* ---- 通用行：名次 / 番名 / 数字 / 说明 / 条 ---- */
.pk-row {
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.pk-row .pk-seat  { grid-row: 1 / span 3; grid-column: 1; }
.pk-row .pk-title { grid-column: 2; }
.pk-row .pk-num   { grid-column: 3; grid-row: 1; }
.pk-row .pk-facts { grid-column: 2 / -1; }
.pk-row .pk-bar   { grid-column: 2 / -1; }

.pk-seat {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--accent-soft);
}
.pk-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.pk-num {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}
.pk-facts {
  font-size: var(--step--1);
  color: var(--muted);
  overflow-wrap: break-word;
}

/* ---- 条：高度必须是定值，百分比高度在这种格子里撑不开 ---- */
.pk-bar {
  display: block;
  height: 10px;
  background: var(--sink);
  border: 1px solid var(--rule);
}
.pk-bar i {
  display: block;
  height: 100%;
  width: calc(var(--_n) * 1%);
  min-width: 2px;          /* 3% 的那一档也要看得见，否则等于没画 */
  background: var(--accent);
}

/* ---- 你那一行整条翻黑。
   不用负 margin 去顶到版心边缘：390px 下极易横向溢出，
   所以每一行都统一带 padding，翻黑的那行自然就有留白。 ---- */
.pk-row[data-me] { background: var(--ink); color: var(--raise); }
.pk-row[data-me] .pk-seat,
.pk-row[data-me] .pk-num   { color: var(--accent); }
.pk-row[data-me] .pk-facts { color: var(--faint); }
/* 翻黑那行末尾那句「this is the one you got」得跳出来。
   跟同一行的番组信息同色的话，加粗等于没加。 */
.pk-row[data-me] .pk-facts b { color: var(--raise); }
.pk-row[data-me] .pk-bar   { background: transparent; border-color: var(--raise); }

/* ---- §1 你按的三下 ---- */
.pk-ans {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.pk-q {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.pk-pick {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.pk-ans[data-skipped] .pk-pick { color: var(--warn); }

/* ---- §1 分差那一块：玫红整块灌，全页就这一处 ---- */
.pk-call {
  margin: 0;
  padding: var(--sp-4);
  background: var(--accent);
  color: var(--accent-ink);
}
.pk-call b { color: var(--accent-ink); }

/* ---- §1 一键之差 ---- */
.pk-grp {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--rule);
}
.pk-swap {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
}
.pk-swap .pk-pick { font-size: var(--step-1); }
.pk-swap[data-moved] .pk-facts { color: var(--accent); font-weight: 700; }
.pk-alt .pk-foot { padding: var(--sp-3); border-top: 1px solid var(--rule); }

/* ---- §3 平局那几条路 ---- */
.pk-tie {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--rule);
}
/* 390px 下三个选项标签一定各占一行，中间的 + 就吊在行尾像打错字。
   窄屏改成竖排并隐掉 +；宽到放得下一行时再让它回来当连接符。 */
.pk-path {
  display: grid;
  justify-items: start;
  gap: var(--sp-2);
}
.pk-path u { display: none; }
@media (min-width: 34em) {
  .pk-path { display: flex; flex-wrap: wrap; align-items: center; }
  .pk-path u { display: inline; }
}
.pk-path i {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 2px var(--sp-3);
  border: 1px solid var(--rule);
}
.pk-path u {
  text-decoration: none;
  font-weight: 700;
  color: var(--faint);
}

/* ---- §4 漏斗：两列，条占满整行 ---- */
.pk-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: baseline;
  padding: var(--sp-3);
  border-top: 1px solid var(--rule);
}
.pk-step .pk-num   { font-size: var(--step-2); }
.pk-step .pk-bar   { grid-column: 1 / -1; }
.pk-step .pk-facts { grid-column: 1 / -1; }

/* ---- 窄屏收紧：390px 以下名次列让位给番名 ---- */
@media (max-width: 22.5em) {
  .pk-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
  .pk-swap { grid-template-columns: minmax(0, 1fr); }
}

/* 宽屏：说明文字跟着条走，不要拉成一条长线 */
@media (min-width: 42em) {
  .pk-sec { gap: var(--sp-5); }
  .pk-row { grid-template-columns: 3.6rem minmax(0, 1fr) 7rem; }
}