/* ============================================================================
   CardSpicy · 画师详情页（/card-illustrators/<slug>/）
   R107 · 由 mu-plugin `cs-artist-pages.php` 只在画师页入队。
   视觉语言与 #86（tips151.css）/ /card-illustrators/ 一致：accent #8B1A1A、
   细规则线、折叠块 .cs151-fold。所有变量都在本文件里自带声明 —— 文章/页面
   作用域读不到 #86 里的 .cs151.cs151 定义。
   ========================================================================== */

.csa-page {
	--c-accent: #8b1a1a;
	--c-ink: #252523;
	--c-soft: #6d6a64;
	--c-rule: #e6e6e6;
	--c-bg: #fff;
	/* 🔴 卡面网格要宽（1440 屏上 9 列），但正文不能跟着拉长。
	   本页 wrapper 带 `alignwide`（与 #86 的 `cs151 alignwide` 同惯例）→ 1325px；
	   正文类元素各自压回 --c-col，网格/表格/折叠块吃满宽。 */
	--c-col: 46rem;
}
/* 兜底：万一 alignwide 被主题改动，仍强制站到 wide 宽（核心规则用 :where()，特异性为 0） */
.entry-content > .csa-page {
	max-width: var(--wp--style--global--wide-size, 1340px);
}
/* 🔴 主题把 post-title 压在 645px 内容列里居中，本页正文却是 alignwide（1325px）⇒
   标题左边缘比正文右缩 340px，像被误缩进。统一到 wide 左边缘。
   只挂在 body.cs-artist-page 下（mu-plugin 输出）——否则这条会外溢到全站每一页。 */
body.cs-artist-page .wp-block-post-title {
	max-width: var(--wp--style--global--wide-size, 1340px);
}
.csa-page > p,
.csa-page > h2,
.csa-page > h3,
.csa-page > .csa-nav,
.csa-page > .csa-eraix,
.csa-page > .csa-filter,
.csa-page > .csa-src,
.csa-page > .csa-tl { max-width: var(--c-col); }

/* ---------------- 开头 ---------------- */
.csa-lede {
	max-width: 46rem;
	margin: .2rem 0 1.3rem;
	font-size: 1.06rem;
	line-height: 1.62;
}

.csa-lede b { color: var(--c-accent); }

/* ---------------- 概览数字 ---------------- */
.csa-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 2rem;
	max-width: var(--c-col);
	background: #fff;
	border: 1px solid var(--c-rule);
	border-radius: 10px;
	overflow: hidden;
}

/* 🔴 分隔线用**每格自带的阴影**画，不用「容器底色 + 1px gap」。
   原来的写法在最后一行不满时，右侧空轨会把容器底色露出来 —— 实测 9 个指标排成
   4+4+1，最后一行右边三格是一块灰方块。改成白底 + 单元格阴影后，空轨是白的，
   贴边的阴影被 overflow:hidden 连同容器圆角一起裁掉，不留双线。 */
.csa-stat {
	padding: .78rem .9rem .82rem;
	box-shadow: 1px 0 0 var(--c-rule), 0 1px 0 var(--c-rule);
}

.csa-stat b {
	display: block;
	font-size: 1.28rem;
	line-height: 1.12;
	font-weight: 700;
	color: var(--c-accent);
	font-variant-numeric: tabular-nums;
}

.csa-stat span {
	display: block;
	margin-top: .18rem;
	font-size: .745rem;
	line-height: 1.3;
	color: var(--c-soft);
}

@media (min-width: 560px) {
	/* 🔴 列数由渲染器按**实际指标数**直接下发整数（--csa-cols）。
	   固定 4 列时，只有 3 个指标的页（如 kouki-yanagihara）右侧会空出一条轨道 + 一段容器边框，
	   看着像「少了一块」；指标数 < 4 时按实际数排，行就永远排满。
	   🔴 不要把 min()/var() 塞进 repeat() 的计数位 —— 那是会**静默失效**的写法。 */
	.csa-stats { grid-template-columns: repeat(var(--csa-cols, 4), minmax(0, 1fr)); }
}

@media (min-width: 900px) {
	/* 🔴 列数由渲染器按**实际指标数**直接下发整数（--csa-cols）。
	   固定 4 列时，只有 3 个指标的页（如 kouki-yanagihara）右侧会空出一条轨道 + 一段容器边框，
	   看着像「少了一块」；指标数 < 4 时按实际数排，行就永远排满。
	   🔴 不要把 min()/var() 塞进 repeat() 的计数位 —— 那是会**静默失效**的写法。 */
	.csa-stats { grid-template-columns: repeat(var(--csa-cols, 4), minmax(0, 1fr)); }
}

/* ---------------- 章节标题 ---------------- */
.csa-page h2 {
	margin: 2.3rem 0 .7rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--c-rule);
	font-size: 1.2rem;
	line-height: 1.3;
}

.csa-page h2:first-of-type { border-top: 0; padding-top: 0; }

.csa-page h3 { margin: 0; }

.csa-page p { max-width: 46rem; }

.csa-note,
.csa-count {
	font-size: .83rem;
	line-height: 1.5;
	color: var(--c-soft);
}

.csa-note { max-width: 46rem; }

/* 空态：英/日/早期促销三层都无卡（剔除 Pocket 后的真实边界）。给一块可读的说明，
   而不是空网格 + 筛不出东西的筛选框。视觉上比 .csa-note 稍重，因为它替代了整个区块。 */
.csa-empty {
	max-width: 46rem;
	margin: 0 0 1.6rem;
	padding: .9rem 1.05rem;
	font-size: .885rem;
	line-height: 1.6;
	color: var(--c-ink);
	background: #faf9f7;
	border: 1px dashed var(--c-rule);
	border-radius: 10px;
}

.csa-count { font-variant-numeric: tabular-nums; }

/* ---------------- 时间线 ---------------- */
.csa-tl {
	margin: .9rem 0 0;
	padding: 0;
	list-style: none;
	max-width: 46rem;
}

.csa-tl li {
	position: relative;
	margin: 0 0 .6rem;
	padding-left: 1.05rem;
	font-size: .93rem;
	line-height: 1.55;
}

.csa-tl li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .58em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
}

.csa-tl b {
	font-variant-numeric: tabular-nums;
	margin-right: .35rem;
}

/* ---------------- 折叠（与 #86 同构） ---------------- */
.csa-page .cs151-fold { margin: 0 0 .9rem; scroll-margin-top: 130px; }

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

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

.csa-page .cs151-fold-t { flex: 1 1 auto; margin: 0; }

.csa-page .cs151-fold-t h3 {
	font-size: 1.02rem;
	line-height: 1.3;
	margin: 0;
}

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

.csa-page .cs151-fold-i {
	flex: 0 0 auto;
	width: .6em;
	height: .6em;
	border-right: 2px solid #999;
	border-bottom: 2px solid #999;
	transform: translateY(-.18em) rotate(45deg);
	transition: transform .15s ease;
}

.csa-page .cs151-fold[open] > summary .cs151-fold-i {
	transform: translateY(.18em) rotate(-135deg);
}

.csa-page .cs151-fold[open] > summary { border-bottom-color: transparent; }

.csa-page .cs-lf-body { margin-top: .9rem; max-width: 52rem; }

.csa-era-yr {
	margin: 0 0 .5rem;
	font-size: .8rem;
	color: var(--c-soft);
	font-variant-numeric: tabular-nums;
}

/* ---------------- 套牌速览（一行串） ---------------- */
.csa-setline {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .45rem;
	margin: 0 0 .9rem;
	padding: 0;
	list-style: none;
	font-size: .78rem;
}

.csa-setline li {
	padding: .1rem .45rem;
	border: 1px solid var(--c-rule);
	border-radius: 999px;
	color: #4a4a46;
	background: #fcfcfc;
}

.csa-setline b { color: var(--c-accent); }

/* ---------------- 表 ---------------- */
/* 🔴 站点插件 `cs-table-scroll.php`（v2.0.0）会给正文里每张表**再套一层**
   `<div class="cs-tscroll">`，并在 wp_head 里内联补一条
       `.cs-tscroll > table { margin-inline:auto; max-width:var(--wp--style--global--content-size,100%) }`
   —— 那条是为「文章里的窄表保持 645px 居中」补的（见它自己第 53–56 行的注释）。
   与画师页「满宽陈列」直接冲突：实测 SC 表被压回 645px、左边缘从 50 挪到 390。
   ⇒ 在本页范围内解开宽度与居中。横滚仍由它那一层负责（它自带 overflow-x:auto）。
   只写 .csa-page 作用域，绝不去改插件本身 —— 全站文章的表还得靠它。 */
.csa-page .cs-tscroll { max-width: none; }
.csa-page .cs-tscroll > table {
	max-width: none;
	margin-inline: 0;
}

.csa-tscroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: .4rem 0 1rem;
}

.csa-t {
	width: 100%;
	border-collapse: collapse;
	font-size: .855rem;
	line-height: 1.4;
	margin-inline: auto;
	/* 表格跟折叠块一起吃 alignwide 的满宽；溢出由 .csa-tscroll 横滚兜住。
	   早先这里卡 core 的 content-size（645px），在 1325px 的页宽里右边空一大片。 */
	max-width: none;
}

.csa-t th {
	text-align: left;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-soft);
	border-bottom: 1px solid var(--c-rule);
	padding: .35rem .5rem;
	white-space: nowrap;
}

.csa-t td {
	border-bottom: 1px solid #f1f1f1;
	padding: .32rem .5rem;
	vertical-align: top;
}

.csa-t td:nth-child(2) {
	color: var(--c-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 🔴 列序（render.py 定的）：1 Card · 2 Printing · 3 No. · 4 PSA 10 · 5 Ungraded · 6 Shop
   —— 早先这条按 R114 的 4 列（Card|Set|Price|…）写，右对齐打在了 3/4 上，
   于是 6 列以后「No.」被右推、真正的「Ungraded」反而左对齐。列数改过就必须重算。 */
.csa-t td:first-child { white-space: normal; }        /* 卡名允许折行，别撑宽表格 */
.csa-sc td:nth-child(3) { font-variant-numeric: tabular-nums; white-space: nowrap; }
.csa-sc td:nth-child(4),
.csa-sc td:nth-child(5) {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.csa-sc td:nth-child(6) { white-space: nowrap; }

.csa-t tbody tr:hover { background: #fbf7f7; }

/* ---------------- 过滤框 ---------------- */
.csa-filter {
	display: flex;
	gap: .5rem;
	align-items: center;
	margin: .2rem 0 1rem;
}

.csa-filter input {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 22rem;
	padding: .45rem .6rem;
	border: 1px solid var(--c-rule);
	border-radius: 8px;
	font-size: .88rem;
}

.csa-filter input:focus {
	outline: 2px solid var(--c-accent);
	outline-offset: 1px;
	border-color: var(--c-accent);
}

.csa-filter span { font-size: .8rem; color: var(--c-soft); }

.csa-t tr.is-hidden { display: none; }

/* ---------------- 来源 ---------------- */
.csa-src {
	max-width: 46rem;
	margin: .3rem 0 0;
	padding-left: 1.1rem;
	font-size: .83rem;
	line-height: 1.55;
	color: var(--c-soft);
}

.csa-src li { margin: .25rem 0; }

/* ---------------- 页内导航 ---------------- */
.csa-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .9rem;
	align-items: baseline;
	margin: 0 0 1.4rem;
	font-size: .84rem;
}

.csa-nav a { color: var(--c-accent); }

.csa-nav .csa-sep { color: var(--c-soft); }

/* ---------------- 相近画师 ---------------- */
.csa-near {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .85rem;
}

.csa-near li {
	padding: .28rem .6rem;
	border: 1px solid var(--c-rule);
	border-radius: 999px;
}

.csa-near a { text-decoration: none; }
.csa-near a:hover { text-decoration: underline; }

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

/* ============================================================================
   R96 · 卡面网格（画师页的卡牌收录体系）
   每张卡一个 <figure>，配官方卡面图；无官方图的卡用同尺寸占位块如实标注。
   图片统一 245x337；网格用 auto-fill，桌面约 8-9 列，手机 2 列。
   ========================================================================== */

.csa-page .csa-sub {
	margin: 2.4rem 0 .5rem;
	font-size: 1.14rem;
	line-height: 1.3;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--c-rule);
}
.csa-page .csa-sub .csa-soft { font-weight: 400; font-size: .84rem; }
.csa-soft { color: var(--c-soft); font-weight: 400; }

/* 时代索引 */
.csa-eraix {
	margin: .6rem 0 1.1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1rem;
	font-size: .82rem;
	color: var(--c-soft);
}
.csa-eraix li::before { content: "·"; margin-right: .35rem; color: var(--c-accent); }
.csa-eraix b { color: var(--c-ink); font-weight: 600; }

/* 时代折叠块 */
.csa-page .csa-era { margin: .35rem 0; border-top: 1px solid var(--c-rule); }
.csa-page .csa-era > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: .58rem 0;
}
.csa-page .csa-era > summary::-webkit-details-marker { display: none; }
.csa-page .csa-era > summary::marker { content: ""; }
.csa-page .csa-era-t {
	margin: 0;
	font-size: .98rem;
	font-weight: 600;
	color: var(--c-ink);
}
.csa-page .csa-era > summary p { margin: 0; display: flex; align-items: center; gap: .6rem; }
.csa-page .csa-era-n { font-size: .78rem; color: var(--c-soft); white-space: nowrap; }
.csa-page .csa-era-i {
	display: inline-block;
	width: .5rem;
	height: .5rem;
	border-right: 1.5px solid var(--c-soft);
	border-bottom: 1.5px solid var(--c-soft);
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .18s ease;
}
.csa-page .csa-era[open] > summary .csa-era-i { transform: rotate(225deg) translate(-1px, -1px); }
.csa-page .csa-era[open] > summary { border-bottom: 1px solid var(--c-rule); }
.csa-era-b { padding-bottom: .6rem; }
.csa-era-yr { margin: .7rem 0 .3rem; font-size: .78rem; color: var(--c-soft); letter-spacing: .02em; }

/* 卡面网格 */
.csa-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
	gap: 15px 12px;
	padding: .35rem 0 1.1rem;
}
.csa-cf {
	margin: 0;
	min-width: 0;
	content-visibility: auto;
	contain-intrinsic-size: auto 210px;
}
.csa-cf img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	background: #f4f1ec;
	border: 1px solid var(--c-rule);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.csa-cf figcaption { margin-top: .4rem; font-size: .72rem; line-height: 1.38; }
.csa-cf figcaption b {
	display: block;
	font-weight: 600;
	color: var(--c-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.csa-cf figcaption > span { display: block; color: var(--c-soft); }
.csa-cf figcaption em.csa-cno { display: block; font-style: normal; color: #a9a29a; font-size: .68rem; }

/* 语言徽标 */
.csa-cl {
	display: inline-block;
	font-style: normal;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
	padding: 0 .3rem;
	border-radius: 3px;
	margin-bottom: .2rem;
	color: #fff;
	background: #8b8b8b;
}
.csa-cl-en { background: #4a6f8a; }
.csa-cl-ja { background: #8b1a1a; }
.csa-cl-zh-tw { background: #a06a1b; }

/* 简中同卡标记 */
.csa-csc {
	display: inline-block;
	margin-top: .22rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: #7a5a12;
	background: #f6eed6;
	border: 1px solid #e6d9ae;
	border-radius: 3px;
	padding: 0 .28rem;
}

/* 无官方图的占位块 */
.csa-cf-x .csa-cph {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 245 / 337;
	border: 1px dashed #cfc9bf;
	border-radius: 6px;
	background: repeating-linear-gradient(45deg, #faf8f5, #faf8f5 8px, #f2eee8 8px, #f2eee8 16px);
}
.csa-cf-x .csa-cph > span {
	font-size: .62rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #a9a29a;
}

/* 筛选 */
.csa-filter { display: flex; align-items: center; gap: .7rem; margin: .3rem 0 .9rem; }
.csa-cf.is-hidden { display: none; }
.csa-era.is-empty { display: none; }
.csa-shop a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }

/* 手机：两列 */
@media (max-width: 640px) {
	.csa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
	.csa-cf figcaption { font-size: .68rem; }
	.csa-page .csa-era > summary { gap: .5rem; }
}

/* 简中表：卡面工艺标签与卡号 */
.csa-var {
	display: inline-block;
	font-style: normal;
	font-size: .68rem;
	line-height: 1.5;
	color: #7a5a12;
	background: #f8f2e2;
	border: 1px solid #eadfc0;
	border-radius: 3px;
	padding: 0 .25rem;
	margin-left: .3rem;
	vertical-align: 1px;
}
.csa-no { font-variant-numeric: tabular-nums; color: #6d6a64; white-space: nowrap; }
.csa-buy {
	color: #8b1a1a !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

/* ============================================================================
   索引页 /card-illustrators/（#1549）· 画师条目 → 详情页的入口链接
   `.cs-art-*` 的原样式住在全站共享的 tips151.css 里（#86 也在用）—— 不往那个文件加东西。
   这里只补一个「标题可点」的新类，靠本插件的按需入队挂在索引页 body.cs-artist-hub 下。
   视觉上保持与原来完全一致（继承颜色），只多一条 hover 下划线，让人知道能点。
   ========================================================================== */
body.cs-artist-hub .cs-art-go {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
body.cs-artist-hub .cs-art-go:hover,
body.cs-artist-hub .cs-art-go:focus-visible {
	border-bottom-color: #8b1a1a;
}
body.cs-artist-hub .cs-art-go:focus-visible { outline: 2px solid #8b1a1a; outline-offset: 2px; }