/* ==========================================================================
   CardSpicy · Card series navigation (Tips family)   v1.7.0   2026-10-06
   作用域：.cs-serif-* 全部关在容器内；H1 / 留白规则一律带 **body.page-id-N 点名**
   （Tips 家族 = #86 ＋ #3192–#3195 ＋ #3702–#3704）。本文件**唯一**改动页面标题（表头）的地方就是下面那条
   （R155 起把 #86 的 H1 表头样式同步到 4 个系列子页 —— 家族六页头部长得一样，
   跨页过渡时大标题才不会跳；家族以外的页面本文件根本不下发）。
   令牌沿用站点系统：accent #8B1A1A / #f5f5f7 / #1d1d1f / Manrope / 宽列变量。

   R155（2026-10-04）新增：
     · 跨页过渡 —— `@view-transition{navigation:auto}`：从 #86 点「One Piece」跳到
       /one-piece-cards/ 时不再白屏闪烁，而是交叉淡入；框条与大标题挂
       `view-transition-name` ⇒ 视觉上**停住不动**，只有下面的内容在换。
       （Chrome 126+ / Safari 18.2+ 原生支持；旧浏览器直接忽略这个 at-rule，照常跳转。）
     · 同页切面板 —— 面板淡入 `@keyframes cs-serif-in`。
     · 两条动画都进 `prefers-reduced-motion` 关闭名单。
   ========================================================================== */

/* R155：跨文档视图过渡（跨页丝滑）。BOTH 两端都在 Tips 家族才会有过渡；
   跳到商品页/分类页时对方没声明 ⇒ 浏览器按普通跳转处理，零副作用。 */
@view-transition { navigation: auto; }
::view-transition-group(cs-serif-bar),
::view-transition-group(cs-serif-title){animation-duration:.34s}
::view-transition-old(root){animation:cs-serif-out .22s ease both}
::view-transition-new(root){animation:cs-serif-in-root .3s ease both}
@keyframes cs-serif-out{to{opacity:0}}
@keyframes cs-serif-in-root{from{opacity:0}}

/* R142c（2026-10-04）：页面大标题（H1）**恢复可见** —— 用户要求 Tips 页最上方要看到标题。
   原 R141/R142 的 sr-only 隐藏规则已撤销（位置/尺寸/裁剪全部还原为常规流内块级元素）。
   🔴 必须带 body.page-id-N 前缀，否则会影响全站文章标题。
   R155（2026-10-04）：口径从「只有 #86」扩到**整个 Tips 家族** —— 用户要求「每个进去都需要
   保留大标题…选择海贼也可以看到上面的导航部分」⇒ 六页头部必须长得一样，否则从 #86 跳到
   /one-piece-cards/ 时大标题会跳一下（跨页过渡就更明显）。家族以外页面本文件不下发，不受影响。
   `view-transition-name` 让这个 H1 在跨页过渡里**保持同一个身份**（交叉淡入而不是消失重现）。 */
body.page-id-86   h1.wp-block-post-title,
body.page-id-3192 h1.wp-block-post-title,
body.page-id-3193 h1.wp-block-post-title,
body.page-id-3194 h1.wp-block-post-title,
body.page-id-3195 h1.wp-block-post-title,
body.page-id-3702 h1.wp-block-post-title,
body.page-id-3703 h1.wp-block-post-title,
body.page-id-3704 h1.wp-block-post-title,
body.page-id-4109 h1.wp-block-post-title,
body.page-id-4112 h1.wp-block-post-title,
body.page-id-4107 h1.wp-block-post-title{position:static!important;width:auto!important;height:auto!important;margin:4px auto 14px!important;padding:0!important;overflow:visible!important;clip-path:none!important;white-space:normal!important;border:0!important;text-align:center;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#1d1d1f;max-width:var(--wp--style--global--wide-size,1340px);view-transition-name:cs-serif-title}

/* R144→R149→R152（2026-10-04）：回收标题上方的多余留白 —— 口径**只限 Tips 家族**。
   实测导航条底 → 标题顶之间有 144px 空白，来源是模板的两处**内联 style**：
     <main style="margin-top:var(--wp--preset--spacing--60)">                  = 70px
     其首个子 group style="padding-top:var(--wp--preset--spacing--60)"         = 70px
   （合计 140px，再加 H1 自身 4px）。内联样式只能用 !important 覆盖。
   现改为「主外边距归零 + 顶部内边距 30px」⇒ 标题落在导航条下方约 34px。

   🔴 归属（用户 10-04 23:20 澄清本人的原意）：
     · **保留**：Tips 聚合页 #86 ＋ 四个系列子页 #3192–#3195 —— 即 Tips 二级导航点进去的那几条。
     · **回到原样**：其余「主页面」（文章页 / About / My-Account / 政策页…）主题内联留白 70+70 原封不动。
   🔴 所以这里**必须用 `body.page-id-N` 精确点名**，不能再写 `body.wp-singular` ——
     R149 的通配口径把全站内容页一并收窄了，本轮按用户口径收回到 Tips 家族。
   🔴 `[style*=…]` 属性选择器仍保留：只命中「确实带那处内联留白」的 main，比裸 `main` 更保守。
     （裸写 body.page-id-N main 会把这几个页主题默认的 margin-top 一并归零 —— 无害但没必要。）
   🔴 第②条仍带 `:first-child`：只改**首个子块**，不动内文里其它区块的间距。
   🔴 新增系列子页时：这里补选择器 ＋ `cs-series-nav.php` 的 `cs_tips_family_ids()` 补 ID（两处必须同步）。
   🔴 改完必须清 CF 边缘（可全站 purge）：边缘那份 HTML 钉着旧 ?ver= 与旧内联值。 */
body.page-id-86 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3192 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3193 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3194 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3195 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3702 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3703 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-3704 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-4109 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-4112 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"],
body.page-id-4107 main#wp--skip-link--target[style*="margin-top:var(--wp--preset--spacing--60)"]{margin-top:0!important}
body.page-id-86 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3192 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3193 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3194 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3195 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3702 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3703 main > .wp-block-group.has-global-padding:first-child,
body.page-id-3704 main > .wp-block-group.has-global-padding:first-child,
body.page-id-4109 main > .wp-block-group.has-global-padding:first-child,
body.page-id-4112 main > .wp-block-group.has-global-padding:first-child,
body.page-id-4107 main > .wp-block-group.has-global-padding:first-child{padding-top:30px!important}

/* R142：旧标题串 `Simplified Chinese Pokémon Card Index` 保留不删 —— 挂在正文末尾（页面靠后），
   视觉隐藏、源码常驻。用 sr-only 手法，因此必须带 body.page-id-86 前缀（否则会伤到别页标题）。 */
body.page-id-86 .cs-serif-legacy{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.cs-serif-bar.alignwide,.cs-serif-panel.alignwide{max-width:var(--wp--style--global--wide-size,1340px);margin-inline:auto}
/* R155：框条在跨页过渡里保持**同一个身份** ⇒ 从 #86 点「One Piece」跳过去时它不闪不动，
   只有下面的正文在换（"选择不同框框时候动画丝滑过度"的实现点）。 */
.cs-serif-bar{margin:18px auto 26px;view-transition-name:cs-serif-bar}
.cs-serif-bar__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.cs-serif-t{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 11px 13px;border:1px solid #e6e6ea;border-radius:12px;background:#fff;text-decoration:none;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.cs-serif-t__ic{display:block;color:#a1a1a6;transition:color .16s ease;margin-bottom:4px}
.cs-serif-t__nm{display:block;font-size:.86rem;font-weight:700;letter-spacing:-.015em;color:#1d1d1f;line-height:1.2}
.cs-serif-t__sub{display:block;font-size:.68rem;font-weight:500;color:#86868b;line-height:1.25}
.cs-serif-t:hover,.cs-serif-t:focus-visible,.cs-serif-t.is-on{border-color:#8B1A1A;background:#fdf7f7;box-shadow:0 2px 12px rgba(139,26,26,.08);outline:none}
.cs-serif-t:hover .cs-serif-t__ic,.cs-serif-t:focus-visible .cs-serif-t__ic,.cs-serif-t.is-on .cs-serif-t__ic{color:#8B1A1A}
.cs-serif-t.is-on .cs-serif-t__nm{color:#8B1A1A}
.cs-serif-bar__note{margin:12px 0 0;font-size:.8rem;color:#86868b}

.cs-serif-panel[hidden]{display:none}
/* R155：切框时面板**淡入**（原来是从 hidden 硬切，视觉上「啪」一下）。
   [data-open] 由 JS 每次切换时重新加上 ⇒ 动画每次都会重跑。 */
.cs-serif-panel[data-open]{animation:cs-serif-fade .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes cs-serif-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cs-serif-card{border:1px solid #e6e6ea;border-radius:14px;background:#fff;padding:24px 28px 26px;box-shadow:0 1px 2px rgba(0,0,0,.02)}
.cs-serif-k{margin:0 0 6px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8B1A1A}
.cs-serif-h{margin:0 0 8px;font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:#1d1d1f;line-height:1.25}
.cs-serif-lead{margin:0 0 18px;font-size:.95rem;line-height:1.65;color:#3a3a3c;max-width:78ch}
.cs-serif-sub{margin:0 0 8px;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#86868b}
.cs-serif-badge{display:inline-block;margin:0 0 14px;padding:3px 10px;border-radius:999px;background:#fdf7f7;border:1px solid #f0d9d9;color:#8B1A1A;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.cs-serif-list{margin:0 0 18px;padding:0 0 0 20px;font-size:.9rem;line-height:1.75;color:#3a3a3c}
.cs-serif-note{margin:0 0 18px;padding-left:12px;border-left:3px solid #ececf0;font-size:.83rem;line-height:1.6;color:#86868b;max-width:78ch}
.cs-serif-prods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}
.cs-serif-prod{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid #ececf0;border-radius:12px;background:#fafafa;text-decoration:none;transition:border-color .16s ease,background-color .16s ease}
.cs-serif-prod:hover{border-color:#8B1A1A;background:#fdf7f7}
.cs-serif-prod img{flex:0 0 auto;width:62px;height:83px;object-fit:contain;background:#fff;border-radius:6px;border:1px solid #ececf0}
.cs-serif-prod__nm{display:block;font-size:.88rem;font-weight:700;color:#1d1d1f;line-height:1.25;margin-bottom:4px}
.cs-serif-prod__mt{display:block;font-size:.75rem;color:#86868b;line-height:1.4;margin-bottom:5px}
.cs-serif-prod__pr{display:block;font-size:.9rem;font-weight:700;color:#8B1A1A}
.cs-serif-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}
.cs-serif-branch{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid #e6e6ea;border-radius:10px;background:#fff;text-decoration:none;transition:border-color .16s ease}
.cs-serif-branch:hover{border-color:#8B1A1A}
.cs-serif-branch__nm{font-size:.85rem;font-weight:700;color:#1d1d1f}
.cs-serif-branch__ct{font-size:.72rem;color:#86868b}
.cs-serif-cta{display:inline-block;padding:10px 18px;border-radius:9px;background:#8B1A1A;color:#fff;font-size:.875rem;font-weight:700;text-decoration:none;transition:background-color .16s ease}
.cs-serif-cta:hover{background:#6f1414;color:#fff}
.cs-serif-ctarow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cs-serif-cta2{display:inline-block;padding:10px 18px;border-radius:9px;border:1px solid #d6d6db;background:#fff;color:#1d1d1f;font-size:.875rem;font-weight:600;text-decoration:none}
.cs-serif-cta2:hover{border-color:#8B1A1A;color:#8B1A1A}
.cs-serif-meta{margin:14px 0 0;font-size:.78rem;color:#a1a1a6}
.cs-serif-meta a{color:#8B1A1A;text-decoration:none}
.cs-serif-meta a:hover{text-decoration:underline}

/* 非宝可梦态：藏起现有正文（宝可梦态下原样显示）；常驻介绍段 .cs-serif-head 永不藏。
   🔴 只加 :not()，绝不给原正文套 wrapper（会毁掉 .alignwide 的直接子元素身份）。 */
.entry-content.cs-serif-x > *:not(.cs-serif-bar):not(.cs-serif-panel):not(.cs-serif-head){display:none}

@media (max-width:1240px){.cs-serif-bar__row{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1000px){.cs-serif-bar__row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){
 .cs-serif-bar__row{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cs-serif-prods,.cs-serif-branches{grid-template-columns:1fr}
 .cs-serif-card{padding:18px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
 .cs-serif-t,.cs-serif-prod,.cs-serif-branch,.cs-serif-cta{transition:none}
 .cs-serif-panel[data-open]{animation:none}
 /* R155：跨页视图过渡同样要能关掉（{animation:none} 是规范推荐写法）。 */
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}