/* mobile.css — 二级页移动端响应式适配（仅挂二级页，不挂 index.html，严守首页铁律）
   作用：政府/园区决策者多用手机访问，确保二级页在窄屏下可读、表单可填、表格可滚。
   仅含媒体查询，不影响桌面端现有外观；不动任何 HTML 结构/文案。 */

@media (max-width: 768px) {
  .wrap, .container, main, section, .panel, .card {
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box;
  }
  body { font-size: 15px; line-height: 1.6; }
  h1 { font-size: 1.45rem !important; }
  h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1.05rem !important; }

  /* 表单：输入框占满宽度、字号够大便于点按 */
  input, select, textarea, button {
    font-size: 16px !important;       /* ≥16px 避免 iOS 聚焦自动放大 */
    max-width: 100%;
    box-sizing: border-box;
  }
  label { display: block; margin: 8px 0 4px; }

  /* 表格：窄屏横向滚动，避免撑破布局 */
  table.data, table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.data th, table.data td { padding: 8px 10px; }

  /* 双栏/多栏布局降为单列 */
  .row, .grid, .cols { flex-direction: column !important; display: block !important; }
  .row > *, .grid > *, .cols > * { width: 100% !important; margin-bottom: 12px; }

  /* 顶部导航/按钮换行不溢出 */
  nav, .nav, .toolbar { flex-wrap: wrap; }
  .btn, button { width: auto; min-height: 44px; }

  /* 报告/大图区域限宽 */
  .report, .chart, img { max-width: 100%; height: auto; }
}

@media (max-width: 480px) {
  body { font-size: 14px; }
  h1 { font-size: 1.3rem !important; }
  .panel, .card { padding: 14px !important; }
}


/* 2026-09-12 无障碍：为晕动症用户关停动效（与 styles.css 对齐） */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}