/* ============================================================================
   CardSpicy · Tips 页（#86）「151 百科导航」样式
   版本随文件 mtime 自动变化（mu-plugin cs-tips151.php 用 filemtime 作版本号）

   设计约束
     · 只用 CSS，不用 JS：悬停浮层靠 :hover，触屏/键盘靠 :focus-within（徽章 tabindex=0）
     · 浮层在徽章**上方**；因页头是 fixed，网格第一行的浮层改到下方，否则会被页头压住
     · 网格列数是**写死的**（3/4/6/8），因为浮层的左右贴边靠 :nth-child 判定首末列
     · 颜色取自站点品牌色（与 cs8_hero.py 同一套）
   ========================================================================== */

.cs151.cs151 {
	--c-ink: #252523;
	--c-soft: #8a8880;
	--c-accent: #8b1a1a;
	--c-accent2: #b84a44;
	--c-rule: #edeae2;
	--c-bg: #fcfbf8;
	margin-block: 1.2rem 2.6rem;
}

/* ---------------- 抬头 ---------------- */
.cs151-k {
	margin: 0 0 0.3rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.cs151-h {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.7rem;
	font-size: 1.42rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.cs151-big {
	font-size: 2.05em;
	line-height: 0.82;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
}

.cs151-lead,
.cs151-note {
	max-width: 62ch;
	color: #4a4a46;
}

.cs151-lead {
	margin: 0 0 0.9rem;
	font-size: 0.94rem;
}

.cs151-note {
	margin: 1rem 0 0;
	font-size: 0.79rem;
	line-height: 1.5;
	color: var(--c-soft);
}

/* ---------------- 图例 ---------------- */
.cs151-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.2rem;
	margin: 0 0 0.85rem;
	padding: 0;
	list-style: none;
	font-size: 0.78rem;
}

.cs151-legend li {
	display: flex;
	align-items: center;
	gap: 0.36rem;
	color: var(--c-soft);
}

.cs151-legend b {
	color: var(--c-ink);
	font-weight: 700;
}

.cs151-i {
	display: inline-block;
	flex: 0 0 auto;
	width: 0.58rem;
	height: 0.58rem;
	border-radius: 50%;
	background: var(--c-soft);
}

.cs151-i-t10 { background: #8b1a1a; }
.cs151-i-t5  { background: #c96a63; }
.cs151-i-cr  { background: #dcbcb8; }
.cs151-i-ck  { background: #fff; box-shadow: inset 0 0 0 1.5px #c6c2ba; }

/* ---------------- 网格与徽章 ---------------- */
.cs151-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.cs151-c {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.34rem;
	min-width: 0;
	padding: 0.44rem 0.5rem;
	border: 1px solid var(--c-rule);
	border-radius: 8px;
	background: var(--c-bg);
	font-size: 0.775rem;
	line-height: 1.15;
	color: var(--c-ink);
	cursor: default;
	transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.cs151-c:hover,
.cs151-c:focus-within {
	z-index: 30;
	border-color: var(--c-accent);
	background: #fff;
	box-shadow: 0 8px 20px rgba(37, 37, 35, 0.14);
}

.cs151-c:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
}

.cs151-c:focus:not(:focus-visible) { outline: 0; }

.cs151-d {
	min-width: 1.75em;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--c-soft);
	font-variant-numeric: tabular-nums;
}

.cs151-nm {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------- 浮层（默认在徽章上方） ---------------- */
.cs151-p {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 9px);
	z-index: 40;
	width: min(292px, calc(100vw - 34px));
	padding: 0.72rem 0.8rem 0.78rem;
	border: 1px solid var(--c-rule);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 16px 36px rgba(37, 37, 35, 0.2);
	text-align: left;
	font-size: 0.8rem;
	font-weight: 400;
	color: #4a4a46;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity 0.12s ease;
}

.cs151-c:hover .cs151-p,
.cs151-c:focus-within .cs151-p {
	opacity: 1;
	visibility: visible;
}

.cs151-p::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	background: #fff;
	border-right: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	transform: rotate(45deg);
}

.cs151-ph {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.3rem;
}

.cs151-ph b {
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--c-ink);
}

/* 浮层标题里的同一个符号（紧贴名称之后） */
.cs151-ph b .cst {
	margin-left: 0.28em;
	width: 0.86em;
	height: 0.86em;
}

.cs151-pf {
	flex: 0 0 auto;
	padding: 0.08rem 0.36rem;
	border: 1px solid #e8cbc9;
	border-radius: 999px;
	background: #fbf4f3;
	font-size: 0.61rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--c-accent);
	white-space: nowrap;
}

.cs151-pt {
	display: block;
	font-size: 0.815rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--c-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* 简短介绍（R72 新增）：浮层里、标题下方的一行角色说明 */
.cs151-pi {
	display: block;
	margin-top: 0.34rem;
	font-size: 0.775rem;
	line-height: 1.4;
	color: var(--c-ink);
}

.cs151-pd {
	display: block;
	margin-top: 0.34rem;
	font-size: 0.73rem;
	font-weight: 700;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

.cs151-pn {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.735rem;
	line-height: 1.36;
	color: var(--c-soft);
}

/* ---- 首末列贴边 + 第一行浮层朝下（列数在下面每个断点里同步写死） ---- */
.cs151-c:nth-child(3n + 1) .cs151-p { left: 0; transform: none; }
.cs151-c:nth-child(3n) .cs151-p { left: auto; right: 0; transform: none; }
.cs151-c:nth-child(3n + 1) .cs151-p::after,
.cs151-c:nth-child(3n) .cs151-p::after { display: none; }

.cs151-c:nth-child(-n + 3) .cs151-p {
	top: calc(100% + 9px);
	bottom: auto;
}

.cs151-c:nth-child(-n + 3) .cs151-p::after {
	top: -5px;
	bottom: auto;
	transform: rotate(-135deg);
}

/* ---------------- 重点文章 ---------------- */
.cs151-feat {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
	margin: 0.4rem 0 1.4rem;
}

.cs151-fc {
	border: 1px solid var(--c-rule);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.cs151-fc img {
	display: block;
	width: 100%;
	height: auto;
}

.cs151-fc h3 {
	margin: 0.9rem 1rem 0.35rem;
	font-size: 1.05rem;
	line-height: 1.28;
}

.cs151-fc h3 a { color: var(--c-ink); text-decoration: none; }
.cs151-fc h3 a:hover { color: var(--c-accent); }

.cs151-fc p {
	margin: 0 1rem 1.1rem;
	font-size: 0.83rem;
	line-height: 1.5;
	color: #4a4a46;
}

/* ---------------- 推荐阅读 TOP 10 ---------------- */
.cs151-rec {
	max-width: 62ch;
	margin: 0.4rem 0 2rem;
	padding: 0;
	list-style: none;
	counter-reset: cs151rec;
}

.cs151-rec li {
	position: relative;
	padding: 0.6rem 0 0.6rem 2.1rem;
	border-bottom: 1px solid var(--c-rule);
	counter-increment: cs151rec;
}

.cs151-rec li::before {
	content: counter(cs151rec, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.6rem;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--c-accent2);
	font-variant-numeric: tabular-nums;
}

.cs151-rt {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.cs151-rx {
	display: block;
	margin-top: 0.18rem;
	font-size: 0.79rem;
	line-height: 1.45;
	color: var(--c-soft);
}

/* ---------------- 分类卡片 ---------------- */
.cs151-tg {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	margin: 0.4rem 0 1rem;
}

.cs151-tc {
	padding: 0.9rem 1rem 0.7rem;
	border: 1px solid var(--c-rule);
	border-radius: 12px;
	background: #fff;
}

.cs151-tc h3 {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	line-height: 1.25;
}

.cs151-tc h3 span {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--c-soft);
}

.cs151-tc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs151-tc li {
	margin: 0 0 0.3rem;
	font-size: 0.815rem;
	line-height: 1.35;
}

.cs151-tc li a { text-decoration: none; }
.cs151-tc li a:hover { text-decoration: underline; text-underline-offset: 2px; }

.cs151-tm {
	margin: 0.55rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px solid var(--c-rule);
	font-size: 0.78rem;
}

.cs151-tm a {
	font-weight: 700;
	color: var(--c-accent);
	text-decoration: none;
}

.cs151-tm a:hover { text-decoration: underline; text-underline-offset: 2px; }

.cs151-quick {
	max-width: 68ch;
	font-size: 0.82rem;
	line-height: 1.9;
	color: #4a4a46;
}

.cs151-quick a { font-weight: 600; }
.cs151-quick span { color: var(--c-soft); }

/* ============================================================================
   151 之外（R73 改版：**镜像 151 的网格**）

   为什么不需要重写贴边/翻向规则：
     151 网格那套是 `.cs151-c:nth-child(...) .cs151-p`，只按 `.cs151-c` 选中，
     没有绑定容器类 ⇒ 只要这个新网格同样是 `display:grid`、列数逐断点一致，
     `nth-child` 的数学完全一样，首末列贴边与首行朝下**自动生效**。
     （同理 `.cs151-c.cs151-down / .cs151-up` 的 JS 翻向也自动覆盖这里。）
     所以下面只需给出「网格本身」和「浮层里多出来的卡图 + caption」两类规则。
   ========================================================================== */
.cs151-othgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin-block: 0.5rem 1.1rem;
}

/* 图鉴号到四位（如 #1024 Terapagos）—— 数字栏靠内容自然撑开（flex:0 0 auto），
   下限与主网格同档（1.75em）。
   🔴 R134：原先写 2.4em 是为了「四位号不挤名字」，但它对**三位号**的 63 个 tile
   同样多占 7px，把 Paldean Wooper / Meowscarada 这类长名直接挤成省略号。
   四位号本身是 auto 宽度、照样撑得开，所以下限收到 1.75em 即可。 */
.cs151-othgrid .cs151-d {
	flex: 0 0 auto;
	min-width: 1.75em;
}

/* R134 · 长名允许两行 —— 与 .cs151-artgrid / #collab-cards 同一做法。
   「151 之外」的名字天然比前 151 长（Paldean Wooper、Meowscarada…），单行放不下；
   两行后 63 个 tile **零截断**。窄屏那套「名称独占整行」的规则不受影响。 */
.cs151-othgrid .cs151-nm {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- 浮层里的卡面（在介绍内容上方；「全图」不裁切）----
   🔴 外层**固定高度**而不是 `max-height`：图是 loading="lazy" 且藏在
   `visibility:hidden` 的浮层里，实测**未解码时 getBoundingClientRect 会是 0×0**
   ⇒ 翻向脚本量出来的 panel.offsetHeight 偏小（实测 137px vs 337px），
   会把浮层翻到空间不足的一侧。固定高度后无论图有没有到位，浮层几何都稳定。*/
.cs151-oiw {
	display: block;
	height: 200px;
	margin: 0 0 0.42rem;
	line-height: 0;
	text-align: center;
}

.cs151-oi {
	display: inline-block;
	width: auto;
	height: 100%;
	max-width: 100%;
	border-radius: 6px;
	background: #f4f2ee;
	box-shadow: 0 1px 3px rgba(37, 37, 35, 0.16);
}

/* ---- 卡名 caption：紧贴卡图，说明展示的是哪一张 ---- */
.cs151-pc {
	display: block;
	margin: 0 0 0.42rem;
	padding-bottom: 0.36rem;
	border-bottom: 1px solid var(--c-rule);
	font-size: 0.7rem;
	line-height: 1.35;
	color: var(--c-soft);
}

.cs151-onote {
	max-width: 68ch;
	margin: 0 0 1.6rem;
	font-size: 0.79rem;
	line-height: 1.55;
	color: var(--c-soft);
}

/* ============================================================================
   R85 · 首屏重排
     · 开门见山的第一段（整页第一句，替掉原来的三段铺垫）
     · CN / JP / EN 图例行
     · 贴片右侧的 TCG 属性符号（名称之后）
     · 浮层里的三档卡数（3 列）+ Top 3 卡名锚点链接
   属性符号本体（.cst 与 11 种 .cst-xxx 的底色 + data-URI SVG）在 tips-types.css，
   由 cs-tips151.php 一起入队；这里只负责「放在贴片里时」的尺寸与对齐。
   ========================================================================== */
.cs151-open {
	max-width: 60ch;
	margin: 0 0 1.1rem;
	font-size: 1.02rem;
	line-height: 1.62;
	color: var(--c-ink);
}

.cs151-lgd {
	max-width: 62ch;
	margin: 0 0 0.8rem;
	font-size: 0.765rem;
	line-height: 1.5;
	color: var(--c-soft);
}

.cs151-lgd b { color: var(--c-ink); font-weight: 700; }

/* 🔴 `margin-left:auto` 把符号推到贴片最右：名称是 flex-shrink:1 且带省略号，
   空间不够时先被收掉，符号始终贴右对齐成一列，八列网格扫起来是一条直线。*/
.cs151-c .cst {
	margin-left: auto;
	width: 0.92em;
	height: 0.92em;
}

/* ---- 三档卡数：3 列，标签在上、数字在下 ---- */
.cs151-p3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.22rem;
	margin-top: 0.44rem;
	padding-top: 0.42rem;
	border-top: 1px solid var(--c-rule);
}

.cs151-p3 > span { display: block; min-width: 0; }

.cs151-p3 b {
	display: block;
	font-size: 0.575rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--c-soft);
}

.cs151-p3 i {
	display: block;
	font-style: normal;
	font-size: 0.83rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

/* ---- Top 3 卡名：每条都是锚点链接，落到该角色文章的 #rank-N ---- */
.cs151-pt3 {
	display: block;
	margin-top: 0.44rem;
	padding-top: 0.42rem;
	border-top: 1px solid var(--c-rule);
}

.cs151-pt3 > b {
	display: block;
	margin-bottom: 0.22rem;
	font-size: 0.575rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-soft);
}

.cs151-pt3 a {
	display: block;
	font-size: 0.735rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-accent);
	text-decoration: none;
}

.cs151-pt3 a:hover { text-decoration: underline; text-underline-offset: 2px; }

.cs151-pt3 a i {
	font-style: normal;
	margin-right: 0.26em;
	color: var(--c-accent2);
	font-variant-numeric: tabular-nums;
}

/* 文章链接紧跟在 Top 3 之后，留一点缝 */
.cs151-pt { margin-top: 0.42rem; }

/* ---- 窄屏（手机 3 列、贴片仅约 100px）：**贴片改两行，名称独占第二行** ----
   3 列时名称只剩约 38px（"Pika…"，实测 135/151 被截断）。把非名称元素全部挤到第一
   行、名称 `flex-basis:100%` 换到第二行独占整宽后，名称可用宽度约 84px，绝大多数
   名字完整显示。
   🔴 只动**行内排布**，不动列数 —— `:nth-child` 的贴边/翻向数学不受影响。*/
@media (max-width: 559px) {
	.cs151-c {
		flex-wrap: wrap;
		gap: 0.22rem 0.26rem;
		padding: 0.4rem 0.44rem;
	}

	/* 🔴 必须限定在 .cs151-c 内：`.cs151-i` 同时也被「分类图例」(
	   ul.cs151-legend > li > i.cs151-i) 当色块复用，裸写 `.cs151-i{order:1}`
	   会把图例的圆点从行首推到行尾（手机端实测 i.left=286 / b.left=30），
	   与桌面端「圆点在前」的同一组件表现不一致。贴片里才是要重排的那个。*/
	.cs151-c .cs151-i { order: 1; }
	.cs151-d { order: 2; min-width: 1.5em; }
	.cs151-c .cst { order: 3; margin-left: auto; width: 0.82em; height: 0.82em; }
	.cs151-nm {
		order: 4;
		flex: 0 0 100%;
		max-width: 100%;
	}

	.cs151-othgrid .cs151-d { min-width: 2em; }
}

/* ============================================================================
   断点
   🔴 列数写死，且:nth-child 的贴边规则必须与列数**同步改**，否则首末列浮层会出屏
   ========================================================================== */
@media (min-width: 560px) {
	.cs151-grid,
	.cs151-othgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cs151-c:nth-child(3n + 1) .cs151-p { left: 50%; transform: translateX(-50%); }
	.cs151-c:nth-child(3n) .cs151-p { left: 50%; right: auto; transform: translateX(-50%); }
	.cs151-c:nth-child(3n + 1) .cs151-p::after,
	.cs151-c:nth-child(3n) .cs151-p::after { display: block; }

	.cs151-c:nth-child(4n + 1) .cs151-p { left: 0; transform: none; }
	.cs151-c:nth-child(4n) .cs151-p { left: auto; right: 0; transform: none; }
	.cs151-c:nth-child(4n + 1) .cs151-p::after,
	.cs151-c:nth-child(4n) .cs151-p::after { display: none; }

	.cs151-c:nth-child(-n + 3) .cs151-p { top: auto; bottom: calc(100% + 9px); }
	.cs151-c:nth-child(-n + 3) .cs151-p::after { top: auto; bottom: -5px; transform: rotate(45deg); }
	.cs151-c:nth-child(-n + 4) .cs151-p { top: calc(100% + 9px); bottom: auto; }
	.cs151-c:nth-child(-n + 4) .cs151-p::after { top: -5px; bottom: auto; transform: rotate(-135deg); }

	.cs151-feat { grid-template-columns: 1fr 1fr; }
	.cs151-tg { grid-template-columns: 1fr 1fr; }
	.cs151-tg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	.cs151-grid,
	.cs151-othgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

	.cs151-c:nth-child(4n + 1) .cs151-p { left: 50%; transform: translateX(-50%); }
	.cs151-c:nth-child(4n) .cs151-p { left: 50%; right: auto; transform: translateX(-50%); }
	.cs151-c:nth-child(4n + 1) .cs151-p::after,
	.cs151-c:nth-child(4n) .cs151-p::after { display: block; }
	.cs151-c:nth-child(-n + 4) .cs151-p { top: auto; bottom: calc(100% + 9px); }
	.cs151-c:nth-child(-n + 4) .cs151-p::after { top: auto; bottom: -5px; transform: rotate(45deg); }

	.cs151-c:nth-child(6n + 1) .cs151-p { left: 0; transform: none; }
	.cs151-c:nth-child(6n) .cs151-p { left: auto; right: 0; transform: none; }
	.cs151-c:nth-child(6n + 1) .cs151-p::after,
	.cs151-c:nth-child(6n) .cs151-p::after { display: none; }
	.cs151-c:nth-child(-n + 6) .cs151-p { top: calc(100% + 9px); bottom: auto; }
	.cs151-c:nth-child(-n + 6) .cs151-p::after { top: -5px; bottom: auto; transform: rotate(-135deg); }
}

@media (min-width: 1200px) {
	.cs151-grid,
	.cs151-othgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

	.cs151-c:nth-child(6n + 1) .cs151-p { left: 50%; transform: translateX(-50%); }
	.cs151-c:nth-child(6n) .cs151-p { left: 50%; right: auto; transform: translateX(-50%); }
	.cs151-c:nth-child(6n + 1) .cs151-p::after,
	.cs151-c:nth-child(6n) .cs151-p::after { display: block; }
	.cs151-c:nth-child(-n + 6) .cs151-p { top: auto; bottom: calc(100% + 9px); }
	.cs151-c:nth-child(-n + 6) .cs151-p::after { top: auto; bottom: -5px; transform: rotate(45deg); }

	.cs151-c:nth-child(8n + 1) .cs151-p { left: 0; transform: none; }
	.cs151-c:nth-child(8n) .cs151-p { left: auto; right: 0; transform: none; }
	.cs151-c:nth-child(8n + 1) .cs151-p::after,
	.cs151-c:nth-child(8n) .cs151-p::after { display: none; }
	.cs151-c:nth-child(-n + 8) .cs151-p { top: calc(100% + 9px); bottom: auto; }
	.cs151-c:nth-child(-n + 8) .cs151-p::after { top: -5px; bottom: auto; transform: rotate(-135deg); }
}

/* 视口很矮（手机横屏 / 小笔记本）：
   浮层 = 200px 卡图 + 约 200px 文字 ≈ 400px，加上 111px 的 fixed 页头就放不下了。
   把卡图压到 132px，浮层降到约 330px。
   （不用 max-height + overflow：::after 箭头画在盒子外面，一加 overflow 就被裁掉。）*/
@media (max-height: 620px) {
	.cs151-oiw { height: 132px; }
}

/* 触屏（无 hover）：只在聚焦时显示，避免首点被浮层吃掉 */
@media (hover: none) {
	.cs151-c:hover .cs151-p { opacity: 0; visibility: hidden; }
	.cs151-c:focus-within .cs151-p { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
	.cs151-p { transition: none; }
}

/* ============================================================================
   JS 翻向（R72）
   浮层默认朝上；靠 :nth-child 只特判了「网格第一行」。徽章滚到视口顶部附近时，
   朝上的浮层会被 fixed 页头裁掉，而 CSS 检测不到碰撞 —— 由 cs-tips151.php 在
   wp_footer 打印的一小段脚本量一次上下空间，打上 .cs151-down / .cs151-up。

   🔴 必须放在**所有断点之后**：这些选择器与 :nth-child 规则同为 (0,3,0)，
      靠源序取胜；一旦被挪到断点前面就会失效。
   ========================================================================== */
.cs151-c.cs151-down .cs151-p {
	top: calc(100% + 9px);
	bottom: auto;
}

.cs151-c.cs151-down .cs151-p::after {
	top: -5px;
	bottom: auto;
	transform: rotate(-135deg);
}

.cs151-c.cs151-up .cs151-p {
	top: auto;
	bottom: calc(100% + 9px);
}

.cs151-c.cs151-up .cs151-p::after {
	top: auto;
	bottom: -5px;
	transform: rotate(45deg);
}


/* ============================================================================
   R86 · illustrator section (The illustrators behind the Chinese cards)

   Why almost nothing new is needed
     The grid itself reuses `.cs151-othgrid`, so it inherits
       ① the exact column counts (3 / 4 / 6 / 8 at 0 / 560 / 900 / 1200px)
       ② the edge-flip and first-row-down rules, which are written as
          `.cs151-c:nth-child(...) .cs151-p` — i.e. container-agnostic
       ③ the hover/flip behaviour of tips151-flip.js, whose selector is
          already `.cs151-grid, .cs151-othgrid`
       ④ the wpautop `<br>` repair in cs-tips151.php, whose entry test is
          already satisfied by the page's other grids
     All that is added here is: the badge tweaks an illustrator list needs,
     and the styling for the per-illustrator card list below it.
   ========================================================================== */

/* card counts run to three digits — reserve room for them */
.cs151-artgrid .cs151-d {
	flex: 0 0 auto;
	min-width: 2.1em;
}

/* illustrator names are long ("Kedamahadaitai Yawarakai") — allow two lines */
.cs151-artgrid .cs151-nm {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* R94 · 庆典/联名网格：名称允许两行，但**每块都预留两行的高度**。
   否则「整行名字都短」的那一行会比邻行矮一整行，网格出现一个凹口
   （实测桌面 8 块 30px vs 其余 92 块 45px；手机 9 块 45px vs 91 块 59px）。
   只作用于庆典板块：锚在 `#collab-cards` 上按「后续兄弟」选，因为
   `.cs151-artgrid` 这个类被 #popular-trainers 等网格共用，不能全局改
   （那里名字短、30px 的紧凑节奏是对的）。
   2.3em = 2 × 1.15 × 0.775rem，正好等于两行文本的高度。*/
#collab-cards ~ * .cs151-nm {
	min-height: 2.3em;
}

/* ---------------- one block per illustrator: bio + price-ordered card list --- */
.cs-art {
	max-width: 74ch;
	margin: 0 0 1.3rem;
}

.cs-art-h {
	margin: 0 0 0.24rem;
	font-size: 0.97rem;
	line-height: 1.3;
	color: var(--c-ink);
}

.cs-art-h em {
	font-style: normal;
	font-weight: 700;
	color: var(--c-accent2);
	font-variant-numeric: tabular-nums;
}

.cs-art-h strong { font-weight: 700; }

.cs-art-h span {
	margin-left: 0.4rem;
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--c-soft);
	white-space: nowrap;
}

.cs-art p.b {
	margin: 0 0 0.42rem;
	font-size: 0.815rem;
	line-height: 1.5;
	color: #4a4a46;
}

.cs-art-l {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--c-rule);
}

.cs-art-l li {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	padding: 0.22rem 0;
	border-bottom: 1px solid var(--c-rule);
	font-size: 0.8rem;
	line-height: 1.35;
}

.cs-art-l .p {
	flex: 0 0 auto;
	min-width: 5.4em;
	font-weight: 700;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
}

.cs-art-l .c {
	flex: 1 1 auto;
	min-width: 0;
}

.cs-art-l .s {
	color: var(--c-soft);
}

.cs-art-more {
	margin: 0.28rem 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--c-soft);
}

/* narrow phones: the price gets its own line so card names keep their width */
@media (max-width: 420px) {
	.cs-art-l li { display: block; }
	.cs-art-l .p { display: block; min-width: 0; }
}

/* ---- R89：#86 上「See every illustrator, card by card →」与画师页返回链接 ---- */
.cs151-more {
	max-width: 74ch;
	margin: 0.55rem 0 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.cs151-more a {
	font-weight: 600;
	color: var(--c-accent);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
}

.cs151-more a:hover,
.cs151-more a:focus-visible {
	border-bottom-color: var(--c-accent);
}

/* ============================================================================
   R94 · 中间地带统一 / 分类卡三列 / 折叠区

   ① 为什么需要 .cs151-vars
      「Beyond the first 151 / Top 10 / Browse by topic」这一带**不在** `<div class="cs151">`
      容器里（它们是 entry-content 的直接子元素），而设计令牌是定义在 `.cs151.cs151` 上的。
      ⇒ 令牌未定义 ⇒ `border: 1px solid var(--c-rule)` 这条简写在计算值阶段整条失效（IACVT），
        实测贴片 border:0px none、background:rgba(0,0,0,0)、color:rgb(29,29,31)；
        而同一个 151 网格是 border:1px solid rgb(237,234,226)、背景 rgb(252,251,248)。
      这个类**只补令牌、不带任何几何**，所以加在谁身上都不会改变它的盒模型。

   ② 为什么标题要加 .alignwide
      这些标题宽 645px、左边缘 310px；它们下面的网格带 alignwide ⇒ 宽 1165px、左边缘 50px。
      两者差 260px，标题看着像被缩进了一段。加 .alignwide 后与网格同宽同左（实测 50 / 1165）。
   ========================================================================== */
/* 🔴 R94c：除了内容侧显式标注的 .cs151-vars，还把令牌直接挂在**区块自身的类**上：
   实测 #86 上还有两处「令牌岛」——`ol.cs151-rec` 与 `div.cs151-tg`（+ 它们的 9 张卡），
   它们是 entry-content 的直属子节点，取不到 .cs151.cs151 上的令牌 ⇒
     · .cs151-rec li        border-bottom: 1px solid var(--c-rule)  → 整条简写失效，条目无分隔线
     · .cs151-rec li::before color: var(--c-accent2)                → 回退成 ink 黑，不是柔红 #b84a44
     · .cs151-rx            color: var(--c-soft)                    → 回退成 ink 黑，说明行与标题行同色
     · .cs151-tc            border/radius 全失效                    → 9 张分类卡没有边框，读不出「卡片」
     · .cs151-tc h3 span    color: var(--c-soft)                    → 卡内计数与标题同色
     · .cs151-tm            border-top 失效；.cs151-tm a 的 accent 也失效
   挂到类上以后，这两个块无需内容侧加类即可自带令牌。（类名选择器与 .cs151-vars 同权重、同声明，
   重复定义无副作用。） */
.cs151-vars,
.cs151-rec,
.cs151-tg {
	--c-ink: #252523;
	--c-soft: #8a8880;
	--c-accent: #8b1a1a;
	--c-accent2: #b84a44;
	--c-rule: #edeae2;
	--c-bg: #fcfbf8;
}

/* --- 分类卡：桌面 3 列（9 张正好 3×3；2 列时末行只剩 1 张、各卡高低也不齐） --- */
@media (min-width: 900px) {
	.cs151-tg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================================
   R94 · 折叠区：默认收起，点标题向下展开
   用原生 <details>/<summary>，不依赖 JS；JS 只补「锚点命中时自动展开」。
   🔴 summary 里那个 h2 只去外边距，**字号一个像素都不动**。
   ========================================================================== */
/* ============================================================================
   R134 · 折叠区与主网格对齐（Beyond the first 151 展开后名称被截断）
   ----------------------------------------------------------------------------
   实测（桌面 1440）：
     主网格 .cs151-grid      = 1325px / left 50 / 8 列 × 160px ⇒ 名称完整
     #beyond 折叠区          =  645px / left 390/ 8 列 ×  75px ⇒ 名称被压到 0 宽、全部省略号
   原因：折叠区是 entry-content 的**直接子元素**，受 WP 受限布局的
     `max-width: var(--wp--style--global--content-size)`（=645px）约束并居中；
   而 R94 挂在它**内部**网格/标题上的 .alignwide 只在「.is-layout-constrained 的
   直接子元素」上生效 ⇒ 对折叠区里的元素**无效**。
   （另两个折叠区 #collab-more / #other-cards 挂在 .cs151.alignwide 容器里，
     取不到那条约束，所以一直是 1325/50 —— 这也解释了「只有 Beyond 看着不对」。）
   修法：把折叠区自己抬到 wide 宽度，与 .cs151.alignwide 同宽同左。
   🔴 只动宽度与左边缘：字号 / 圆角 / 颜色 / 列数（:nth-child 数学）一个都不动。
   ========================================================================== */
.cs151-fold {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
}

/* 折叠区里的引言仍走「阅读栏」：网格全宽、文字窄栏，与主板块 .cs151-open 的 60ch
   同一档；否则展开后两段说明会横跨 1325px。 */
.cs151-fold > p {
	max-width: 62ch;
	margin-inline: 0 auto;
}

.cs151-fold {
	margin-block: 0.5rem 1.1rem;
	scroll-margin-top: 130px; /* 页头是 fixed，锚点落点要避开它 */
}

.cs151-fold > summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.78rem 0;
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
	cursor: pointer;
	list-style: none;
}

.cs151-fold > summary::-webkit-details-marker { display: none; }
.cs151-fold > summary::marker { content: ""; }

.cs151-fold > summary:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

.cs151-fold > summary h2 { margin: 0; }

.cs151-fold-n {
	flex: 0 0 auto;
	padding: 0.1rem 0.44rem;
	border: 1px solid #e8cbc9;
	border-radius: 999px;
	background: #fbf4f3;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-accent);
	white-space: nowrap;
}

/* 右侧箭头：收起朝下、展开朝上 */
.cs151-fold-i {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	margin-left: auto;
	border-right: 2px solid var(--c-soft);
	border-bottom: 2px solid var(--c-soft);
	transform: translateY(-0.18em) rotate(45deg);
	transition: transform 0.15s ease;
}

.cs151-fold[open] > summary .cs151-fold-i { transform: translateY(0.18em) rotate(-135deg); }
.cs151-fold[open] > summary { border-bottom-color: transparent; }
.cs151-fold > .cs151-othgrid { margin-block: 1rem 0; }

@media (prefers-reduced-motion: reduce) {
	.cs151-fold-i { transition: none; }
}

/* ============================================================================
   R94 · 中间地带的文字块跟着标题一起贴左
   ----------------------------------------------------------------------------
   这些元素是 entry-content 的直接子元素；标题加了 .alignwide 后贴到左边 50px，
   但 <ol class="cs151-rec"> 与两个 <p> 仍是「受限布局居中」的：
     OL.cs151-rec     307 → 50
     P（All 29 articles…）  390 → 50
     P（Browse the full library…） 390 → 50
   原因是 WordPress 受限布局给子元素下了 `margin-inline: auto !important`
   （block-library/style.css 的 `.is-layout-constrained > :where(...)`），
   所以这里只能用同权重的 !important 把它拉回来。
   🔴 只挪位置：max-width / 阅读行宽 / 字号 / 颜色一个都不动。
   `h2.cs151-h ~ p` 只命中这两个 <p>（页首那段 .cs151-open 在标题之前，不受影响）。
   ========================================================================== */
.cs151-rec,
h2.cs151-h ~ p {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ============================================================================
   R94c · 中间地带的两段「板块引言」回到引言的字号
   ----------------------------------------------------------------------------
   实测：这两段 <p> 没有任何字号声明，于是继承了站点正文的 21.7632px，
   而它们的上级标题 .cs151-h 是 22.72px —— 两者几乎一样大，引言读起来像第二个标题。
   这里把它们压到 .cs151-lead 同一档（0.94rem = 15.04px，正文色 #4a4a46），
   于是层次重新变成：标题 22.72 → 引言 15.04 → 卡片 13.04 / 说明 12.64。
   🔴 选择器仍是 `h2.cs151-h ~ p`：只命中 entry-content 直属、且排在
      .cs151-h 之后的那两段；新「庆典卡」板块的引言在 <div class="cs151"> 里
      （不同父节点），不受影响。
   ========================================================================== */
h2.cs151-h ~ p {
	font-size: 0.94rem;
	line-height: 1.62;
	color: #4a4a46;
}