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

   设备分档的依据是 **CSS 像素宽度**（不是物理分辨率），按真实机型取：
     1441+       大屏 PC / 超宽屏          → 内容仍限宽 1320，只放大留白
     1181—1440   常规 PC
     901—1180    小笔记本、平板横屏
     861—900     平板竖屏（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)}

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

/* ============================================================
   ≤1180 小笔记本 / 平板横屏
   ============================================================ */
@media (max-width:1180px){
  :root{--pad-x:20px}
  .hd{padding:0 20px;gap:14px}
  nav a{padding:7px 10px;font-size:0.8667rem}
  .hero{padding:60px 40px}
  .hero h1{font-size:3.0667rem}
  .hero::after{font-size:0.8rem;letter-spacing:8px;right:26px;bottom:20px}
}

/* ============================================================
   ≤1023 平板竖屏 / 折叠屏内屏展开
   原先只有 1020 一档，且只改了网格列数，页头与字号没动 →
   这个宽度区间（iPad、Z Fold 内屏）此前是「看着能开但排得挤」
   ============================================================ */
@media (max-width:1023px){
  :root{--pad-x:18px}
  .home-grid,.geo-grid{grid-template-columns: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)}
}

/* ============================================================
   ≤860 平板竖屏 / 折叠屏内屏（Z Fold 673×841）/ 大屏手机横屏
   ★ 从这一档起导航换成抽屉，因为 11 个导航项横排已经放不下
   ============================================================ */
@media (max-width:860px){
  :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}
  .logo{flex:0 1 auto;min-width:0}
  .logo .mark{font-size:1.3333rem;letter-spacing:3px}
  .logo .slog{display:none}
  .nav-toggle{display:inline-flex;order:2}
  nav{order:3}

  /* 导航抽屉：固定在页头之下，纵向排列，超高时自身可滚 */
  #nav{display:none;position:fixed;left:0;right:0;
    top:calc(var(--hd-h) + var(--sat));
    flex-direction:column;flex-wrap:nowrap;gap:2px;margin:0;
    padding:10px calc(var(--pad-x) + var(--sar)) 14px calc(var(--pad-x) + var(--sal));
    max-height:calc(100vh - var(--hd-h) - var(--sat));
    max-height:calc(100dvh - var(--hd-h) - var(--sat));
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--hdBg2);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);box-shadow:0 24px 50px rgba(var(--shRGB),.5)}
  body.nav-open #nav{display:flex}
  #nav a{font-size:1rem;padding:12px 14px;border-radius:10px;border:1px solid transparent}
  #nav a.on{border-color:var(--line)}
  /* 抽屉打开时锁住页面滚动 */
  body.nav-open{overflow:hidden}

  /* 工具区压缩：只留图标与必要状态 */
  .search-trigger{margin-left:auto;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.7333rem;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-body{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.2rem;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}

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

/* ============================================================
   ≤375 小屏手机 / 折叠屏外屏（Z Fold 外屏约 344）
   ============================================================ */
@media (max-width:375px){
  :root{--pad-x:11px;--hd-h:50px}
  body{font-size:0.9333rem}
  .logo .mark{font-size:1.0667rem;letter-spacing:1px}
  #login-state{max-width:70px}
  .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:9px}
  .hd{gap:6px}
  .logo .mark{font-size:1rem;letter-spacing:0}
  .search-trigger{display:none}      /* 检索可用快捷键/抽屉方式替代，优先保导航 */
  .hero h1{font-size:1.2667rem}
  .sec-head .cn{font-size:1.1333rem}
  .tb-grid,.gv-grid{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.1333rem}
  .hero{padding:20px 24px}
  .hero h1{font-size:1.6rem}
  .hero::after{display:none}
  #nav{max-height:calc(100vh - var(--hd-h) - var(--sat));
    max-height:calc(100dvh - var(--hd-h) - var(--sat))}
  .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:860px){
    #nav{max-height:calc(100dvh - var(--hd-h) - var(--sat))}
    .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)}
}

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