/*
 * 全站响应式适配层（配合 /assets/js/device.js）
 * 依据 html[data-device=mobile|tablet|desktop]、html[data-touch]、html[data-orient] 统一兜底。
 * 各页面自有 <style> 之后加载，用于统一移动端适配，不改变配色主题。
 */

:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

/* 地图顶栏：任何分辨率都不允许溢出——元素超宽时自动换行（宽屏下仍是单行） */
header.top { height: auto; min-height: 54px; flex-wrap: wrap; padding: 6px 14px; }

/* 中窄桌面：收起可选的统计信息，尽量保持单行 */
@media (max-width: 1700px) {
  header.top .stat.opt { display: none; }
}

/* ---------- 1. 全局兜底：禁止横向滚动、媒体自适应、触屏优化 ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
a, button, .btn, .tabs .t, input, select, textarea, .chk { -webkit-tap-highlight-color: transparent; }
.btn, .tabs .t { touch-action: manipulation; }

/* 触屏设备：放宽点击目标，去掉对 hover 的依赖 */
[data-touch="1"] .btn,
[data-touch="1"] .tabs .t { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
[data-touch="1"] .btn.icon { min-width: 36px; }
[data-touch="1"] .list .row { padding-top: 10px; padding-bottom: 10px; }

/* ---------- 2. 超大屏（2K/4K）：避免内容过小、留白失衡 ---------- */
@media (min-width: 1700px) {
  .wrap { font-size: 15px; }
}
@media (min-width: 2200px) {
  body { font-size: 15.5px; }
  .wrap { max-width: 1180px; }
  header.top { gap: 18px; padding: 0 22px; }
}

/* ---------- 3. 平板 / 窄桌面 ---------- */
@media (max-width: 1080px) {
  .legend { left: 12px; }
}

/* ---------- 4. 手机与小平板（<=820）：地图页改浮层 ---------- */
@media (max-width: 820px) {
  /* 顶栏：可换行、取消固定高度，按钮紧凑 */
  header.top {
    height: auto; min-height: 52px; flex-wrap: wrap;
    gap: 6px 8px; padding: 7px 10px; padding-top: calc(7px + var(--safe-t));
  }
  header.top .brand { font-size: 13.5px; }
  header.top .brand small.opt { display: none; }
  header.top .btn { padding: 5px 9px; font-size: 12.5px; }
  header.top .stat { font-size: 12px; }

  /* 游客提示条：允许换行 */
  .guestbar { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; }
  .guestbar .gbtn { padding: 4px 10px; }

  /* 侧栏 / 详情 / 报文抽屉：改为浮层 */
  aside.side { position: absolute; top: 0; bottom: 0; left: 0; width: min(86%, 320px); box-shadow: var(--shadow); }
  .detail { position: absolute; top: 0; right: 0; bottom: 0; width: min(92%, 360px); box-shadow: var(--shadow); }
  .detail .hd, .drawer .hd { flex-wrap: wrap; }
  .drawer { left: 0; right: 0; width: 100%; height: min(46vh, 320px); border-left: 0; }
  .legend { display: none; }

  /* 提示气泡：移动端通栏显示 */
  #toast { left: 12px; right: 12px; bottom: calc(12px + var(--safe-b)); align-items: stretch; }
  #toast div { max-width: none; }

  /* 表格：容器内横向滚动，不再撑破屏幕 */
  .card table, main table, table.tbl {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .card table th, .card table td, main table th, main table td { white-space: nowrap; }

  /* 卡片内边距收紧 */
  .card { padding: 14px; }
}

/* ---------- 5. 手机（<=600）：单列、满宽浮层 ---------- */
@media (max-width: 600px) {
  header.top { gap: 6px; }
  aside.side { width: 100%; }
  .detail { width: 100%; }
  .drawer { height: min(50vh, 300px); }

  /* 详情键值对：由两列改单列，避免长内容挤压 */
  .detail .kv { grid-template-columns: 1fr 1fr; }
}

/* ---------- 6. 小手机（<=420）：进一步压缩 ---------- */
@media (max-width: 420px) {
  header.top { padding: 6px 8px; padding-top: calc(6px + var(--safe-t)); }
  header.top .btn { padding: 5px 8px; font-size: 12px; }
  .sec { padding: 9px 10px; }
  .brand { letter-spacing: 0; }
}

/* ---------- 7. 手机横屏（高度受限）---------- */
@media (max-height: 480px) and (orientation: landscape) {
  header.top { min-height: 44px; }
  .drawer { height: min(72vh, 220px); }
}

/* ---------- 8. 触屏 + 小屏：弹窗/抽屉底部留出 home 指示条 ---------- */
@media (max-width: 820px) {
  .modal .box { max-height: 88vh; overflow: auto; }
}

/* ---------- 9. 内容页（用户中心 / API 文档 / 工单 / 后台）---------- */
@media (max-width: 720px) {
  .wrap { max-width: 100%; padding: 0 12px; margin: 16px auto; }
  header:not(.top) {
    flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px;
    padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r));
  }
  .card { padding: 14px; }
  .card .kv, .wrap .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .card .kv .k { font-weight: 600; }
  .row > .btn { flex: 1 1 auto; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs .t { white-space: nowrap; }

  /* 后台：表单/布局改单列 */
  .layout { min-height: 0; }
  main { padding: 10px; }
  .field { grid-template-columns: 1fr; }
  .help { grid-column: 1; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .login-wrap { margin: 6vh auto; padding: 18px; }
  .modal .box { width: 92vw; }

  /* 文档页代码块 */
  pre { font-size: 12px; padding: 10px; }

  /* 工单会话：头像缩小、气泡铺满 */
  .msg { gap: 8px; }
  .msg .av { flex-basis: 28px; height: 28px; font-size: 11px; }
  .msg .at a { display: inline-block; margin: 2px 10px 2px 0; }
}

/* 超窄屏（<=380）：进一步压紧 */
@media (max-width: 380px) {
  .wrap { padding: 0 10px; }
  .card { padding: 12px; }
  .btn { padding: 8px 12px; }
}