/*! 敌人页设计稿的页面样式。与线上 微件:EnemyPage（prts-skin-migration migration/enemy-page/微件_EnemyPage.css）是同一份规则，只有这段头注释不同，改一边要同步另一边。
   preview/enemy.html / enemy-slug.html / enemy-touch.html / enemy-misery.html / enemy-dukare.html / enemy-unicycle.html 共用。
   结构同线上 模块:EnemyPage 的输出：图鉴卡（.en-head）+ 每个「级别N」章节里这一级的三张表（.en-level：级别信息 / 属性 / 技能与天赋），表里没有级别列。
   两份数据：图鉴（common2 = 游戏【敌方档案库】那份）只在图鉴卡里写一次；每级的「级别信息」是关卡内「敌方情报」那份，两者常不一样。
   组：同一敌人的若干级别（index=0 或 reindex 起新组）；组里第一级以后的各级，与第一级不同的值出强调色 + 角标、变了的芯片带角标并在气泡里给第一级的值、新出现的技能带「新增」。
   线上不放 TemplateStyles：css-sanitizer 只让 var() 用在颜色里、不认 --x: 声明 / :is() / :focus-visible，设计系统的令牌写法放不进去，所以走微件；
   线上两个模板的 styles.css 默认藏起新版、所有皮肤看原来的表格，第 0 节在 Arknights 皮肤上把新版换上来（样例页没有原来的表格，第 0 节在这里不起作用）。
   wikitext 写不出来、所以和一般表格写法不同的地方：属性三段是三张叠起来的表（wikitext 不认 <tbody>）；评级字母 / 问号线上是 span[role=button]（样例页是 <button>，
   两种都按 all: unset 起头）；「技能与天赋」是技能表的 caption；文中变了的数值是 模板:变动数值 输出的 .prts-delta，这里改画成淡青底 + ▲ / ▼ / ● */

/* ── 0. 新旧二选一：两个模板的 styles.css（TemplateStyles）默认藏起新版、所有皮肤都看原来的表格；这里在 Arknights 皮肤上把新版换上来。
 *  所以这份样式没到（任何原因）时，Arknights 皮肤上看到的也是原来那版能用的表格，不会是一块没样式的新版。
 *  特指度：TemplateStyles 的 .mw-parser-output .en-head 是 (0,2,0)，这里 (0,2,1)；原来的表格自己带行内 display: table，要 !important ── */
body.skin-arknights .en-head { display: grid; }
body.skin-arknights .en-level { display: block; }
body.skin-arknights .enemy-info-common, body.skin-arknights .prts-enemy-level-table { display: none !important; }

/* ── 1. 图鉴头：头像 120 + 右栏；精英 / 领袖左缘色条 + 标签 ── */
.en-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--ak-space-3) var(--ak-space-5); align-items: start; margin: var(--ak-space-4) 0; padding: var(--ak-space-4); border: 1px solid var(--ak-border); background: var(--ak-bg-surface); }
.en-head[data-rank="elite"] { --_rank: var(--ak-orange-500); --_rank-fg: var(--ak-orange-500); }
.en-head[data-rank="boss"] { --_rank: var(--ak-red-700); --_rank-fg: var(--ak-red-500); }
.en-head[data-rank] { border-left-width: var(--ak-bar-w); border-image: linear-gradient(to right, var(--_rank) 4px, var(--ak-border) 4px) 1 1 1 4; }
.en-avatar { position: relative; display: block; width: 120px; height: 120px; background: #1d1f20 linear-gradient(180deg, #2b2d2f, #141516); overflow: hidden; }
.en-avatar img { display: block; width: 120px; height: 120px; max-width: none; object-fit: cover; }
.en-avatar a { display: block; }
.en-avatar__code { position: absolute; left: 0; top: 0; padding: 4px 7px; background: rgba(0, 0, 0, .72); color: #fff; font: 700 var(--ak-fs-xs)/1 var(--ak-font-label); letter-spacing: .06em; }
.en-main { min-width: 0; }
.en-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ak-space-2) var(--ak-space-3); margin: 0 0 var(--ak-space-2); }
.en-name { font-size: var(--ak-fs-h3); font-weight: 800; line-height: 1.2; }
.ak-tag.en-rank { --_bg: transparent; --_fg: var(--_rank-fg); --_bd: var(--_rank-fg); }
.en-icon-toggle { cursor: pointer; }
.en-head .ak-kv--inline { margin: 0 0 var(--ak-space-3); }
.en-desc { margin: 0; color: var(--ak-fg-secondary); line-height: 1.7; }
.en-desc .poem { margin: 0; padding: 0; border: 0; }   /* 描述照原样用 <poem> 保留换行，不要正文 poem 的左边线 */
.en-desc .poem p { margin: 0; }
/* 图鉴「能力」：一行一条，行首的 · 悬挂在外；网格的直接子元素是外面那层 .en-ability-box：桌面落在右栏，手机横跨两栏 */
.en-head > .en-ability-box { grid-column: 2; min-width: 0; }
.en-head .en-ability { margin: 0; padding: 0; list-style: none; font-size: var(--ak-fs-sm); line-height: 1.7; }
.en-head .en-ability > li { margin: 0; padding-left: 1.1em; text-indent: -1.1em; }
.en-head .en-ability > li::before { content: "·"; position: static; display: inline-block; width: 1.1em; height: auto; margin: 0; background: none; transform: none; text-indent: 0; color: var(--ak-fg-muted); }
.en-head .en-ability > li.en-ability__mode { margin-top: 4px; padding-left: 0; text-indent: 0; font-weight: 700; color: var(--ak-fg-secondary); }
.en-head .en-ability > li.en-ability__mode::before { content: none; }
/* 「能力修正」：两版只露一版，切换钮在列表下面（mw-collapsible 的自定义开关；脚本接管前先藏起收着的那版） */
.client-js .en-head .mw-collapsed:not(.mw-made-collapsible) { display: none; }
.en-more { display: inline-block; margin-top: 2px; color: var(--ak-link); font-size: var(--ak-fs-xs); cursor: pointer; }
.en-more:hover { text-decoration: underline; }
.en-more:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }

/* ── 2. 每一级的「级别信息」「属性」：一级一张，标签行压在值行上（同原版 wikitable 的网格）；表头行在表里第一行 tr.en-head-row ── */
.en-level { margin: var(--ak-space-4) 0; }
.en-group { margin: 0 0 var(--ak-space-4); }
.en-scroll { margin: 0; }
.en-scroll + .en-scroll { margin-top: var(--ak-space-4); }
.en-stats { margin: 0; table-layout: fixed; font-variant-numeric: tabular-nums; }
.en-stats th, .en-stats td { padding: 6px 10px; border-left: 1px solid var(--ak-border); }
.en-stats tr > :first-child { border-left: 0; }
.en-head-row > th { background: var(--ak-bg-surface-2); border-bottom: 2px solid var(--ak-border-strong); font: 700 var(--ak-fs-xs)/1.3 var(--ak-font-body); color: var(--ak-fg-secondary); text-align: center; vertical-align: bottom; word-break: keep-all; }
.en-head-row > th.en-wide { text-align: left; }
/* 三段是三张表：接着排、共用外框，段与段之间一条粗线 */
.en-band + .en-band { border-top: 0; }
.en-band + .en-band .en-head-row > th { border-top: 1px solid var(--ak-border-strong); }
.en-stats td { position: relative; text-align: center; white-space: nowrap; }
.ak-table.en-stats tbody tr:hover > td { background: none; }   /* 压掉 .ak-table 的整行悬停：每张表只有一行值，手机上这一行转置成一整列，悬停任何一格整列都会变亮 */
.en-cell { display: block; }
/* 评级字母不占行内：压淡的展示字落在格子左上角，数值居中不受它影响；仍是按钮（点开分档阈值），hit 区 24px；各档同一灰度 */
.en-grade { all: unset; position: absolute; left: 0; top: 0; box-sizing: border-box; min-width: 24px; height: 24px; padding: 2px 0 0 4px; display: flex; align-items: flex-start; cursor: pointer;
  font: 700 15px/1 var(--ak-font-display); letter-spacing: -.02em; color: var(--ak-fg-muted); opacity: .6; }
.en-grade:hover { color: var(--ak-accent); opacity: 1; }
.en-grade:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: -2px; opacity: 1; }
.en-stats td.is-zero .en-val { color: var(--ak-fg-subtle); }
.en-stats td.en-wide { text-align: left; white-space: normal; }
.en-stats td.en-wide > .en-res + .en-res { margin-left: .6em; }
.en-res--extra { display: block; margin-top: 2px; white-space: normal; }
.en-stats td.en-wide > .en-res--extra { margin-left: 0; }
.en-res__label { margin-right: .5em; color: var(--ak-fg-muted); font-size: var(--ak-fs-xs); font-weight: 600; }
/* 与组里第一级不同的值：强调色粗体 + 右上角一枚三角（同关卡页敌方情报稿的「本关数值」）；不带悬停说明，读屏另有一段 .ak-sr-only */
.en-stats td.is-diff .en-val, .en-info td.is-diff { color: var(--ak-accent); font-weight: 700; }
.en-stats td.is-diff::before { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent var(--ak-accent) transparent transparent; }
.en-sp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.en-sp__n { min-width: 3.4em; text-align: left; }
.en-sp__rate { color: var(--ak-fg-muted); font-size: var(--ak-fs-xs); }

/* ── 2a. 级别信息表：文字表，列宽自动、左对齐、允许折行，描述列占大头 ── */
.en-info { table-layout: auto; }
.en-info td { text-align: left; white-space: normal; }
.en-info th.en-desc-cell { text-align: left; }
.en-info td.en-desc-cell { width: 38%; min-width: 14em; color: var(--ak-fg-secondary); }
.en-info td.is-zero .en-val { color: var(--ak-fg-subtle); }
.en-caption { caption-side: top; padding: 0 0 6px; text-align: left; font: 700 var(--ak-fs-sm)/1.4 var(--ak-font-body); color: var(--ak-fg); }
/* 级别描述里的关键词（{{color|#00FFFF|…}}，游戏「敌方情报」里的高亮）：青色原本是给深色底用的（旧表格 / 旧卡片的描述格是深底），
   浅色底上几乎看不见；改画成设计系统的富文本关键词（--ak-rt-kw：日间 #0077b3、夜间浅蓝，加粗），同游戏的 <@ba.kw> */
.en-head span[style*="00FFFF" i], .en-level span[style*="00FFFF" i] { color: var(--ak-rt-kw) !important; font-weight: 600; }

/* ── 3. 技能与天赋：两列表（名称 + 冷却 / 技力芯片 ‖ 效果），天赋与能力是最后一行；只有天赋时标题写「天赋与能力」、表里直接是正文 ── */
.en-help { all: unset; margin-left: 4px; cursor: pointer; }   /* 图标同 {{Popup}}：mdi help-circle-outline，颜色由行内 var(--darkblue) 给，字号跟着标题行 */
.en-help:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 1px; border-radius: 50%; }
.en-skills { margin: 0; }
.en-skills th[scope="row"] { width: 9.5em; vertical-align: top; font-weight: 400; background: var(--ak-bg-surface-2); }
.en-skills td { vertical-align: top; font-size: var(--ak-fs-sm); line-height: 1.7; }
.en-skill__name { display: block; margin: 0 0 6px; font-size: var(--ak-fs-body); font-weight: 800; line-height: 1.3; }
.en-skills tr.en-talent .en-skill__name { margin: 0; }
.en-skill__stats { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.en-sp-label { font: 600 var(--ak-fs-xs)/1 var(--ak-font-body); letter-spacing: 0; opacity: .85; }
.en-skill__mode { display: block; margin: -4px 0 6px; font-size: var(--ak-fs-xs); color: var(--ak-fg-muted); }
.en-skill__mode::before { content: "［"; } .en-skill__mode::after { content: "］"; }
.en-new { margin: -2px 0 6px; }
.en-chg { position: relative; display: inline-flex; }
.en-chg::before { content: ""; position: absolute; top: 0; right: 0; z-index: 1; width: 0; height: 0; border-style: solid; border-width: 0 6px 6px 0; border-color: transparent var(--ak-accent) transparent transparent; }
.en-empty { margin: 0; padding: var(--ak-space-3) var(--ak-space-4); border: 1px dashed var(--ak-border-strong); color: var(--ak-fg-muted); font-size: var(--ak-fs-sm); }
/* 文中变了的数值：模板:变动数值 的红 / 绿实心胶囊（行内样式）改画成淡青底 + 粗体 + 青色小三角；不把数字本身染青（正文里青字 = 链接） */
.en-level .prts-delta { display: inline !important; padding: 0 3px !important; border-radius: 0 !important; background: var(--ak-mark-bg) !important; color: inherit !important; font-weight: 700; white-space: nowrap; }
.en-level .prts-delta > sup { display: none; }
.en-level .prts-delta::after { content: "▲"; margin-left: 1px; font-size: .6em; vertical-align: .5em; color: var(--ak-accent); }
.en-level .prts-delta--down::after { content: "▼"; }
.en-level .prts-delta--text { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.en-level .prts-delta--text::after { content: "●"; font-size: .45em; vertical-align: .7em; }

/* 悬停说明：都是现网的 mc-tooltips（同 {{Popup}} / {{术语}}，站点脚本 Tooltip.js 用 tippy 挂到 body 上，日间 light-border / 夜间 dark-border），
   不用皮肤 tooltip.css 的 CSS-only 气泡——那个画在载体的 ::after 上，会被表格的横滑容器裁掉，也会和格子里另一个气泡叠在一起。
   触发点外面那层 .mc-tooltips 是行内的，评级字母照旧按格子定位；气泡里的「技能与天赋」说明一段一个块（.mc-tooltips 的内容是 <span>，wikitext 里不能放 <p>） */
.en-help-p { display: block; margin: 0 0 .6em; }
.en-help-p:last-child { margin-bottom: 0; }
.en-head-row .ak-term { border-bottom-color: var(--ak-fg-subtle); }

/* ── 4. 出场关卡 / 出场敌袭 / 相关敌人：图鉴卡里紧跟能力的无框键值；一个关卡名不从中间断开，分隔点挂在前一个链接后面 ── */
.en-head > .en-stages { grid-column: 2; margin: 0; border: 0; row-gap: 2px; font-size: var(--ak-fs-sm); }
.en-stages > dt, .en-stages > dd { margin: 0; padding: 0; border: 0; line-height: 1.7; align-content: start; }
.en-stages > dt { padding-right: 16px; }
.en-links > a { white-space: nowrap; }
.en-links > a:not(:last-child)::after { content: "·"; display: inline-block; margin: 0 .5em; color: var(--ak-fg-subtle); }
.en-links + .en-more { margin-left: .8em; }

/* ── 5. 窄：头像 72；级别信息 / 属性每张表转置成「字段 | 值」两列，不横滑；技能名与芯片一行 ── */
@media (max-width: 639px) {
  .en-head { grid-template-columns: 72px minmax(0, 1fr); gap: var(--ak-space-3); padding: var(--ak-space-3); }
  .en-avatar, .en-avatar img { width: 72px; height: 72px; }
  .en-avatar__code { padding: 3px 5px; font-size: 10px; }
  .en-name { font-size: var(--ak-fs-h4); }
  .en-head > .en-ability-box, .en-head > .en-stages { grid-column: 1 / -1; }
  /* 每张表转置成「字段 | 值 | 字段 | 值」：tbody 变 grid、tr 是 display: contents，表头行的第 i 格（字段）和值行的第 i 格按位置摆到同一行；
   * 属性的数值两两并排、3 行排完（原来 6 行），宽的字段（杂项段三项、级别信息的名称 / 描述）占一整行 */
  .en-stats { display: block; border: 0; background: none; }
  .en-stats > tbody { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 6.5em minmax(0, 1fr); border: 1px solid var(--ak-border); border-bottom: 0; background: var(--ak-bg-surface); }
  .en-band + .en-band > tbody { border-top-color: var(--ak-border-strong); }   /* 段与段之间 */
  .en-band--misc > tbody, .en-info > tbody { border-bottom: 1px solid var(--ak-border); }
  .en-stats tr { display: contents; }
  .en-stats th, .en-stats td { display: flex; align-items: center; box-sizing: border-box; min-height: 38px; padding: 6px 8px; border: 0; border-bottom: 1px solid var(--ak-border); border-left: 1px solid var(--ak-border); }
  .en-head-row > th { justify-content: flex-start; text-align: left; white-space: normal; border-bottom: 1px solid var(--ak-border); font-size: var(--ak-fs-xs); }
  .en-head-row .ak-term { white-space: nowrap; }
  /* 属性前两段：第 1、2 个字段一行，3、4 一行，5、6 一行；奇数在左半、偶数在右半 */
  .en-band tr > :nth-child(1), .en-band tr > :nth-child(2) { grid-row: 1; }
  .en-band tr > :nth-child(3), .en-band tr > :nth-child(4) { grid-row: 2; }
  .en-band tr > :nth-child(5), .en-band tr > :nth-child(6) { grid-row: 3; }
  .en-band .en-head-row > :nth-child(odd) { grid-column: 1; border-left: 0; }
  .en-band .en-head-row > :nth-child(even) { grid-column: 3; }
  .en-band tr:not(.en-head-row) > :nth-child(odd) { grid-column: 2; }
  .en-band tr:not(.en-head-row) > :nth-child(even) { grid-column: 4; }
  .en-band tr > :nth-child(n+5) { border-bottom-width: 0; }   /* 最后一行的下边线由下一段的框画；最后一段的框自己带底边 */
  /* 杂项段（生命自回速度 / 异常抗性 / 技力）：每项一整行 */
  .en-band--misc tr > :nth-child(1) { grid-row: 1; } .en-band--misc tr > :nth-child(2) { grid-row: 2; } .en-band--misc tr > :nth-child(3) { grid-row: 3; }
  .en-band--misc .en-head-row > :nth-child(n) { grid-column: 1; border-left: 0; }
  .en-band--misc tr:not(.en-head-row) > :nth-child(n) { grid-column: 2 / 5; }
  .en-band--misc tr > :nth-child(n+3) { border-bottom-width: 0; }
  .en-band--misc tr > :nth-child(-n+2) { border-bottom-width: 1px; }
  /* 级别信息：名称一整行；地位 | 种类；攻击方式 | 行动方式；描述一整行 */
  .en-info tr > :nth-child(1) { grid-row: 1; }
  .en-info tr > :nth-child(2), .en-info tr > :nth-child(3) { grid-row: 2; }
  .en-info tr > :nth-child(4), .en-info tr > :nth-child(5) { grid-row: 3; }
  .en-info tr > :nth-child(6) { grid-row: 4; border-bottom-width: 0; }
  .en-info .en-head-row > :nth-child(1), .en-info .en-head-row > :nth-child(2), .en-info .en-head-row > :nth-child(4), .en-info .en-head-row > :nth-child(6) { grid-column: 1; border-left: 0; }
  .en-info .en-head-row > :nth-child(3), .en-info .en-head-row > :nth-child(5) { grid-column: 3; }
  .en-info tr:not(.en-head-row) > :nth-child(1), .en-info tr:not(.en-head-row) > :nth-child(6) { grid-column: 2 / 5; }
  .en-info tr:not(.en-head-row) > :nth-child(2), .en-info tr:not(.en-head-row) > :nth-child(4) { grid-column: 2; }
  .en-info tr:not(.en-head-row) > :nth-child(3), .en-info tr:not(.en-head-row) > :nth-child(5) { grid-column: 4; }
  /* 数值靠右：评级字母在格子左上角，两列时值格只有一半宽，居中的六位数会压到字母上 */
  .en-band td { justify-content: flex-end; }
  .en-band--misc td { justify-content: flex-start; }   /* 杂项段的值占一整行，靠左（同异常抗性 / 技力） */
  /* 级别信息是文字格：不用 flex——正文和里面的 {{color}} / 链接会各成一个 flex 项横排，一句话被切成几列（「同时攻击 | 两个 | 目标…」） */
  .en-info td { display: block; align-content: center; text-align: left; }
  .en-stats td.en-wide { justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .en-stats td.en-wide > .en-res { flex: none; white-space: nowrap; }
  .en-stats td.en-wide > .en-res--extra { flex: 1 1 100%; white-space: normal; }
  .en-sp__n { min-width: 0; }
  .en-caption { display: block; }
  .en-info td.en-desc-cell { width: auto; min-width: 0; }
  .en-grade { font-size: 12px; padding-top: 3px; }
  .en-skills th[scope="row"], .en-skills td { display: block; width: auto; }
  .en-skills th[scope="row"] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-bottom: 0; padding-bottom: 4px; }
  .en-skills .en-skill__name { margin: 0; }
  .en-skills .en-skill__mode, .en-skills .en-new { display: inline; margin: 0; }
  .en-skills .en-skill__stats { flex-direction: row; flex-wrap: wrap; gap: 4px 6px; }
}