/* ============================================================
   山河纪 · 多端响应式适配
   ---------------------------------------------------------------
   为什么单独一个文件、且必须放在 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}
  .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}

  .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}
  nav{order:3}

  /* ----------------------------------------------------------
     导航抽屉：从左侧划出
     ----------------------------------------------------------
     ★ 用 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)}
  /* 遮罩：抽屉之外的地方压暗，同时充当「点外面收起」的点击面。
     width/height 用视口单位而不是 inset:0 —— 同上，避开 backdrop-filter
     带来的包含块问题（inset:0 会只盖住页头那一条）。 */
  .nav-scrim{display:block;position:fixed;top:0;left:0;
    width:100vw;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}
  .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 永远落在栏目左缘，
   整句必在视口内；同时允许折行、限死最大宽度作为保险。
   ============================================================ */
@media (max-width:640px){
  .hero .acts .soon{position:static}
  .hero .acts .soon::after{left:0;--tx:0;white-space:normal;text-align:left;
    max-width:min(300px,calc(100vw - 56px))}

  /* ----------------------------------------------------------
     六个主题入口在手机上改「两个一行」
     ----------------------------------------------------------
     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}
}