/* 钢铁雄心 IV 中文离线资料库 —— 站点样式 */
/* ==================================================================
   主题系统（浅色 / 深色 / 自动跟随系统）
   ------------------------------------------------------------------
   三种状态只靠 <html> 上的一个属性区分，状态→样式的映射全在 CSS 里：
     无 data-theme        自动：跟随系统（见下面的 @media (prefers-color-scheme: dark)）
     data-theme="dark"    强制深色
     data-theme="light"   强制浅色（排在深色块之后，因此能压过系统深色偏好）
   JS（app.js）只负责把这个属性写对，不做任何条件判断。

   颜色一律走语义变量。原文件里有 37 处硬编码颜色，深色下会变成「页面黑了、
   搜索框/代码块/目录框还是白的」这类斑块，故全部提成变量；浅色取值与原值
   逐字节相同（diff 里只应出现属性名替换，不应出现色值变化）。
   深色不是把浅色翻转，而是按语义重定值：绿/红/橙 = 正负修正，灰底 = 表格与
   信息框，21 种上游彩色底 = 成就/国策标签。对比度实测见提交说明。
   ================================================================== */
:root {
  /* —— 品牌绿 —— */
  --green: #5b7f5b;
  --green-dark: #3f5c3f;
  --green-light: #96be96;
  /* —— 骨架 —— */
  --bg: #f4f5f0;
  --panel: #ffffff;
  --text: #1d211d;
  --muted: #5d6459;
  --border: #ccd3c6;
  --link: #245a8d;
  --link-visited: #6b4a86;
  --table-head: #dfe7d6;
  --table-alt: #f2f5ec;
  --cell-tint: #f2f5ec;         /* 上游内联浅色底（#ededed/#f9f9f9/#efefef…）在深色下被改写成这个灰度 */
  --warn: #8a6d1f;
  --warn-bg: #fdf3d6;
  --warn-border: #e6d391;
  /* —— 顶栏（深绿渐变，两套主题共用，不参与深色重定值）—— */
  --topbar-1: #4e6f4e;
  --topbar-2: #3d5a3d;
  --topbar-text: #fff;
  --topbar-nav: #f0f4ec;
  /* —— 控件 —— */
  --input-bg: #f7f9f4;
  --input-text: #1d211d;
  --input-border: #2f4630;
  --menu-bg: #ffffff;
  --menu-border: #eef1e8;
  --hover-bg: #eef4e6;
  --cur-bg: #dfe7d6;
  --nav-label: #3f5c3f;        /* 侧栏分组标题 / 目录标题的绿字 */
  /* —— 正文细节 —— */
  --code-bg: #eef1e8;
  --pre-bg: #f6f8f2;
  --blockquote-bg: #f8faf5;
  --blockquote-text: #33402f;
  --head4: #2c3a2c;
  --toc-bg: #f7f9f3;
  --hint: #333d31;
  --special-link: #2b3a2b;      /* 信息框/公式区里那批内联 color:#245a8d 的链接 */
  --mark-bg: #ffe9a8;
  --shadow: rgba(0, 0, 0, .22);
  --shadow-strong: rgba(0, 0, 0, .3);
  --backdrop: rgba(0, 0, 0, .42);
  --radius: 4px;
  --maxw: 1180px;
}
/* 自动：跟随系统。:not([data-theme]) 保证「手动选择」永远压过系统偏好。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #1b1f1c;
    --panel: #232824;
    --text: #e3e7e1;
    --muted: #a3ada1;
    --border: #3a423b;
    --green: #6f9d6f;
    --green-dark: #a8cba4;
    --green-light: #557a55;
    --link: #79b8ff;
    --link-visited: #b79ae0;
    --table-head: #2c342c;
    --table-alt: #262b27;
    --cell-tint: #2f362f;
    --warn: #e8c877;
    --warn-bg: #3b3218;
    --warn-border: #6b5a2a;
    --input-bg: #1b1f1c;
    --input-text: #e3e7e1;
    --input-border: #4a5a4a;
    --menu-bg: #232824;
    --menu-border: #2f362f;
    --hover-bg: #2c342c;
    --cur-bg: #35402f;
    --nav-label: #a8cba4;
    --code-bg: #1e2420;
    --pre-bg: #1e2420;
    --blockquote-bg: #1e241f;
    --blockquote-text: #c8d2c6;
    --head4: #d3dcd1;
    --toc-bg: #1f2421;
    --hint: #c0cabd;
    --special-link: #8fc0ec;
    --mark-bg: #5c4a1a;
    --shadow: rgba(0, 0, 0, .55);
    --shadow-strong: rgba(0, 0, 0, .65);
    --backdrop: rgba(0, 0, 0, .6);
  }
}

/* 手动深色：与上面的自动块逐项一致（改配色时两处必须同步）。 */
:root[data-theme="dark"] {
  --bg: #1b1f1c;
  --panel: #232824;
  --text: #e3e7e1;
  --muted: #a3ada1;
  --border: #3a423b;
  --green: #6f9d6f;
  --green-dark: #a8cba4;
  --green-light: #557a55;
  --link: #79b8ff;
  --link-visited: #b79ae0;
  --table-head: #2c342c;
  --table-alt: #262b27;
  --cell-tint: #2f362f;
  --warn: #e8c877;
  --warn-bg: #3b3218;
  --warn-border: #6b5a2a;
  --input-bg: #1b1f1c;
  --input-text: #e3e7e1;
  --input-border: #4a5a4a;
  --menu-bg: #232824;
  --menu-border: #2f362f;
  --hover-bg: #2c342c;
  --cur-bg: #35402f;
  --nav-label: #a8cba4;
  --code-bg: #1e2420;
  --pre-bg: #1e2420;
  --blockquote-bg: #1e241f;
  --blockquote-text: #c8d2c6;
  --head4: #d3dcd1;
  --toc-bg: #1f2421;
  --hint: #c0cabd;
  --special-link: #8fc0ec;
  --mark-bg: #5c4a1a;
  --shadow: rgba(0, 0, 0, .55);
  --shadow-strong: rgba(0, 0, 0, .65);
  --backdrop: rgba(0, 0, 0, .6);
}

/* 手动浅色：只改回浅色那一批，排在深色块之后 → 覆盖系统深色偏好。 */
:root[data-theme="light"] {
  --bg: #f4f5f0;
  --panel: #ffffff;
  --text: #1d211d;
  --muted: #5d6459;
  --border: #ccd3c6;
  --green: #5b7f5b;
  --green-dark: #3f5c3f;
  --green-light: #96be96;
  --link: #245a8d;
  --link-visited: #6b4a86;
  --table-head: #dfe7d6;
  --table-alt: #f2f5ec;
  --cell-tint: #f2f5ec;
  --warn: #8a6d1f;
  --warn-bg: #fdf3d6;
  --warn-border: #e6d391;
  --input-bg: #f7f9f4;  --input-text: #1d211d;
  --input-border: #2f4630;
  --menu-bg: #ffffff;
  --menu-border: #eef1e8;
  --hover-bg: #eef4e6;
  --cur-bg: #dfe7d6;
  --nav-label: #3f5c3f;
  --code-bg: #eef1e8;
  --pre-bg: #f6f8f2;
  --blockquote-bg: #f8faf5;
  --blockquote-text: #33402f;
  --head4: #2c3a2c;
  --toc-bg: #f7f9f3;
  --hint: #333d31;
  --special-link: #2b3a2b;
  --mark-bg: #ffe9a8;
  --shadow: rgba(0, 0, 0, .22);
  --shadow-strong: rgba(0, 0, 0, .3);
  --backdrop: rgba(0, 0, 0, .42);
}

/* color-scheme 必须跟着主题走：它决定表单控件、滚动条、<select> 下拉菜单、
   以及 file:// 下画布默认底色的原生渲染。漏掉就会出现「页面全黑但搜索框雪白」。 */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "PingFang SC",
    "Hiragino Sans GB", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.78;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--link-visited); }

/* ---------- 顶栏 ---------- */
.topbar {
  background: linear-gradient(180deg, var(--topbar-1), var(--topbar-2));
  color: var(--topbar-text);
  padding: 0 16px;
  position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 6px var(--shadow);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 14px; height: 52px;
}
.brand { color: var(--topbar-text); font-weight: 700; font-size: 17px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand small { font-weight: 400; opacity: .8; font-size: 12px; margin-left: 6px; }
.topnav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.topnav a {
  color: var(--topbar-nav); padding: 6px 10px; border-radius: var(--radius); font-size: 14px;
}
.topnav a:hover { background: rgba(255,255,255,.16); text-decoration: none; }
.searchbox { position: relative; margin-left: 8px; }
.searchbox input {
  width: 220px; padding: 7px 10px; border-radius: var(--radius);
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-text); font-size: 14px;
  font-family: inherit;
}
.searchbox input:focus { outline: 2px solid var(--green-light); outline-offset: 0; }
#search-results {
  position: absolute; top: 40px; right: 0; width: min(520px, 86vw);
  max-height: 62vh; overflow: auto; background: var(--menu-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px var(--shadow); z-index: 40; display: none;
}
#search-results.open { display: block; }
#search-results .sr-item { display: block; padding: 9px 12px; border-bottom: 1px solid var(--menu-border); color: var(--text); }
#search-results .sr-item:hover, #search-results .sr-item.active { background: var(--hover-bg); text-decoration: none; }
#search-results .sr-title { font-weight: 600; }
#search-results .sr-snip { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
#search-results .sr-snip mark { background: var(--mark-bg); padding: 0 2px; }
#search-results .sr-empty { padding: 12px; color: var(--muted); }

/* ---------- 布局 ---------- */
/* Flex, not grid: on narrow screens the sidebar must become a fixed slide-in drawer WITHOUT being
   moved in the DOM (moving it out of its grid column collapsed the desktop layout — the content
   then sat in the 240px column). Flex lets the same markup serve both, with `order` for stacking. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 40px; display: flex; gap: 22px; align-items: flex-start; }
.wrap > .content { flex: 1 1 auto; min-width: 0; }
.sidebar {
  flex: 0 0 240px; width: 240px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 12px 16px; position: sticky; top: 68px; max-height: calc(100vh - 88px); overflow: auto;
  font-size: 13.5px;
}
.sidebar h3 { margin: 12px 0 6px; font-size: 12px; letter-spacing: .06em; color: var(--nav-label); text-transform: uppercase; }
.sidebar h3:first-child { margin-top: 2px; }
.sidebar ul { list-style: none; margin: 0 0 4px; padding: 0; }
.sidebar li { margin: 1px 0; }
.sidebar a { display: block; padding: 3px 6px; border-radius: 3px; color: var(--special-link); }
.sidebar a:hover { background: var(--hover-bg); text-decoration: none; }
.sidebar a.cur { background: var(--cur-bg); font-weight: 600; }
.content { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 26px 30px; min-width: 0; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
h1.page-title { font-size: 27px; line-height: 1.3; margin: 2px 0 4px; border-bottom: 2px solid var(--green-light); padding-bottom: 8px; }
.subtitle { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

/* ---------- 正文排版 ---------- */
.content h2, .content h3, .content h4, .content h5 {
  font-weight: 700; line-height: 1.35; margin: 26px 0 8px; scroll-margin-top: 64px;
}
.content h2 { font-size: 21px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.content h3 { font-size: 17.5px; }
.content h4 { font-size: 15.5px; color: var(--head4); }
.content h5 { font-size: 14.5px; color: var(--muted); }
.content p { margin: 9px 0; }
.content ul, .content ol { margin: 9px 0 9px 1.4em; padding: 0; }
.content li { margin: 3px 0; }
.content li > ul, .content li > ol { margin: 3px 0 3px 1.2em; }
.content img { max-width: 100%; height: auto; vertical-align: middle; }
/* MediaWiki thumbnails carry inline pixel widths (e.g. width:1277px for the tech-tree figures).
   With `max-width:100%` on the <img> alone the WRAPPER still forced the document to 1300px wide,
   so on a phone the whole page scrolled sideways and the text clipped (measured: docScrollW 1300
   vs viewport 500). Cap the wrappers too. */
.content .thumbinner, .content .thumb, .content .floatnone, .content .center > div { max-width: 100% !important; }
.content .thumbinner { overflow-x: auto; }
.content figure { margin: 12px 0; }
.content figcaption { font-size: 12.5px; color: var(--muted); }
.content code, .content pre { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; font-size: 13px; }
.content code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; }
.content pre {
  background: var(--pre-bg); border: 1px solid var(--border); border-left: 3px solid var(--green-light);
  padding: 10px 12px; overflow: auto; border-radius: var(--radius); line-height: 1.5;
}
.content blockquote { margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--border); color: var(--blockquote-text); background: var(--blockquote-bg); }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }
.content .center, .content center { display: block; text-align: center; }
.content sup { font-size: .72em; }
/* 信息框/公式区里有一批内联写死的深蓝链接（原站配色为了浅底而选），深色下对比度不足 */
.content [style*="#245a8d"], .content [style*="#245A8D"] { color: var(--special-link) !important; }

/* ---------- 表格（wiki 风格） ---------- */
/* These tables come from MediaWiki with awkward inline markup: a nested "效果" table whose cells
   pin `width:551px`, and a name cell wrapping icon + title + description in an inline
   `display:flex` box. Measured in a headless render (Naval_technology): the 科技 column was
   squeezed to 292px while its content needed 509–786px, so the text PAINTED OVER the 年份
   column, while the 效果 column overflowed past the panel.
   Approach: size the table to its CONTENT (width: max-content) so no column has to be starved,
   and let the wrapper scroll horizontally when the result is wider than the screen. Cells that
   would otherwise shrink to one character per line get a real minimum. */
.content table {
  border-collapse: collapse; margin: 12px 0; font-size: 14px;
  background: var(--panel); display: block; overflow-x: auto; overflow-y: hidden;
  width: max-content; min-width: 100%; max-width: 100%;   /* max-width:100% keeps a wide table's
     scroll INSIDE its own box; without it the table stretches the whole document sideways and the
     page text clips on phones (measured: docScrollW 1814 vs viewport 500). */
  -webkit-overflow-scrolling: touch;
}
.content table table { display: table; width: auto; max-width: none; table-layout: auto; }
.content table th, .content table td {
  word-break: normal; overflow-wrap: break-word; vertical-align: top;
}
/* Give the leading name/description column room. min-width alone still left it at 210px
   (measured), because the effect column's nested table claims the rest; a percentage makes it
   take a real share of the row while the table stays inside its own scroll box. */
/* Column sizing for the tech tables. The 5 columns carry competing needs: the name cell wants
   ~363px, the nested 效果 table wants ~567px, and the whole row must fit an 832px box — which
   cannot all hold at once. Measured options:
     min-width only (26em): td0=364 but sum=1155, so 324px of the row sat behind a scrollbar;
     percentages: fits, but td0 fell to 208px and its text stacked one character per line.
   Chosen: bound every column to the box (nothing hidden, no horizontal scrolling) and give the
   name column the largest share that still fits. It wraps over a few lines instead of stacking. */
.content table > tbody > tr > th:first-child,
.content table > tbody > tr > td:first-child { width: 24%; min-width: 11em; }
.content table > tbody > tr > th:last-child,
.content table > tbody > tr > td:last-child { width: 46%; max-width: 46%; }
/* The nested "效果" table pins its first column with inline `width:551px`; left alone its intrinsic
   width pushed the outer table's content to 1156px inside an 832px box. */
.content table table th[style*="width"], .content table table td[style*="width"] { width: auto !important; }
.content table table { max-width: 100%; }
/* Flatten the inline flex wrapper so its icon+text cannot inflate the column past its siblings.
   实测更正（2026-09）：这两条其实压不住格子上那个行内 `style="display:flex"`——行内声明
   优先级高于任何选择器，所以这一格在全站一直是「图文同行」的原样，而不是被拍平成块级。
   真正的问题因此不是 flex，而是格子太窄：首列 24%/min-width 11em ≈ 176px，而图片固有宽
   可以是 285px，旁边剩不下几个字，中文就按单字折行。故这里保留原规则（对不带行内 flex 的
   旧标记仍有意义），真正的修复见下面的容器查询。 */
.content table > tbody > tr > td:first-child > div[style*="flex"] { display: block; }
.content table > tbody > tr > td:first-child > div[style*="flex"] > div { margin-left: 0 !important; }

/* ---------- 首列过窄：给图文格一个真实的宽度下限 ----------
   即使上面把窄格改成了竖排，285px 的立绘塞进 176px 的首列仍然溢出。所以首列需要一个
   min-width；但不能笼统加到 20em（会把 40 个科技页的 5 列表格撑出横向滚动）。
   折中：只给「首列里含图文格」的表提高下限——用 :has() 精确限定，其他表格不受影响。
   不支持的浏览器只是保持现状（窄），不会坏。 */
.content table:has(> tbody > tr > td:first-child > div[style*="flex"] > img) > tbody > tr > th:first-child,
.content table:has(> tbody > tr > td:first-child > div[style*="flex"] > img) > tbody > tr > td:first-child {
  min-width: 17em;
}
/* 这类表的「效果」列不再钳死在 46%：首列变宽后要给它让位，否则总宽必然溢出。 */
.content table:has(> tbody > tr > td:first-child > div[style*="flex"] > img) > tbody > tr > th:last-child,
.content table:has(> tbody > tr > td:first-child > div[style*="flex"] > img) > tbody > tr > td:last-child {
  max-width: none;
}
/* ---------- 立绘格的文字改到图片下方（用户方案 A） ----------
   背景：全站 1,174 个「行内 flex + 图片 + 文字」单元格（tools/figure-scan.mjs 实测，49 页）。
   按用途分成两类，需求正好相反：
     · 1,006 个是 ≤96px 的图标（成就/列表，其中 64px 成就图标 384 个）——图片与文字并排本来就对；
     ·   168 个是 ≥100px 的立绘（舰船/飞机/坦克的科技格，最大 306px）——并排时文字只剩几十像素，
        中文按单字折行，必须把文字放到图片下方、吃满整格宽。
   判据只用 HTML 里看得见的东西：图片的 width 属性字面量。这里**逐个列出全站真实出现过的
   34 个立绘宽度值**（由 tools/theme-audit.mjs 第 12 节扫描确认无遗漏），而不是写成宽度范围：
     · 精确值无误伤——[width="100"] 不会命中 width="1000"，也不会命中图标档的 45/62/64/65/96；
     · 选择器更少（34 个精确值 vs 90 个范围组合），:has() 的样式重算成本更低。
   新增立绘宽度时这条规则会漏掉该格——第 12 节会扫描全站比对，漏了就报错并列出缺失的宽度值。 */


.content table > tbody > tr > td:first-child > div[style*="flex"]:has(> img[width="100"], > img[width="101"], > img[width="103"], > img[width="105"], > img[width="109"], > img[width="110"], > img[width="111"], > img[width="114"], > img[width="115"], > img[width="116"], > img[width="118"], > img[width="119"], > img[width="120"], > img[width="123"], > img[width="125"], > img[width="127"], > img[width="130"], > img[width="131"], > img[width="132"], > img[width="133"], > img[width="136"], > img[width="140"], > img[width="143"], > img[width="144"], > img[width="145"], > img[width="146"], > img[width="148"], > img[width="153"], > img[width="164"], > img[width="173"], > img[width="249"], > img[width="285"], > img[width="286"], > img[width="306"]) {
  display: block !important;      /* 压的是格子上那个行内 display:flex */
}
.content table > tbody > tr > td:first-child > div[style*="flex"]:has(> img[width="100"], > img[width="101"], > img[width="103"], > img[width="105"], > img[width="109"], > img[width="110"], > img[width="111"], > img[width="114"], > img[width="115"], > img[width="116"], > img[width="118"], > img[width="119"], > img[width="120"], > img[width="123"], > img[width="125"], > img[width="127"], > img[width="130"], > img[width="131"], > img[width="132"], > img[width="133"], > img[width="136"], > img[width="140"], > img[width="143"], > img[width="144"], > img[width="145"], > img[width="146"], > img[width="148"], > img[width="153"], > img[width="164"], > img[width="173"], > img[width="249"], > img[width="285"], > img[width="286"], > img[width="306"]) > img {
  display: block; margin-bottom: .35em; max-width: 100%; height: auto;
}
/* ---------- 对照表：首行各列等宽 ----------
   4 个「总体学说」对照表（Land / Air / Naval / Special_forces doctrine，列数 2/3/3/4），
   每列结构相同：64px 图标 + 标题 + 要点 + 一段斜体描述。实测各列文本量非常接近
   （Land_doctrine 是 86 / 83 / 95 / 90 字），内容上就该等宽。
   但全局规则给首列 24%、末列 46%（max-width:46%），中间列没有任何声明：
     4 列表 → 中列各剩 (100−24−46)/2 = 15%；3 列表 → 30%；2 列表 → 剩 30% 无从分配
   实测后果：Land_doctrine 首行第 2、3 列被压到几十像素，标题「优势火力」「大规模作战计划」
   一个字一行。用户还指出等宽后仍不合理——第 4 列大片空白而中间仍挤，原因是两条：
     ① `width: 25%` 在自动表格布局里只是**建议值**，内容多的列照样抢空间；
     ② 站点对表格设了 `width: max-content`，用它算出的可用宽度本身就等于 max-content，
        百分比形同虚设，浏览器转而按内容分配。
   所以要真等宽必须三条一起改：display 回 table（table-layout 只在表格布局下生效）、
   宽度改为 100%（拿到真实可用宽度）、table-layout: fixed（让百分比成为硬约束）。
   只对「总体学说」这类表生效。判据是 `table:has(> caption)` **加上**首行含图文格——
   实测这个组合只命中 4 个表（Land/Air/Naval/Special_forces doctrine），
   而单用 caption 会命中 577 个表（其中 572 个是多行数据表），一刀切会把它们全改坏。
   还有一处必须抵住：站点对表格设了 `width: max-content`，它算出的可用宽度本身就等于
   max-content，百分比形同虚设；所以要显式改回 `display: table` + `width: 100%`，
   再用 `table-layout: fixed` 让百分比成为硬约束。只写 `width: 25%` 是不够的——
   自动布局里它只是建议值，内容多的列照样抢空间（第 3 列撑开、第 4 列留白就是这么来的）。 */
.content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) {
  display: table;
  width: 100%;
  /* 关键：必须同时抬掉全局的 min-width: 100%（L322）与末列的 min-width: 11em（L342，≈176px）。
     否则窄屏下（例如 420px 视口、容器 385px）两条最小宽度就把表宽占满，
     中间两列只剩十几像素，「等宽」在物理上不可能实现——实测就是那样。
     40em ≈ 620px 是每列约 155px 的下限（图标 64px + 文字约 80px ≈ 5 个汉字/行）：
     30em 时每列仅 116px，正文只剩约 3 字/行，仍然难读，故取 40em。
     低于容器宽度时表格横向滚动，由 .content table 的 overflow-x: auto 承担——
     4 列对照表在手机上一行本就放不下，横滚比「一个字一行」可读。 */
  min-width: 40em !important;
  table-layout: fixed;
}
.content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td {
  width: 25% !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* 窄屏：图文竖排（图标在上、文字在下），与站内立绘格同一手法。
   起因：420px 视口下即使给了 40em 最小宽度，仍要横向滚动——因为每列必须同时容纳
   「64px 图标 + 右侧文字」。竖排后文字拿到整格宽，列的最小宽度需求降到「图标本身 64px」，
   于是表格不必横滚，观感也和站内其他图文格一致。
   实测这 4 个表的每格都是 `<td><div style="display:flex">…`（flex 是 td 的直接子元素），
   所以用 `> div[style*="flex"]` 精确命中，不会波及格内其他 div。
   为什么同时写「容器查询」和「视口媒体查询」两套：
     起初只用 @media (max-width:560px)，但用户手机上（视口 543px）实测没生效，
     排查时无法确定是缓存还是阈值——视口宽度取决于设备，我这边又无法用浏览器验证。
     容器查询按**正文区域的实际宽度**判断（.content 成为容器），
     与设备/视口无关，也不受 iframe 与桌面窗口差异影响，判定更稳定；
     媒体查询留着兜底不支持容器查询的浏览器。两套条件取并集，互不冲突。 */
.content { container-type: inline-size; container-name: docbody; }
@container docbody (max-width: 560px) {
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) {
    min-width: 26em !important;
  }
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td > div[style*="flex"] {
    display: block !important;
  }
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td > div[style*="flex"] > div {
    margin-left: 0 !important;
  }
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td > div[style*="flex"] > img {
    display: block;
    margin: 0 auto .35em;
  }
}
@media (max-width: 560px) {
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) {
    min-width: 26em !important;
  }
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td > div[style*="flex"] {
    display: block !important;
  }
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td > div[style*="flex"] > div {
    margin-left: 0 !important;
  }
  .content table:has(> caption):has(> tbody > tr:first-child > td > div[style*="flex"] > img) > tbody > tr:first-child > td > div[style*="flex"] > img {
    display: block;
    margin: 0 auto .35em;
  }
}
/* Images must never spill out of their cell or the panel. */
.content table img { max-width: 100%; height: auto; }
.content table > tbody > tr > th:last-child,
.content table > tbody > tr > td:last-child { max-width: 46em; }
.content th, .content td { border: 1px solid var(--border); padding: 5px 9px; vertical-align: top; }
.content th { background: var(--table-head); font-weight: 600; text-align: center; }
.content tr:nth-child(even) > td { background: var(--table-alt); }
.content caption { font-weight: 600; padding: 6px; }

/* 信息框 / 侧栏盒子：原站的 float 布局 */
.content .infobox, .content .eu4box, .content .wikitable.infobox {
  float: right; clear: right; width: 320px; margin: 0 0 14px 18px; font-size: 13.5px;
}
.content .infobox table, .content .eu4box table { width: 100%; }
@media (max-width: 700px) {
  .content .infobox, .content .eu4box { float: none; width: 100%; margin: 12px 0; }
}

/* tabber 展开后的分节 */
.tabber-plain { border-left: 3px solid var(--green-light); padding-left: 12px; margin: 12px 0; }
.tabber-heading { margin: 14px 0 6px; color: var(--green-dark); font-size: 14px; }

/* ---------- 目录 ---------- */
.toc { background: var(--toc-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin: 14px 0 18px; font-size: 14px; }
.toc-title { font-weight: 700; margin-bottom: 6px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc1; }
.toc li.lvl-2 { counter-increment: toc1; counter-reset: toc2; }
.toc li.lvl-3 { counter-increment: toc2; margin-left: 1.6em; }
.toc li.lvl-4 { margin-left: 3.2em; font-size: 13px; }
.toc li.lvl-2 > a::before { content: counter(toc1) ". "; color: var(--muted); }
.toc li.lvl-3 > a::before { content: counter(toc1) "." counter(toc2) " "; color: var(--muted); }
.toc li { margin: 2px 0; }

/* ---------- 横幅 / 页脚 ---------- */
.cov-banner { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn); border-radius: var(--radius); padding: 7px 12px; font-size: 13.5px; margin: 10px 0 14px; }
.site-footer { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 30px; color: var(--muted); font-size: 12.5px; }
.site-footer a { color: var(--muted); text-decoration: underline; }

/* ---------- 首页 / 入口 ---------- */
.hero { text-align: center; padding: 26px 16px 6px; }
.hero h1 { font-size: 32px; margin: 0 0 6px; }
.hero p { color: var(--muted); margin: 0 auto; max-width: 720px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 16px; margin: 18px 0; }
.hub-box { background: var(--panel); border: 1px solid var(--border); border-top: 3px solid var(--green); border-radius: var(--radius); padding: 12px 16px 14px; }
.hub-box h2 { margin: 2px 0 8px; font-size: 17px; border: 0; padding: 0; }
.hub-box ul { list-style: none; margin: 0; padding: 0; column-count: 1; }
.hub-box li { margin: 3px 0; font-size: 14.5px; display: flex; gap: 7px; align-items: baseline; }
.hub-box li img { flex: 0 0 auto; }
.hub-box .desc { color: var(--muted); font-size: 12.5px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.stat-row b { color: var(--green-dark); }

/* 搜索页 */
.search-page { max-width: 900px; margin: 0 auto; }
.search-page input[type=search] { width: 100%; padding: 12px 14px; font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; }
#sp-results { margin-top: 16px; }
#sp-results .hit { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 10px; }
#sp-results .hit h3 { margin: 0 0 4px; font-size: 17px; }
#sp-results .hit .snip { color: var(--hint); font-size: 14px; }
#sp-results .hit .snip mark { background: #ffe9a8; }
#sp-results .hit .path { color: var(--muted); font-size: 12.5px; }

/* 列表页 */
.page-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 18px; font-size: 14.5px; }
.page-list a { display: block; padding: 2px 0; }
.list-note { color: var(--muted); font-size: 13px; margin: 6px 0 14px; }

/* ---------- 主题开关（三态：自动 / 浅色 / 深色）----------
   660 个页面共用本文件与 app.js，所以控件由 app.js 注入 .topbar-inner 末尾即可全站生效，
   不需要改动任何页面 HTML（cache/pages 已丢失，HTML 无法重新生成）。
   控件用原生 <select>：三态语义、键盘操作、读屏支持都由浏览器保证，且不新增布局约束。
   宽度上限 5.6em，标签用单字（自动/浅/深）——已算过 560px 断点下的总宽。 */
.theme-pick {
  flex: 0 0 auto; width: auto; max-width: 5.6em;
  font: inherit; font-size: 13px; font-family: inherit;
  color: var(--topbar-nav); background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--radius);
  padding: 5px 4px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f0f4ec' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 8px 5px;
  padding-right: 15px;
}
.theme-pick:hover { background-color: rgba(255,255,255,.2); }
.theme-pick:focus { outline: 2px solid var(--green-light); outline-offset: 1px; }
.theme-pick option { color: var(--text); background: var(--menu-bg); }

/* ---------- 窄屏导航抽屉 ----------
   侧边栏在手机上超过 2000px 高。只把它排到正文之后并不够——用户得一路滚到底才能找到导航。
   改为左侧滑出抽屉 + 常驻「目录」按钮（见 app.js）。侧边栏不移动 DOM，只切换定位方式。 */
.nav-toggle, .sb-backdrop { display: none; }
.theme-pick { display: none; }
.has-js .theme-pick { display: block; }   /* 无 JS 时不留一个点了没反应的控件 */

@media (max-width: 900px) {
  /* 正文在前、侧边栏在后（flex order）。侧边栏收起时完全不占位、不可见，
     打开时变成固定定位的左侧抽屉。 */
  .wrap { flex-direction: column; gap: 14px; align-items: stretch; }
  .wrap > .content { order: 1; padding: 16px 14px 22px; width: auto; }
  .wrap > .sidebar {
    order: 2; width: auto; flex: 0 0 auto;
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
    width: min(84vw, 330px); max-height: none; overflow-y: auto;
    border: 0; border-right: 1px solid var(--border); border-radius: 0;
    padding: 14px 14px 28px; font-size: 14px;
    transform: translateX(-102%); transition: transform .22s ease; visibility: hidden;
  }
  body.sb-open .wrap > .sidebar { transform: none; visibility: visible; }

  .sb-backdrop {
    display: block; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 55;
    background: var(--backdrop); opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.sb-open .sb-backdrop { opacity: 1; pointer-events: auto; }

  .nav-toggle {
    display: block; position: fixed; right: 12px; bottom: 12px; z-index: 50;
    padding: 10px 15px; font: inherit; font-size: 14px; cursor: pointer;
    color: #fff; background: var(--green); border: 0; border-radius: 999px;
    box-shadow: 0 3px 12px var(--shadow-strong);
  }
  body.sb-open .nav-toggle { display: none; }   /* 抽屉打开时按钮让位给遮罩 */

  .sb-group { border-top: 1px solid var(--border); }
  .sb-group:first-child { border-top: 0; }
  .sb-group > summary {
    cursor: pointer; padding: 10px 2px; font-weight: 600; font-size: 13px;
    letter-spacing: .04em; color: var(--green-dark); list-style: none;
  }
  .sb-group > summary::-webkit-details-marker { display: none; }
  .sb-group > summary::after { content: ' ▾'; color: var(--muted); font-weight: 400; }
  .sb-group[open] > summary::after { content: ' ▴'; }
  .sb-group > ul { margin: 0 0 8px; }
  .sidebar h3 { display: none; }          /* 分组标题改由 <summary> 承担 */

  .searchbox input { width: 150px; }
  .topnav { display: none; }
  h1.page-title { font-size: 22px; }
  .content h2 { font-size: 19px; }
  .content h3 { font-size: 16.5px; }
  .toc { font-size: 13.5px; }
  .hub-grid { grid-template-columns: 1fr; }
  .page-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 12px 10px 28px; }
  .content { padding: 14px 12px 18px; }
  .content table { font-size: 13px; }
  .content table th, .content table td { padding: 4px 6px; }
  .searchbox input { width: 96px; }
  .topbar-inner { gap: 8px; }
  .brand { font-size: 15px; }
  .brand small { display: none; }      /* 只留站名，把宽度让给搜索框与主题开关 */
  .theme-pick { max-width: 2.9em; }
}

/* ==================================================================
   深色主题的细节修补
   ------------------------------------------------------------------
   骨架颜色已由上面的变量接管，这里只处理三类变量管不到的东西：
   1) 上游 MediaWiki 内联写死的浅色底/字色（内联样式特异性最高，只有 !important
      能压住）。106 种内联色里前 21 种覆盖 99.6%，故只针对这一小撮，且每条规则
      都必须真的命中内容——通用选择器会参与近 19 万次样式重算，不能随意加。
   2) 图片：9,101 张白底游戏截图/国策树，白底是画面内容而非页面底色，反色会毁掉
      截图与国旗的真实配色，因此保持原图，只给容器一点边框与圆角，让亮块看起来
      像有意为之的画框。
   3) 打印时强制回浅色：深色令牌如果在打印路径上生效，深底会整片吃掉墨水。
   ================================================================== */
:root[data-theme="dark"] .content img,
:root[data-theme="dark"] .hub-box img {
  background: #fff; border: 1px solid var(--border); border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .content img,
  :root:not([data-theme]) .hub-box img {
    background: #fff; border: 1px solid var(--border); border-radius: 3px;
  }
}

/* 上游内联浅色底：MediaWiki 把底色写死在 style 里，特异性压过任何普通选择器，
   只有 !important 能压住。真实的「半亮半暗」实例是国家/机制页的导航框：
     <td style="width:210px; background:#EDEDED; font-weight:bold">政治</td>
   深色下该格保持亮灰、相邻的链接格变暗，于是同一张表一半亮一半暗。
   全站实测：表格单元格内这类浅色底 2,550 处（409 页），其他元素 1,781 处，
   且「浅色底 + 深色字」的组合为 0 处，所以把它统一改写成 --cell-tint 不会
   制造浅字压深底的反例。
   background-image 无需排除：属性选择器要求冒号紧跟属性名，`background-image:`
   在 `background` 与 `:` 之间多一个 `-`，匹配不上。
   #d8fcde/#d8e8f0/#d8d8ff/#fbfbd8/#f0e8d8/#ffd8d8 是国策/成就的彩色标签底
   （各约 100–180 处），同样处理；#ffd8d8 已有旧规则，故顺手并入这里。 */
/* theme-dark-inline-bg:start */
/* 只保留真实存在的形式：实测 `background-color:#ededed` 在上游 HTML 里从未出现，
   `#eee` 只出现在 background-image 里（选中器刻意不匹配它），`#efefef/#f9f9f9`
   只用 background 简写。命中 0 次的规则参与全站样式重算却毫无作用，故不写。 */
:root[data-theme="dark"] :is(td, th, div, span, p, li):is(
    [style*="background:#ededed" i], [style*="background: #ededed" i],
    [style*="background:#efefef" i], [style*="background: #efefef" i],
    [style*="background:#f9f9f9" i], [style*="background: #f9f9f9" i],
    [style*="background-color:#f9f9f9" i], [style*="background-color: #f9f9f9" i],
    [style*="background:#fafafa" i], [style*="background: #fafafa" i],
    [style*="background:white" i], [style*="background: white" i]
  ) { background-color: var(--cell-tint) !important; }

:root[data-theme="dark"] :is(td, th, div, span, p, li):is(
    [style*="background:#d8fcde" i], [style*="background-color:#d8fcde" i],
    [style*="background:#d8e8f0" i], [style*="background-color:#d8e8f0" i],
    [style*="background:#d8d8ff" i], [style*="background-color:#d8d8ff" i],
    [style*="background:#fbfbd8" i], [style*="background-color:#fbfbd8" i],
    [style*="background:#f0e8d8" i], [style*="background-color:#f0e8d8" i],
    [style*="background:#ffd8d8" i], [style*="background-color:#ffd8d8" i]
  ) { background-color: var(--cell-tint) !important; }

/* 上游内联深色字（含内联 <svg> 的 fill），在深色底上不可读 */
:root[data-theme="dark"] :is(td, th, div, span, p, li)[style*="color:black" i],
:root[data-theme="dark"] :is(td, th, div, span, p, li)[style*="color: black" i],
:root[data-theme="dark"] :is(td, th, div, span, p, li)[style*="color:#000" i],
:root[data-theme="dark"] [fill="#000000" i],
:root[data-theme="dark"] [fill="#000" i] { color: var(--text) !important; fill: var(--text) !important; }
/* theme-dark-inline-bg:end */

@media (prefers-color-scheme: dark) {
  /* 「自动」状态必须与上面的手动深色逐条同步：选择器只差冒号前那一段。
     已核对两段块内规则数一致（tools/theme-audit.mjs 第 9 节）。 */
  :root:not([data-theme]) :is(td, th, div, span, p, li):is(
      [style*="background:#ededed" i], [style*="background: #ededed" i],
      [style*="background:#efefef" i], [style*="background: #efefef" i],
      [style*="background:#f9f9f9" i], [style*="background: #f9f9f9" i],
      [style*="background-color:#f9f9f9" i], [style*="background-color: #f9f9f9" i],
      [style*="background:#fafafa" i], [style*="background: #fafafa" i],
      [style*="background:white" i], [style*="background: white" i]
    ) { background-color: var(--cell-tint) !important; }

  :root:not([data-theme]) :is(td, th, div, span, p, li):is(
      [style*="background:#d8fcde" i], [style*="background-color:#d8fcde" i],
      [style*="background:#d8e8f0" i], [style*="background-color:#d8e8f0" i],
      [style*="background:#d8d8ff" i], [style*="background-color:#d8d8ff" i],
      [style*="background:#fbfbd8" i], [style*="background-color:#fbfbd8" i],
      [style*="background:#f0e8d8" i], [style*="background-color:#f0e8d8" i],
      [style*="background:#ffd8d8" i], [style*="background-color:#ffd8d8" i]
    ) { background-color: var(--cell-tint) !important; }

  :root:not([data-theme]) :is(td, th, div, span, p, li)[style*="color:black" i],
  :root:not([data-theme]) :is(td, th, div, span, p, li)[style*="color: black" i],
  :root:not([data-theme]) :is(td, th, div, span, p, li)[style*="color:#000" i],
  :root:not([data-theme]) [fill="#000000" i],
  :root:not([data-theme]) [fill="#000" i] { color: var(--text) !important; fill: var(--text) !important; }
}

@media print {
  .topbar, .sidebar, .site-footer, .toc, .cov-banner, .theme-pick { display: none; }
  .content { border: 0; padding: 0; }
  /* 无论当前是哪种主题，打印一律回浅色 */
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;
    --bg: #ffffff;
    --panel: #ffffff;
    --text: #000000;
    --muted: #444444;
    --border: #999999;
    --green: #5b7f5b;
    --green-dark: #3f5c3f;
    --green-light: #96be96;
    --link: #245a8d;
    --link-visited: #6b4a86;
    --table-head: #e8e8e8;
    --table-alt: #f7f7f7;
    --cell-tint: #f2f2f2;
    --warn: #8a6d1f;
    --warn-bg: #fdf3d6;
    --warn-border: #e6d391;
    --input-bg: #ffffff;
    --input-text: #000000;
    --input-border: #999999;
    --menu-bg: #ffffff;
    --menu-border: #dddddd;
    --hover-bg: #f0f0f0;
    --cur-bg: #e4e4e4;
    --nav-label: #3f5c3f;
    --code-bg: #f0f0f0;
    --pre-bg: #f7f7f7;
    --blockquote-bg: #f7f7f7;
    --blockquote-text: #333333;
    --head4: #222222;
    --toc-bg: #f7f7f7;
    --hint: #333333;
    --special-link: #245a8d;
    --mark-bg: #ffe9a8;
    --shadow: rgba(0, 0, 0, .2);
    --shadow-strong: rgba(0, 0, 0, .2);
    --backdrop: rgba(0, 0, 0, .2);
  }
  :root[data-theme="dark"] .content img,
  :root[data-theme="dark"] .hub-box img { border: 0; }
}