/* ============================================================
   山河纪 · 多端响应式适配
   ---------------------------------------------------------------
   为什么单独一个文件、且必须放在 style.css / v3.css 之后：
     样式表按顺序决胜，同级选择器「后写的赢」。把整站的自适应规则
     集中在一处，比散落到两个文件里更好维护——要改设备分档只改这里。

   设备分档的依据是 **CSS 像素宽度**（不是物理分辨率），按真实机型取：
     1441+       大屏 PC / 超宽屏          → 内容仍限宽 1320，只放大留白
     1024—1440   常规 PC / 平板横屏        → 左侧固定导航栏（宽 224）
     861—1023    平板竖屏（iPad 810/834）  → 顶部横条 + 导航抽屉
     641—860     折叠屏内屏展开（Z Fold 内屏约 673×841）
                 大屏手机横屏
     481—640     大屏直板手机（Pixel 8 Pro 412 / iPhone Pro Max 430 以上档）
     376—480     主流直板手机（iPhone 15 393 / 多数安卓 360—412）
     321—375     小屏手机、折叠屏外屏（Z Fold 外屏约 344）
     ≤320        折叠屏外屏极窄态（Z Flip 外屏约 260）

   必须处理的引擎差异（Windows / Android / iOS / 鸿蒙都在此列）：
     · iOS Safari：默认会在横屏时放大字号 → -webkit-text-size-adjust:100%
       ；刘海/灵动岛遮挡 → 需 viewport-fit=cover + env(safe-area-inset-*)
     · 鸿蒙 ArkWeb：基于 Chromium，标准 CSS 全部支持；但部分版本对
       dvh/svh 支持不完整 → 一律先写 vh 再用 @supports 覆盖成 dvh
     · Android Chrome：地址栏收起/展开会改变视口高度 → 同样靠 dvh 兜底
     · 触摸设备没有 hover：靠 @media (hover:none) 关掉「必须悬停才可见」
       的信息，并把可点区域撑到 ≥44px（Material / HIG 的最小触控目标）
   ============================================================ */

:root{
  /* 移动端页头高度：桌面 66px，小屏收到 54px，横屏再收到 48px */
  --hd-h:66px;
  /* 移动端统一横向留白，供新视图复用 */
  --pad-x:24px;
  /* 安全区兜底：不支持 env() 的浏览器取 0 */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
}

/* 关掉 iOS 横屏的自动放大，避免手机上版式突然跳变 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* 触屏上禁止长按选中造成的误操作高亮，但正文仍允许选择 */
button,.btn,.chip,.tabs span,.tag,nav a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ---------- 通用横向滚动容器（新视图可直接复用） ---------- */
.scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;overscroll-behavior-x:contain}
.scroll-x>.scroll-x-inner{min-width:max-content}

/* ============================================================
   页头与导航
   桌面：logo + 横排导航 + 工具按钮
   移动：logo + ☰ + 工具按钮，导航收进抽屉面板（nav-toggle 由 app.js 控制）
   ============================================================ */
.nav-toggle{display:none;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;border-radius:10px;cursor:pointer;
  background:rgba(var(--hlRGB),.04);border:1px solid var(--line2);color:var(--tx2);font-size:1.1333rem;line-height:1}
.nav-toggle:hover{border-color:var(--line);color:var(--accent2)}
.nav-toggle .bars{display:block;width:17px;height:11px;position:relative}
.nav-toggle .bars i{position:absolute;left:0;right:0;height:1.6px;border-radius:2px;background:currentColor;transition:.22s}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:4.7px}
.nav-toggle .bars i:nth-child(3){top:9.4px}
body.nav-open .nav-toggle .bars i:nth-child(1){top:4.7px;transform:rotate(45deg)}
body.nav-open .nav-toggle .bars i:nth-child(2){opacity:0}
body.nav-open .nav-toggle .bars i:nth-child(3){top:4.7px;transform:rotate(-45deg)}

/* 抽屉遮罩：全站默认不出现，只在 ≤1023 的抽屉档启用（见该档的 .nav-scrim）。
   这里必须有默认 display:none —— 缺了它，桌面端会在整页上盖一层永远不消失的暗幕。 */
.nav-scrim{display:none}

/* ============================================================
   ≥1441 大屏 PC：内容仍限宽，只把主信息的字号与留白放大一档
   ============================================================ */
@media (min-width:1441px){
  .hero{padding:86px 64px}
  .hero h1{font-size:4.2667rem}
  .sec-head .cn{font-size:2.2rem}
}

/* ============================================================
   ≤1180 小笔记本 / 平板横屏
   注意这里不再有页头规则：页头在 ≥1024 是左侧导航栏、≤1023 是
   顶部横条 + 抽屉，两档各有自己的段落，中间不留「缩一缩再挤一挤」
   的过渡档——那正是原来 1024—1180 区间折行的来源。
   ============================================================ */
@media (max-width:1180px){
  :root{--pad-x:20px}
  .hero{padding:60px 40px}
  .hero h1{font-size:3.0667rem}
  .hero::after{font-size:0.8rem;letter-spacing:8px;right:26px;bottom:20px}
}

/* ============================================================
   ≥1024 桌面 / 平板横屏：页头改成左侧固定导航栏
   ---------------------------------------------------------------
   为什么必须改结构而不是调数值：
     品牌名 + slogan + 12 个栏目 + 4 个工具按钮，横排一行实测需要
     约 1577px，而 1240 宽的窗口里 .hd 只有约 1192px 可用——差近
     400px。挤不下的结果是三处同时折叠：nav{flex-wrap:wrap} 把栏目
     折成两行；.logo 被 flex 压窄，「山 河 纪」逐字折成竖排；右侧
     「未登录」也被挤成两行。三条叠在一起就是「标题与栏目错乱」。
     即使藏掉 slogan、导航字号降到 12.8px、工具区只留图标，仍需约
     1235px，在 1100—1400 区间依然放不下。竖排到左侧才是根治。

   作用域限定在 .app-shell / .site-header：
     console.html（管理后台）复用同一套 style.css 与 .hd/.logo 类，
     但它没有 12 个栏目，套上侧栏会是空荡荡一条，因此不参与本段。
   ============================================================ */
@media (min-width:1024px){
  /* 侧栏宽度是「唯一来源」，不允许在别处再硬编码一个值（内容靠
     .app-shell 的 padding-left:var(--sideW) 让位，两个值不一致就会错位）。
     224 → 240：页头三处字号放大后，英文界面下最长的导航项
     "Historical Figures" 在 224px 里会贴边（nowrap 一旦溢出会撑出横向滚动条），
     给 16px 余量。上限 280 内有护栏。 */
  :root{--sideW:240px}

  /* 内容整体避开侧栏：用 body 的 padding 而不是给 main 加 margin，
     这样 main / .site-notice / footer 等所有全宽块一起让位，且
     main{max-width:1320px;margin:0 auto} 仍在剩余空间里居中。 */
  .app-shell{padding-left:var(--sideW)}

  /* ⚠️ overflow 必须是 visible：底部用户菜单的面板要向右滑出侧栏。
     改回 hidden 会把面板整块裁掉——现象是「悬停/点击毫无反应」，
     且控制台一声不响（面板确实展开了，只是没人看得见）。 */
  .site-header{position:fixed;left:0;top:0;bottom:0;width:var(--sideW);
    z-index:100;border-bottom:0;border-right:1px solid var(--line2);
    overflow:visible}

  .site-header .hd{max-width:none;width:100%;height:100%;margin:0;
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;padding:22px 14px 16px}

  /* 品牌：侧栏里改竖排，slogan 收到品牌名下方 */
  .site-header .logo{display:block;flex:0 0 auto;padding:0 10px 16px}
  .site-header .logo .mark{display:block;font-size:1.85rem;letter-spacing:5px;
    line-height:1.25;white-space:nowrap}
  .site-header .logo .slog{display:block;margin-top:7px;
    font-size:0.8rem;letter-spacing:1.5px;line-height:1.5}

  /* 桌面不使用抽屉，汉堡按钮隐藏 */
  .site-header .nav-toggle{display:none}

  /* 导航：竖排并占满剩余高度；矮屏（如 768 高的笔记本）自身可滚，
     不会把工具区顶出视口 */
  .site-header #nav{display:flex;flex-direction:column;flex-wrap:nowrap;
    gap:2px;margin:0;flex:1 1 auto;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:2px}
  .site-header #nav a{display:block;padding:9px 12px;border-radius:10px;
    font-size:1.0333rem;letter-spacing:1px;white-space:nowrap}

  /* 工具区：沉到底部，与导航之间用细分隔线断开 */
  .site-header .hd-tools{display:flex;flex-wrap:wrap;gap:8px;
    align-items:center;flex:0 0 auto;margin:12px 0 0;
    padding-top:14px;border-top:1px solid var(--line2)}
  .site-header .hd-tools .search-trigger{width:100%;justify-content:center;margin:0}
  .site-header .hd-tools .tag{margin-left:0}

  /* 用户菜单：竖栏把它沉在底部，向下展开会被侧栏底边与视口一起截掉。
     改为鼠标悬停向右滑出——让 .user-menu 铺满一行，面板从它右缘再往右 10px，
     正好落在侧栏外侧；bottom:0 向上对齐，不会超出视口底部。 */
  .site-header .user-menu{width:100%}
  .site-header .user-menu .um-trigger{max-width:100%}
  .site-header .um-panel{left:calc(100% + 10px);right:auto;top:auto;bottom:0;
    animation:umInRight .18s ease both}
  /* 向右展开，箭头应指向右而不是朝上 */
  .site-header .um-trigger[aria-expanded="true"] .um-caret{transform:rotate(-90deg)}
  @keyframes umInRight{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
}

/* ============================================================
   ≤1023 平板竖屏 / 折叠屏内屏展开
   原先只有 1020 一档，且只改了网格列数，页头与字号没动 →
   这个宽度区间（iPad、Z Fold 内屏）此前是「看着能开但排得挤」
   ============================================================ */
@media (max-width:1023px){
  :root{--pad-x:18px}
  /* 单列折叠一律用 minmax(0,1fr)，不要裸 1fr：裸 1fr 的轨道最小值是 auto
     （= 内容 min-content），长内容照样把轨道顶出容器（详见 style.css 同处注释） */
  .home-grid,.geo-grid{grid-template-columns:minmax(0,1fr) !important}
  /* 疆域页折成一栏后，.geo-main 里装着「地图 + 对比/图例」，如果不拆开，
     顺序会变成 地图 → 对比 → 图例 → 朝代档案 → AI，把最常用的朝代档案挤到最后。
     用 display:contents 把包装层摊平，让地图、右栏、对比/图例都成为 .geo-grid 的直接子项，
     再用 order 还原成「地图 → 朝代档案/AI → 对比/图例」。 */
  .geo-main{display:contents}
  .geo-grid > #map,.geo-grid > #map-fallback{order:1}
  .geo-grid > .map-side{order:2;margin-top:0}
  .geo-under{order:3;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;margin-top:0}
  .topic-grid{grid-template-columns:repeat(2,1fr)}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .six-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding:52px 32px}
  .hero h1{font-size:2.6667rem;letter-spacing:6px}
  .sec-head .cn{font-size:1.8rem}
  .modal-mask{padding:18px}
  .modal{max-height:86vh;padding:26px 22px}
  .cmd-mask{padding-top:8vh}
  .cmd-body{max-height:56vh}
  .ck-grid{grid-template-columns:repeat(10,1fr)}
}

/* ============================================================
   ≤1023 平板竖屏 / 折叠屏内屏（Z Fold 673×841）/ 大屏手机横屏
   ★ 这一档起回到「顶部横条 + 抽屉」；1024 及以上是左侧固定导航栏。
     分界从原来的 860 提到 1024——1024 以下侧栏（224px）加上内容
     最小可用宽度就局促了，而 1024 恰好也是平板横屏的起点。
   ============================================================ */
@media (max-width:1023px){
  :root{--hd-h:54px;--pad-x:16px}

  /* 首页「平台总纲」栅格：桌面四列（8 张卡正好 4+4），平板起退两列。
     不跟着宽度「能塞几个塞几个」—— 8 张卡排成 5+3 会像少了三张。 */
  .hp-map,.hp-values{grid-template-columns:repeat(2,minmax(0,1fr))}

  .hd{height:auto;min-height:calc(var(--hd-h) + var(--sat));
    padding:var(--sat) calc(var(--pad-x) + var(--sar)) 0 calc(var(--pad-x) + var(--sal));
    gap:10px;flex-wrap:nowrap}
  /* 品牌名：横条宽度不够时**不许被压窄**。
     ★ 原来写的是 flex:0 1 auto（可收缩），而 .logo .mark 是 nowrap 的：
       一旦容器不够，.logo 的盒子会被压到比文字还窄，文字溢出自己的盒子，
       直接把后面的汉堡按钮盖住 —— 浏览器不报错、断言看不出、
       截图上只是「那个圆圈好像叠在字上」。实测（放大字号前就已存在）：
       360px 中文压 18px、英文压 63px；393px 起才勉强不压。
       改成不可收缩后，空间不足会变成「整行溢出」，那是能被测出来的错误，
       而不是静默重叠。 */
  /* margin-right:auto 由品牌名承担「把工具区推到最右」的活。
     原来是抽屉按钮上的 margin-right:auto —— 按钮挪到品牌名左侧后，
     那个 auto 会把品牌名一起推走，工具区反而贴在中间。 */
  .logo{flex:0 0 auto;min-width:0;margin-right:auto}
  /* nowrap 是防「山 河 纪」在空格处被折成两行——横条宽度不够时，
     中文品牌名的第一反应就是逐字断行，之前 1240 宽下的错乱正是这个。 */
  .logo .mark{font-size:1.5rem;letter-spacing:3px;white-space:nowrap}
  .logo .slog{display:none}
  /* 抽屉按钮排在品牌名左侧（DOM 里已在前面，order 再钉一次防止后来者改回右侧），
     工具区整体靠右由 .logo 的 margin-right:auto 承担。 */
  .nav-toggle{display:inline-flex;order:-1;margin-right:0}
  .hd-tools{order:2;display:flex;align-items:center;gap:8px;min-width:0}
  nav{order:3}

  /* ----------------------------------------------------------
     页头弹性：账号胶囊是唯一的「可收缩」元素
     ----------------------------------------------------------
     ⚠️ 页头的 min-content 是**登录态**驱动的，而历轮验收全是按未登录量的：
       未登录胶囊里只有「未登录」三个字（≈71px），登录后变成
       「头像 + 用户名 + ▾」（style.css 里 flex:0 0 auto、max-width 190/132）。
       于是 ≤480 档实测胶囊恒为 132px，页头内容右缘落在 419px：
         → **376—418px 这一段（iPhone 12/13/14 = 390、Pixel = 412）登录后
           整站每页都出横向滚动条**，390 档实测溢 28px；
           而 ≤375 / ≤320 两档因为把 max-width 写死到 112/72 反而没露馅。
       nav-layout.test.js 里记的「未登录 391px、带角色徽标 502px」都是未登录的数，
       所以这个带一直是盲区（不是这一轮改出来的：≤1023 下导航在抽屉里，
       栏目数量根本不进页头横排）。
     修法是「只让胶囊缩」，而不是再加一档媒体查询去写死更小的 max-width ——
     后者要一路补档，且 376 那种极限宽度仍会差几像素：
       ① 同排的检索 / 外观 / 语言 / 角色徽标一律钉成 flex:0 0 auto。
          不钉的话它们会按 flex-shrink × 基准宽度**按比例**跟着缩，
          图标与「EN」会被压扁（文字在 ≤1023 已藏，压的就是那个图标）；
       ② `.user-menu` 改成 flex:0 1 auto + min-width:0：它吸收全部溢出；
       ③ 配套的 `.um-trigger` / `.um-uname` 的 min-width:0 写在 style.css 里
          （那边有详细说明）—— 没有它，用户名会让不出宽度，胶囊照样缩不动。
     用户名超长时走省略号，信息不丢：全名就在下拉头部 #um-hd 里
     （与 ≤480 撤角色徽标同一个取舍）。

     ⚠️ ④ `.user-menu` 必须一起改成 `display:flex` —— 只给容器加
       `min-width:0` 是不够的：`.um-trigger` 是个 `<button>`，而 button 的
       `width:auto` 在 Chrome 里按 `fit-content` 算（不是撑满父容器），
       于是父容器缩到 80px 时按钮自己仍是 max-width 的 132px，**溢出自己的
       父容器 52px**，最后照样把 .hd-tools 撑到 429px。实测：
         #user-menu  w=80（缩对了）  #um-trigger w=132（没缩）→ 文档仍溢 39px
       把 `.user-menu` 变成 flex 容器后按钮才是它的 flex item，才能被压缩。
       ⚠️ ⑤ 别想用 `overflow:hidden` 图省事：下拉面板是绝对定位、
          `top:calc(100% + 8px)` 向下展开的，会被整块裁掉 ——
          现象是「点账号毫无反应」（面板确实开了，只是看不见）。
     ---------------------------------------------------------- */
  .site-header .hd-tools .search-trigger,
  .site-header .hd-tools .th-toggle,
  .site-header .hd-tools #lang-toggle,
  .site-header .hd-tools #role-badge{flex:0 0 auto}
  .site-header .hd-tools .user-menu{display:flex;flex:0 1 auto;min-width:0}
  .site-header .hd-tools .um-trigger{flex:0 1 auto;min-width:0}

  /* ----------------------------------------------------------
     导航抽屉：从左侧划出
     ----------------------------------------------------------
     ★ 用 top + height，不要用 top + bottom。
       .site-header 带 backdrop-filter，按 CSS Filter Effects 规范它会为
       fixed 后代建立包含块 —— 此时 bottom:0 相对的是「页头那 54px 高的盒子」，
       抽屉高度会塌成一条。写成 top:页头高 + height:(视口高 − 页头高)，
       无论包含块是视口还是页头盒子，结果都一致，不必赌浏览器实现。
     ★ 关闭态用 transform 移出而不是 display:none：
       要先有可过渡的几何才能「划出」，display 是离散量、不参与过渡。
       代价是关着的时候元素仍在 DOM 里，所以配 visibility:hidden —— 否则
       抽屉里的 13 个链接会被 Tab 键逐个聚焦到屏幕外，读屏也会念出来。
     ---------------------------------------------------------- */
  #nav{display:flex;position:fixed;left:0;right:auto;
    top:calc(var(--hd-h) + var(--sat));
    width:min(288px,80vw);
    height:calc(100vh - var(--hd-h) - var(--sat));
    height:calc(100dvh - var(--hd-h) - var(--sat));
    flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;
    padding:12px calc(var(--pad-x) + var(--sar)) calc(18px + var(--sab)) calc(var(--pad-x) + var(--sal));
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--hdBg2);backdrop-filter:blur(16px);
    border-right:1px solid var(--line);
    box-shadow:10px 0 40px rgba(var(--shRGB),.45);
    transform:translateX(-100%);visibility:hidden;z-index:99;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s linear .28s}
  body.nav-open #nav{transform:translateX(0);visibility:visible;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility 0s}
  #nav a{font-size:1.1333rem;padding:12px 14px;border-radius:10px;border:1px solid transparent}
  #nav a.on{border-color:var(--line)}
  /* 遮罩：抽屉之外的地方压暗，同时充当「点外面收起」的点击面。
     ★ 横向一律用 left:0 + right:0，**不要写 width:100vw**：
       100vw 含纵向滚动条的宽度（900px），而文档可用宽度只有 clientWidth（891px），
       于是「关着不显示却仍占位」的遮罩会给整页塞出一条 9px 的横向溢出 ——
       桌面窄窗口（如 900/768）能左右拖，而 ≤640 的移动模拟用的是覆盖式滚动条，
       宽度恰好等于 100vw，所以只在窄桌面露馅、手机上看不出来。
       left:0+right:0 取的是包含块（带 backdrop-filter 的页头）的宽度，天然等于 clientWidth。
     ★ 纵向仍用视口单位而不是 height:100%：同上，避开 backdrop-filter
       带来的包含块问题（若用 bottom:0，只盖得住页头那一条）。 */
  .nav-scrim{display:block;position:fixed;top:0;left:0;right:0;
    height:100vh;height:100dvh;
    background:var(--mask);opacity:0;pointer-events:none;
    transition:opacity .28s ease;z-index:98}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto}
  /* 抽屉打开时锁住页面滚动 */
  body.nav-open{overflow:hidden}

  /* 工具区压缩：只留图标与必要状态。
     靠右改由 .hd-tools 的定位承担，这里不能再留 margin-left:auto——
     它现在作用在容器内部，会把工具组内部撑开。 */
  .search-trigger{margin-left:0;padding:7px 10px}
  .search-trigger kbd{display:none}
  .search-trigger span{display:none}
  .search-trigger::before{content:"🔍";font-size:1rem;line-height:1}
  #login-state,#role-badge,#lang-toggle{font-size:0.84rem;padding:3px 9px;white-space:nowrap}
  #login-state{max-width:96px;overflow:hidden;text-overflow:ellipsis}

  main{padding:24px calc(var(--pad-x) + var(--sar)) calc(64px + var(--sab)) calc(var(--pad-x) + var(--sal))}
  .console-wrap{padding:20px calc(var(--pad-x) + var(--sar)) calc(60px + var(--sab)) calc(var(--pad-x) + var(--sal))}
  .site-notice,.i18n-scope{margin-left:calc(var(--pad-x) + var(--sal));margin-right:calc(var(--pad-x) + var(--sar))}
  footer{padding:24px 16px calc(24px + var(--sab))}

  .sec-head{margin:4px 0 18px}
  .sec-head .cn{font-size:1.5333rem;letter-spacing:2px}
  .sec-head .en{font-size:0.7333rem;letter-spacing:2px}
  .card{border-radius:14px;padding:16px}

  .hero{padding:38px 22px;border-radius:18px;margin-bottom:22px}
  .hero h1{font-size:2rem;letter-spacing:4px;line-height:1.3}
  .hero .sub{font-size:0.9333rem;letter-spacing:1.5px;margin-top:10px}
  .hero::after{display:none}   /* 竖排装饰字在窄屏会压到正文 */
  .hero .btn{margin:6px 6px 0 0}

  .modal-mask{padding:12px;align-items:flex-end}
  .modal{width:100%;max-width:none;max-height:92vh;max-height:92dvh;
    border-radius:16px 16px 0 0;padding:22px 16px calc(22px + var(--sab))}
  .modal h2{font-size:1.4rem}
  .modal .x{top:12px;right:12px}
  .lt-modal{max-width:none}
  .lt-d-head h2{font-size:1.3333rem}
  .lt-text{font-size:1rem;line-height:2.1;padding:13px 14px}

  /* 命令面板：全屏化，避免手机上被键盘顶飞 */
  .cmd-mask{padding:calc(var(--sat) + 8px) 10px 10px}
  .cmd{width:100%;border-radius:14px}
  .cmd-head{padding:12px 14px}
  .cmd-head input{font-size:1rem}
  .cmd-body{max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px)}
  .cmd-foot{gap:10px;font-size:0.7333rem}

  .tl-inner{height:250px}
  .tl-axis,.evt.cn,.evt.wd,.evt.world{top:120px}
  .tl-tick{top:120px}
  .tl-track-label{top:26px}
  .tl-track-label.w{top:184px}
  .tl-yearbar{font-size:0.6667rem}

  .tb-grid,.gv-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
  .tb-facts{grid-template-columns:1fr 1fr}
  .ds-two{grid-template-columns:1fr;gap:10px}
  /* 必须带 `.dv-split`：style.css 的两栏那条是 `#dv-body.dv-split`，只写 `#dv-body`
     特异度不够，等于没写（详见 style.css 的 ≤900 段注释） */
  #dv-body.dv-split{grid-template-columns:1fr}
  .dv-list{max-height:230px}
  .dv-eval{grid-template-columns:1fr;gap:12px}
  .dv-axis,.dv-trel{padding-left:0}

  .frm{grid-template-columns:1fr}
  .fl-chip{max-width:100%}
}

/* ============================================================
   ≤640 大屏直板手机（含 Android 大屏与 iPhone Pro Max 档以上）
   单列化：所有两列以上网格一律压成一列或两列
   ============================================================ */
@media (max-width:640px){
  .topic-grid,.stat-row,.six-grid{grid-template-columns:1fr}
  /* 首页「平台总纲」：手机一律单列（两列时卡片内「核心 AI 能力 / 主打通路」会折成四五行） */
  .hp-map,.hp-values,.hp-plats{grid-template-columns:1fr}
  /* 疆域页：地图下方「对比模式 / 图例」在手机上竖排，两个 select 才排得下 */
  .geo-under{grid-template-columns:minmax(0,1fr) !important;gap:11px}
  /* 地理数据库卡片在手机上退成单列、卡片宽度接近满屏，
     150px 的出血图在 340px 宽的卡片上就显得又扁又小 —— 提到 178px，
     整屏看起来才像「一屏认出一个省 / 一座山」。 */
  .gv-dbcard .gv-photo.lg{height:178px}
  /* 合集阅读器：弹窗在手机上只有 ~330px 宽，244px 的目录会把正文挤成竖排字。
     拆成上下两段 —— 目录在上（限高滚动），正文在下。 */
  .wl-full-main{grid-template-columns:minmax(0,1fr)}
  .wl-toc{border-right:none;border-bottom:1px solid var(--line2)}
  .wl-toc .wl-full-nav{max-height:26vh}
  .wl-full-body{max-height:none;padding:13px 14px}
  .wl-read-tip{display:none}
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .ach-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
  .ck-grid{gap:4px}
  .tb-facts{grid-template-columns:1fr}

  /* 后台表格：改成可横向拖拽的块，避免列被挤成竖排字 */
  .tbl{display:block;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{padding:7px 8px;font-size:0.8333rem}
  .bar{min-width:56px}

  .ls-list,.ds-list{gap:9px}
  .ds-item{padding:12px 13px}
  .ds-era{font-size:1rem}
  .cap-item,.env-item,.caps-item{font-size:0.8333rem}
}

/* ============================================================
   ≤480 主流直板手机（iPhone 15 = 393 / 多数安卓 360—412）
   ============================================================ */
@media (max-width:480px){
  :root{--pad-x:13px}
  body{font-size:0.9667rem}
  .logo .mark{font-size:1.35rem;letter-spacing:2px}
  .hero{padding:30px 17px}
  .hero h1{font-size:1.6667rem;letter-spacing:3px}
  .hero .sub{font-size:0.8667rem;letter-spacing:1px}
  .sec-head .cn{font-size:1.3333rem}
  .sec-head .cn::before{font-size:0.7333rem;margin-right:8px}
  .card{padding:14px;border-radius:13px}
  .btn{padding:9px 16px;font-size:0.8667rem;letter-spacing:1px}
  .btn.sm{padding:6px 12px;font-size:0.8rem}
  .inp,.sel{font-size:1rem}   /* ≥16px 才不触发 iOS 聚焦缩放；这里 15px 配合 text-size-adjust 已可控 */

  .tb-grid,.gv-grid{grid-template-columns:1fr}
  .tb-facts{grid-template-columns:1fr}
  .tb-avatar{flex:0 0 32px;width:32px;height:32px;font-size:0.8667rem}
  .lt-text{font-size:0.9667rem;line-height:2;padding:11px 12px}
  .lt-sec-b{font-size:0.8667rem;line-height:1.9}
  .modal{padding:18px 13px calc(18px + var(--sab))}
  .modal h2{font-size:1.2667rem}
  .kpi{padding:12px}
  .kpi .n{font-size:1.4667rem}
  .tp-card{padding:12px}
  .ach{padding:11px 6px}

  /* ----------------------------------------------------------
     国家变迁「朝代档案」在手机上把 88px 标签列并掉
     ----------------------------------------------------------
     桌面档 `.dv-row{grid-template-columns:88px 1fr}` 是「左边窄标签、右边内容」。
     320px 上卡片内宽只有 ~266px，88px 标签 + 14px 间距之后，内容列只剩 ~164px，
     装不下「咸阳（今陕西咸阳）」这种带全角括号 + 读音的长胶囊（附注行更窄，实测只剩 27px），
     胶囊撑破卡片 → 整页横向溢出（320 档 92px / 414 档仍有 3px）。
     并成单列后标签自成一行，内容拿满宽度。 */
  .dv-row{grid-template-columns:1fr;gap:3px}
  .dv-cap{max-width:100%;overflow-wrap:anywhere}
  /* 「输入框 + 发言按钮」这类一行两件的组合，窄屏允许换行，别硬挤在一行 */
  #debate-input-row{flex-wrap:wrap}
  .inp{min-width:0}

  /* 触控目标撑到 ≥44px（Material / HIG 最小可点尺寸） */
  .chip,.tabs span,.lt-filters span{min-height:38px;display:inline-flex;align-items:center}
  .nav-toggle{width:44px;height:44px}

  /* ----------------------------------------------------------
     页头收束：把「最小需要多宽」压到极窄屏也能一行放下
     ----------------------------------------------------------
     ⚠️ 页头是全站横向溢出的**唯一来源**：它一旦撑出 scrollWidth，
       13 个页面每一页都会多出横向滚动条。真浏览器实测（改前）：
         · 未登录 min-content = 391px → 375 档每页溢 16px、360 档溢 31px
         · 内容宽于视口时 Chrome 会把**布局视口**放大（375 的屏报出
           innerWidth=391），于是 100dvh 算出的抽屉高度和视口高对不上，
           连抽屉几何都会误判 —— 一个页头拖垮一整轮验收就是这么来的。
     下面每一项都是「省几像素、不丢功能」：按钮留白、字距、登录态内边距。
     要真正丢功能的收窄留给 ≤375 / ≤320 两档（字号更小、再藏检索）。
     `.um-trigger` 必须连 `:not(.on)` 那条一起写：style.css 里的选择器
     带 `.user-menu:not(.on)`，特异度更高，只写 `.um-trigger` 覆盖不掉。
     ---------------------------------------------------------- */
  .hd{gap:8px}
  .logo .mark{font-size:1.3rem;letter-spacing:1px}
  .search-trigger{padding:6px 8px}
  /* 带 .site-header 前缀：外观按钮的 padding 是 themes.css 的 `.th-toggle`，
     responsive.css 里另有一条 @media(max-width:1180px) 的 `.th-toggle{padding:6px 9px}`
     排在本块之后，同特异度下会把它盖回去 —— 只能提特异度。 */
  .site-header .th-toggle{padding:5px 7px}
  .um-trigger,.user-menu:not(.on) .um-trigger{padding:5px 8px;gap:6px;max-width:132px}
  .um-avt{width:22px;height:22px}
  #login-state,#lang-toggle{padding:3px 8px;letter-spacing:0}
  /* ----------------------------------------------------------
     手机上撤掉「教师 / 管理员」角色徽标
     ----------------------------------------------------------
     它是教师账号才出现的 `.tag.gold`（约 40px），而手机页头
     本来就只有 320—430px：徽标一上场，整站又会出横向滚动条。
     信息没有丢——同一句话就在用户下拉的头部（app.js 的 #um-hd
     渲染成「用户名 + 角色名」），点一下账号就能看到。
     注意这里**不用** !important：app.js 是 `rb.style.display=show?'':'none'`，
     显示时写的是空串（等于清掉内联值），样式表因此能生效。
     ---------------------------------------------------------- */
  #role-badge{display:none}
}

/* ============================================================
   ≤375 小屏手机 / 折叠屏外屏（Z Fold 外屏约 344）
   ============================================================ */
@media (max-width:375px){
  :root{--pad-x:10px;--hd-h:50px}
  body{font-size:0.9333rem}
  .logo .mark{font-size:1.15rem;letter-spacing:0}
  #login-state{max-width:60px}
  /* 最窄的两档还要再挤一轮：页头 min-content 只要超过视口 1px，
     整站 13 个页面就一起出横向滚动条（见 ≤480 段的说明） */
  .hd{gap:7px}
  .search-trigger{padding:5px 7px}
  #login-state,#role-badge,#lang-toggle{padding:2px 7px;font-size:0.78rem}
  .um-trigger,.user-menu:not(.on) .um-trigger{max-width:112px}
  .um-avt{width:20px;height:20px}
  .hero{padding:24px 14px;border-radius:14px}
  .hero h1{font-size:1.4rem;letter-spacing:2px}
  .hero .sub{font-size:0.8rem}
  .sec-head .cn{font-size:1.2rem}
  .tb-grid,.gv-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .lt-d-meta{gap:5px}
  .tag{font-size:0.6667rem;padding:2px 7px}
}

/* ============================================================
   ≤320 折叠屏外屏极窄态（Z Flip 外屏约 260 / 分屏窄列）
   这一档只保证「能读、能点」，不再追求版式美观
   ============================================================ */
@media (max-width:320px){
  :root{--pad-x:8px}
  .hd{gap:4px}
  .logo .mark{font-size:1.05rem;letter-spacing:0}
  .search-trigger{display:none}      /* 检索可用快捷键/抽屉方式替代，优先保导航 */
  /* ----------------------------------------------------------
     Z Flip 外屏（260px）会把页头的「最小需要宽度」逼到 ~294px
     ----------------------------------------------------------
     页头是全站横向溢出的**唯一来源**：它一旦撑出 scrollWidth，13 个页面
     每页都多一条横向滚动条（320 档刚好卡在 320/320，一点余量都没有）。
     294 = nav-toggle 44 + 品牌 75 + hd-tools 153（= 外观 39 + EN 31 + 账号 67 + 2×8 间距）。
     ⚠️ 品牌字号**不能靠缩小来腾地方**：nav-layout.test.js 钉着这一档的
     `.logo .mark` 必须 ≥1.05rem（用户明确要求过「页头三处字号统一放大两号」）。
     所以下面每一项挤的都是「内边距 / 按钮尺寸 / 间距」，不碰字号：
       · 页头间距 6→4、工具区间距 8→4、菜单按钮 44→40
       · 外观按钮、EN、账号按钮的内边距各收 2—3px、头像 20→18
       · 登录后隐藏账号文字（只留头像 + ▾；全名本来就在用户下拉头部 #um-hd，
         与 ≤480 撤角色徽标同一个取舍）
     实测 294 → ~255，260 档零溢出。真要再窄（<250）就得撤功能了，
     那一刻的取舍与这一档隐藏检索同理：优先保导航与账号。
     ---------------------------------------------------------- */
  .nav-toggle{width:40px;height:40px}
  .site-header .hd-tools{gap:4px}
  .site-header .th-toggle{padding:3px 3px}
  #login-state,#role-badge,#lang-toggle{padding:2px 3px}
  .um-trigger,.user-menu:not(.on) .um-trigger{padding:3px 5px;gap:4px;max-width:72px}
  .user-menu.on .um-name{display:none}
  .um-avt{width:18px;height:18px}
  .hero h1{font-size:1.2667rem}
  .sec-head .cn{font-size:1.1333rem}
  .tb-grid,.gv-grid{grid-template-columns:1fr}
  /* 固定下限 ≥258px 的多列网格：极窄屏一律退单列。
     `repeat(auto-fill,minmax(268px,1fr))` 只认「下限」，不认可用宽度 ——
     260px 的屏减去内边距只剩 ~244px，它照样按 268px 建列，直接撑出横向滚动。
     这类网格有：天下诗文篇目 .lt-grid(268)、作品库 .wl-grid(272)、
     时间轴聚焦 .tf-list(268)、外观面板分组 .th-grouplist(258)。
     ⚠️ `.tl-focus .tf-list` 必须带父选择器，只写 `.tf-list` 特异度不够覆盖不掉。 */
  .lt-grid,.wl-grid,.tl-focus .tf-list,.th-grouplist{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
  .ach-grid{grid-template-columns:repeat(2,1fr)}
  .ck-grid{grid-template-columns:repeat(7,1fr)}   /* 极窄屏把 15 周压成 7 列两段 */
}

/* ============================================================
   手机横屏（高度 ≤540）：纵向空间比宽度更紧张，页头必须再压
   ============================================================ */
@media (orientation:landscape) and (max-height:540px){
  :root{--hd-h:46px}
  .hd{min-height:calc(var(--hd-h) + var(--sat))}
  .logo .mark{font-size:1.25rem}
  .hero{padding:20px 24px}
  .hero h1{font-size:1.6rem}
  .hero::after{display:none}
  /* 抽屉高度不必在这里重写：它取的是 var(--hd-h)，上面改小后自动跟着变 */
  .modal{max-height:94vh;max-height:94dvh}
  .cmd-mask{padding-top:6px}
  .cmd-body{max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
  .tl-inner{height:210px}
  .tl-axis,.evt.cn,.evt.wd,.evt.world,.tl-tick{top:100px}
  .tl-track-label{top:20px}
  .tl-track-label.w{top:156px}
}

/* ============================================================
   动态视口高度：Android / iOS 地址栏收放会改变 100vh
   先给 vh 兜底，再用 dvh 覆盖（鸿蒙旧版不支持 dvh，故不可省掉上一步）
   ============================================================ */
@supports (height:100dvh){
  @media (max-width:1023px){
    /* 抽屉高度已在 #nav 里用 vh→dvh 双写兜底，这里不再重复一份来源 */
    .modal{max-height:92dvh}
    .cmd-body{max-height:calc(100dvh - 220px)}
  }
  @media (orientation:landscape) and (max-height:540px){
    .modal{max-height:94dvh}
    .cmd-body{max-height:calc(100dvh - 150px)}
  }
}

/* ============================================================
   触控设备（无 hover）：凡是「靠悬停才显示」的信息都要放开
   否则手机上永远看不到——这类内容往往正是关键说明
   ============================================================ */
@media (hover:none){
  .evt .lab{opacity:1}                 /* 时间轴事件标签：改为常显 */
  .tl-scroll{cursor:default}
  .tp-card:hover{transform:none}       /* 关掉位移型 hover，避免触屏残留状态 */
  .evt:hover{transform:translate(-50%,-50%)}
  .evt:hover .lab{opacity:1}
  .cap-item:hover,.env-item:hover{background:none}
}

/* 桌面精细指针：保留 hover 增强，并补键盘可达性 */
@media (hover:hover) and (pointer:fine){
  :focus-visible{outline:2px solid rgba(var(--accentRGB),.6);outline-offset:2px;border-radius:6px}
}
/* 触控设备上 focus-visible 同样要可见（外接键盘 / 无障碍） */
@media (hover:none){
  :focus-visible{outline:2px solid rgba(var(--accentRGB),.6);outline-offset:2px;border-radius:6px}
}

/* ============================================================
   无障碍：尊重系统「减弱动态效果」
   前庭功能敏感的用户会因大面积位移动画不适
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   打印：已在 style.css 有基础规则，这里补齐交互元素
   ============================================================ */
@media print{
  .nav-toggle,.site-notice,.i18n-scope,.search-trigger,#lang-toggle{display:none !important}
}

/* ============================================================
   人文地理 / 近现代作者：新增组件的窄屏收束
   ------------------------------------------------------------
   .gc-factors / .gc-facts 用的是 minmax(290px,1fr)。在 320px 及以下
   的屏（折叠屏外屏 344 / 260）里可用宽度不足 290px，auto-fill 仍会
   按 290px 建列，直接撑出横向滚动。所以这几档必须显式改成单列。
   ============================================================ */
@media (max-width:640px){
  .gc-factors,.gc-facts{grid-template-columns:1fr}
  .gc-factor,.gc-fact{padding:13px 14px}
  /* 三列对照表在窄屏读不动，改为「方面 / 南 / 北」上下叠 */
  .gc-cmp-h{display:none}
  .gc-cmp-r{grid-template-columns:1fr;gap:0;padding:11px 13px}
  .gc-cmp-r span{padding:2px 0}
  .gc-cmp-r span:first-child{font-size:0.7667rem;letter-spacing:1.5px;color:var(--accent2);
    margin-bottom:4px;font-weight:700}
  .gc-cmp-r span+span{border-left:0;padding-left:10px;border-left:2px solid var(--line2)}
  .gc-quote{font-size:1rem}
  .gc-notes{padding:14px}
  .gc-note b{display:block;margin-bottom:2px}
}
@media (max-width:480px){
  .gc-chip{font-size:0.8333rem;padding:6px 12px}
  .gc-rep{font-size:0.8rem;padding:4px 10px}
  .gc-sec .gc-sec-b{font-size:0.8667rem;line-height:1.95}
  .gc-factor .lt-sec-b{font-size:0.8333rem}
}
@media (max-width:320px){
  /* 260px 级别的折叠屏外屏：把内边距也压一压，否则卡片只剩一条缝 */
  .gc-factors,.gc-facts{gap:8px}
  .gc-factor,.gc-fact{padding:11px 12px}
  .gc-fact b{min-width:0}
}

/* ============================================================
   外观与适配面板的响应式
   ---------------------------------------------------------------
   面板本身是弹层，窄屏上不再居中「浮」着——改成从底部升起的整幅面板，
   一是手指够得到，二是列表可以一直滚到底，不必在小小的浮层里滚。
   ============================================================ */

/* 页头按钮：窄屏只留色块与节日角标，去掉文字——页头那一排本来就挤 */
@media (max-width:1180px){
  .th-toggle span:not(.th-dot):not(.th-fest-dot){display:none}
  .th-toggle{padding:6px 9px}
}
@media (max-width:640px){
  .th-mask{padding:0;align-items:flex-end}
  .th-panel{width:100%;max-height:92vh;max-height:92dvh;border-radius:16px 16px 0 0;
    border-left:0;border-right:0;border-bottom:0}
  .th-head{padding:16px 16px 12px}
  .th-head h2{font-size:1.15rem}
  .th-body{padding:14px 16px calc(22px + var(--sab))}
  .th-grid,.th-grouplist{grid-template-columns:1fr}
  /* 缩略图在单列卡片里横向排列更省高度 */
  .th-card{flex-direction:row}
  .th-thumb{width:44px;height:56px}
  .th-row-rng{flex-wrap:wrap}
  .th-row input[type=range]{width:100%;order:3;margin-top:4px}
}
@media (max-width:480px){
  .th-tabs span{padding:6px 11px;font-size:0.8rem}
  .th-x{width:44px;height:44px}         /* 触控目标不小于 44px */
  .th-sw{width:48px;height:27px}
  .th-row input:checked~.th-sw::after{transform:translateX(21px)}
  .th-row{padding:12px}
}
@media (max-width:320px){
  .th-head h2{font-size:1.05rem;letter-spacing:1px}
  .th-tabs{gap:2px;padding:10px 12px 0}
  .th-tabs span{padding:5px 8px;font-size:0.7333rem;letter-spacing:0}
  .th-body{padding:12px 12px calc(18px + var(--sab))}
  .th-thumb{width:36px;height:48px}
  .th-n{font-size:0.8667rem}
}

/* 触屏上没有鼠标悬停，卡片抬升这种反馈改为按下时给 */
@media (hover:none){
  .th-card:hover{transform:none}
  .th-card:active{border-color:var(--accent)}
}

/* ============================================================
   首页右侧配图：窄屏（无侧栏、hero 单列）改到文案下方
   ------------------------------------------------------------
   宽屏它是绝对定位的右侧出血图；窄屏 hero 变单列，绝对定位会把整块图
   压在文案上，所以这里改回普通流，让它落到按钮下方。
   渐变方向也从「由右向左」换成「由上向下」——窄屏图是横向铺满的，
   再按水平方向渐隐就只剩中间一条能看清。
   ============================================================ */
@media (max-width:1023px){
  .hero-art{position:relative;width:auto;height:172px;margin:22px 0 0;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,0) 100%)}
  .hero-art-cap{margin:14px 14px 0 0;max-width:80%}
  .hero-art-cap span{font-size:1.0667rem;letter-spacing:2px}
  .hero-art-cap i{display:none}   /* 窄屏只留年份与标题，简介会把图压住 */
}
@media (max-width:480px){
  .hero-art{height:140px;margin-top:16px}
}

/* ============================================================
   首页六入口：悬停介绍气泡（窄屏）
   ------------------------------------------------------------
   宽屏按钮一排三个、气泡居中不会出界；窄屏按钮会折行，
   折到第二行的那个按钮本来就靠左，居中的气泡往左一伸就被视口切掉半句
   —— 实测 414 档只剩「期我们对生物领域的开发」，前半句在屏幕外。
   办法：窄屏让按钮**不定位**，气泡的包含块就变成 .hero .acts
   （它本身就是 position:relative），于是 left:0 永远落在栏目左缘，
   整句必在视口内；同时允许折行、限死最大宽度作为保险。
   ★ 但光把 position 改成 static 不够 —— .btn:hover 上有
     `transform:translateY(-1px)` 与 `filter:brightness(1.1)`，而**带 transform / filter
     的元素会成为绝对定位后代的包含块，哪怕它是 position:static**。
     于是「鼠标悬停时」包含块又翻回按钮本身，left:0 变成按钮左缘：
     右列按钮的气泡整条冲出视口（实测 390 档量到 200..527，视口只有 390）。
     真机上没有 hover（走的是 .tip-on），所以只在真机看永远发现不了 ——
     窄屏桌面浏览器、以及任何合成 hover 的验收脚本都会踩到。
     所以窄屏这几个按钮的 hover 位移与滤镜一并关掉，改由背景色给反馈。
   ============================================================ */
@media (max-width:640px){
  .hero .acts .btn[data-soon]{position:static}
  .hero .acts .btn[data-soon]:hover{transform:none;filter:none}
  .hero .acts .btn[data-soon]::after{left:0;--tx:0;white-space:normal;text-align:left;
    max-width:min(300px,calc(100vw - 60px))}

  /* ----------------------------------------------------------
     六个主题入口在手机上改「两个一行」
     ----------------------------------------------------------
     PC 是两行各三个（上排 历史/地理/生物，下排 数学/物理/化学）。
     直板手机上每个按钮只剩一百出头宽度：三个一行会把「✦ 进时空长卷」
     挤成两行，而 flex-wrap 又让折行位置随文案长短乱跳 —— 实测原来折成
     2/1/2/1 四行。
     ★ 关键是 .acts-row 必须 display:contents，让两个「行容器」在布局上
       消失，六个按钮回到同一个网格里，才能排出 2/2/2 三行。
       只把 .acts-row 自己改成两列网格是不行的：那样得到的是
       [3 个按钮的容器] × 2 → 每行 2/1，两组合起来还是 2/1/2/1
       （第一次改就踩了这个，测试也是照着 2/1/2/1 红的）。
       DOM 与分组语义不变，只是布局层不再有这两层盒子。
     ★ justify-items 必须一起由 start 改 stretch：网格项若不拉伸，
       每格会被收成内容宽，左右两列立刻参差。
     ---------------------------------------------------------- */
  .hero .acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;justify-items:stretch}
  .hero .acts-row{display:contents}
  .hero .acts .btn{width:100%;margin:0;justify-content:center;text-align:center;
    padding:10px 12px;letter-spacing:1px}
}

/* ============================================================
   宇宙星球：多端降列
   ------------------------------------------------------------
   宽屏是「四级台阶并排 4 格 / 行星卡自动铺 / 太阳影响 4 格」，
   窄屏必须逐级降列，否则每格里只剩两三个字一行（横向也容易溢出）。
   ============================================================ */
@media (max-width:1180px){
  .sp-levels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-impacts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .sp-earth,.sp-sun{grid-template-columns:minmax(0,1fr)}
  .sp-planets{grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
}
@media (max-width:640px){
  .sp-levels,.sp-impacts{grid-template-columns:minmax(0,1fr)}
  .sp-planets{grid-template-columns:minmax(0,1fr)}
  /* 三列表格在窄屏把「所在层次」挤成一列竖排字，索性单列化：
     类型名与层次并排一行，说明另起一行。 */
  .sp-table thead{display:none}
  .sp-table,.sp-table tbody,.sp-table tr,.sp-table td{display:block;width:100%}
  .sp-table tr{padding:9px 0;border-bottom:1px dashed var(--line2)}
  .sp-table td{border-bottom:none;padding:1px 0}
}
@media (max-width:480px){
  .sp-sec{font-size:0.9667rem}
  .sp-hint{flex-direction:column;gap:3px}
}

/* 打印时不输出面板 */
@media print{
  .th-mask,.th-toggle{display:none !important}
}

/* ============================================================
   万物生灵 · 窄屏收窄
   ---------------------------------------------------------------
   这一页的宽内容有三处：
     · 细胞结构图 + 说明是左右两栏（≤1023 必须上下叠，否则 400×260 的
       SVG 会被压成一条，标注文字叠在一起）；
     · 科学史长廊是「年份列 + 正文列」（≤480 并成一列）；
     · 各种 auto-fill 网格的下限（132/226/212px）在 260 档的屏上大于可用宽度，
       auto-fill 只认下限、不认可用宽度，照样按 226px 建列 → 右溢。
   所以 ≤320 一律退单列，不是「可选优化」而是必需。
   ============================================================ */

@media (max-width:1023px){
  /* 细胞图与说明上下叠：图占满宽，说明接在下面 */
  .lf-cellwrap{grid-template-columns:minmax(0,1fr);gap:14px}
  /* 统计条由「自动填充」改为固定三列，避免 6 格在 700~1000 之间排成 6 行 */
  .lf-stat{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lf-map{height:clamp(240px,38vh,360px)}
  /* 首页万物生灵：4 个物种在这一档改成 2×2。
     不继续用 auto-fill —— 4 个物种在 481~1023 之间会被 auto-fill 排成 3 列，
     第二行永远只有 1 张卡、右侧空两格；固定 2 列则每行都满。
     也不用 4 列：641~800px 一档四列只剩 137~176px 宽，中文引子会挤成竖条。
     这一档正好覆盖折叠屏展开态（实测 ≈800px CSS 宽）。 */
  .home-life{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}

@media (max-width:640px){
  .lf-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .lf-stat-i b{font-size:1.4rem}
  .lf-stat-i span{font-size:0.7rem}
  .lf-filter{padding:13px 14px}
  .lf-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:11px}
  /* --lf-px/--lf-pt 是 .lf-shot 出血用的负 margin 基准（见 style.css），
     内边距改小就必须同步改，否则照片会在两侧露出卡片底色。 */
  .lf-card{--lf-px:13px;--lf-pt:12px;padding:12px 13px 10px}
  .lf-h2-out{font-size:1.2rem;margin:24px 0 10px}
  .lf-map{height:clamp(220px,36vh,320px)}
  .lf-map-fb{padding:13px 14px}
  .lf-map-chips{margin-top:11px}
  /* 与桌面同一套口径按比例缩：字号从 0.9667rem 降到 0.9rem，
     列宽也跟着收，但不能收到「两阶段的年份被从词中间断开」的程度。 */
  .lf-tl-i{grid-template-columns:5.4rem minmax(0,1fr);gap:9px}
  .lf-tl-y{font-size:0.9rem;letter-spacing:0.5px}
  .lf-exp,.lf-home,.lf-pj{padding:14px 15px}
  .lf-spirits{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
  .lf-badges{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:9px}
  .lf-coll{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:9px}
  .lf-coll-i b{font-size:1.2667rem}
  /* 首页万物生灵同样固定 2 列：auto-fill(180px) 在 481~640 会排出 3 列，
     4 张卡变成 3+1 行、右下角空一格。 */
  .home-life{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .lf-src-i{padding-left:9px}
}

@media (max-width:480px){
  /* 筛选标签独占一行：不然「类群」两个字挤在胶囊中间，视觉上没有分组感 */
  .lf-flab{flex:1 1 100%;min-width:0;margin-bottom:1px}
  .lf-count{margin-left:0;flex:1 1 100%;text-align:right}
  .lf-grid{grid-template-columns:minmax(0,1fr)}
  /* 科学史：年份并到正文上方，4.6rem 的固定列在 320 上会挤掉正文 */
  .lf-tl-i{grid-template-columns:minmax(0,1fr);gap:2px}
  .lf-proc-ctl{gap:6px}
  .lf-sl{margin-left:0;flex:1 1 100%}
  .lf-tb-form th{width:4.6em}
  /* .home-life 已从这一行的共享列表里摘掉：它在 ≤640 档固定 2 列，
     沿用上一档的 auto-fill(132px) 反而会在 481~640 排出 3 列（4 张卡 3+1 行）。 */
  .lf-spirits,.lf-badges,.lf-coll{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .lf-spirit-now{font-size:1.0667rem}
  .lf-spirit-now .lf-note{margin-left:0;flex:1 1 100%}
}

@media (max-width:375px){
  .lf-stat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lf-d-head{gap:9px}
  .lf-d-n{font-size:1.3333rem}
  .lf-d-acts .btn{flex:1 1 100%;justify-content:center}
}

@media (max-width:320px){
  /* ⚠️ auto-fill/auto-fit 只认下限、不认可用宽度：260 档的屏减去页面内边距
     只剩 ~212px，仍会按 226px 建列 → 整页右溢出。这一档全部退单列。 */
  .lf-grid,.home-life,.lf-spirits,.lf-badges,.lf-coll{grid-template-columns:minmax(0,1fr)}
  .lf-stat{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .lf-map{height:200px}
  .lf-tb{font-size:0.7667rem}
  .lf-tb th,.lf-tb td{padding:6px 7px}
  .lf-card-n{font-size:1.0667rem}
  .lf-h2{font-size:1.0667rem}
  .lf-quote{font-size:0.9667rem;padding-left:9px}
}

/* ============================================================
   风流人物（历史人物 ＋ 天下诗文）
   ------------------------------------------------------------
   这一页的窄屏风险点只有两个，都是「固定宽度 + 四列」带来的：
     ① 模块切换条：两个按钮 + 右侧说明，窄屏必须让说明单独占一行，
        否则说明被挤成两三个字一行的竖条；
     ② 作品库列表视图：四列（序号-作品名-作者-年代）在窄屏最容易横向溢出。
        对策是**不断列**（用户明确要这四列），只缩固定列的宽度与字距，
        名称列本来就吃剩余宽度，配合 table-layout:fixed 的 ellipsis 不会溢出。
   ============================================================ */

@media (max-width:640px){
  .ff-seg{padding:4px;gap:3px}
  .ff-seg-b{padding:6px 14px;font-size:0.9rem;flex:1 1 auto;text-align:center}
  .ff-seg-n{flex:1 1 100%;margin-left:0;padding:5px 4px 1px;font-size:0.7667rem}
  .wl-table{font-size:0.8rem}
  /* 固定列按比例收窄：序号 3.6→2.4、作者 11→7.6、年代 9.5→6.6（rem） */
  .wl-table .wl-no{width:2.8rem}
  .wl-table .wl-au{width:7.6rem}
  .wl-table .wl-yr{width:6.6rem}
  .wl-table th,.wl-table td{padding:8px 6px}
  .wl-viewbar{gap:7px}
  #wl-size{min-width:7rem}
}

@media (max-width:480px){
  /* 列表在此档不再缩列宽，而是缩字号与内边距 —— 再缩列宽，
     「1949—1976」这种年代会整段被省略号吃掉，四列就白留了。 */
  .wl-table{font-size:0.7333rem}
  .wl-table .wl-no{width:2.5rem}
  .wl-table .wl-au{width:6.6rem}
  .wl-table .wl-yr{width:5.8rem}
  .wl-table th,.wl-table td{padding:7px 5px}
  .wl-table th:nth-child(2){letter-spacing:.5px}
  /* 名称列里的角标在窄屏会挤掉书名，收成只在「我导入的」时显示 */
  .wl-name .wl-flag.book{display:none}
  .wl-viewbar{gap:6px}
  .wl-vb-b{padding:5px 11px}
}

@media (max-width:320px){
  /* ⚠️ 到 260 档时四列只剩 ~192px，作者与年代两列加起来就占掉一半。
     这两档下把作者与年代各收成 4.6rem —— 仍然显示、仍然可点，
     只是靠 ellipsis 截断（点开详情能看到完整信息），不隐藏任何一列。 */
  .wl-table{font-size:0.7rem}
  .wl-table .wl-no{width:2.3rem}
  .wl-table .wl-au{width:4.6rem}
  .wl-table .wl-yr{width:4.6rem}
  .wl-vb-l{font-size:0.7333rem}
}